HTML
xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<!-- Intro settings -->4
<style>5
#intro {6
/* Margin to fix overlapping fixed navbar */7
margin-top: 58px;8
}9
10
@media (max-width: 991px) {11
#intro {12
/* Margin to fix overlapping fixed navbar */13
margin-top: 45px;14
}15
}16
</style>17
18
<!-- Navbar -->19
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">20
<div class="container-fluid">21
<!-- Navbar brand -->22
<a class="navbar-brand" target="_blank" href="https://mdbootstrap.com/docs/standard/">23
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="16" alt="" loading="lazy"24
style="margin-top: -3px;" />25
</a>26
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"27
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">28
<i class="fas fa-bars"></i>29
</button>30
<div class="collapse navbar-collapse" id="navbarExample01">31
<ul class="navbar-nav me-auto mb-2 mb-lg-0">32
<li class="nav-item active">33
<a class="nav-link" aria-current="page" href="#intro">Home</a>34
</li>35
<li class="nav-item">36
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"37
target="_blank">Learn Bootstrap 5</a>38
</li>39
<li class="nav-item">40
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>41
</li>42
</ul>43
44
<ul class="navbar-nav d-flex flex-row">45
<!-- Icons -->46
<li class="nav-item me-3 me-lg-0">47
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"48
target="_blank">49
<i class="fab fa-youtube"></i>50
</a>51
</li>52
<li class="nav-item me-3 me-lg-0">53
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">54
<i class="fab fa-facebook-f"></i>55
</a>56
</li>57
<li class="nav-item me-3 me-lg-0">58
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">59
<i class="fab fa-twitter"></i>60
</a>61
</li>62
<li class="nav-item me-3 me-lg-0">63
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">64
<i class="fab fa-github"></i>65
</a>66
</li>67
</ul>68
</div>69
</div>70
</nav>71
<!-- Navbar -->72
73
<!-- Jumbotron -->74
<div id="intro" class="p-5 text-center bg-light">75
<h1 class="mb-3 h2">Learn Bootstrap 5 with MDB</h1>76
<p class="mb-3">Best & free guide of responsive web design</p>77
<a class="btn btn-primary m-2 mb-3" href="https://www.youtube.com/watch?v=c9B4TPnak1A" role="button" data-mdb-ripple-init78
rel="nofollow" target="_blank">Start tutorial</a>79
<a class="btn btn-primary mb-3" href="https://mdbootstrap.com/docs/standard/" target="_blank" data-mdb-ripple-init80
role="button">Download MDB UI KIT</a>81
82
<ul class="mb-0 d-flex justify-content-center list-unstyled">83
<li><i class="fas fa-star fa-sm text-primary"></i></li>84
<li><i class="fas fa-star fa-sm text-primary"></i></li>85
<li><i class="fas fa-star fa-sm text-primary"></i></li>86
<li><i class="fas fa-star fa-sm text-primary"></i></li>87
<li><i class="far fa-star fa-sm text-primary"></i></li>88
<span class="text-black ms-1"><strong>4.9/5</strong>89
<a data-mdb-tooltip-init title="" target="_blank"90
href="https://mdbootstrap.com/docs/jquery/ecommerce/reviews/" data-mdb-original-title="Read reviews">(26991
reviews)</a></span>92
</ul>93
</div>94
<!-- Jumbotron -->95
</header>96
<!--Main Navigation-->97
98
<!--Main layout-->99
<main class="my-4">100
<div class="container">101
<!--Section: Content-->102
<section class="text-center">103
<h4 class="mb-4"><strong>Pricing</strong></h4>104
105
<div class="btn-group mb-4" role="group" aria-label="Basic example">106
<button type="button" class="btn btn-primary active" data-mdb-ripple-init>Monthly billing</button>107
<button type="button" class="btn btn-primary" data-mdb-ripple-init>108
Annual billing <small>(2 months FREE)</small>109
</button>110
</div>111
112
<div class="row">113
114
<!--Grid column-->115
<div class="col-lg-3 col-md-6 mb-4">116
117
<!-- Card -->118
<div class="card">119
120
<div class="card-header bg-white py-3">121
<p class="text-uppercase small mb-2"><strong>Free</strong></p>122
<h5 class="mb-0">Free</h5>123
</div>124
125
<div class="card-body">126
<ul class="list-group list-group-flush">127
<li class="list-group-item">Feature</li>128
<li class="list-group-item">Feature</li>129
<li class="list-group-item">Feature</li>130
</ul>131
</div>132
133
<div class="card-footer bg-white py-3">134
<button type="button" class="btn btn-success btn-sm" data-mdb-ripple-init>Get it</button>135
</div>136
137
</div>138
<!-- Card -->139
140
</div>141
<!--Grid column-->142
143
<!--Grid column-->144
<div class="col-lg-3 col-md-6 mb-4">145
146
<!-- Card -->147
<div class="card border border-primary">148
149
<div class="card-header bg-white py-3">150
<p class="text-uppercase small mb-2"><strong>Essential</strong></p>151
<h5 class="mb-0">$19/month</h5>152
</div>153
154
<div class="card-body">155
<ul class="list-group list-group-flush">156
<li class="list-group-item">Feature</li>157
<li class="list-group-item">Feature</li>158
<li class="list-group-item">Feature</li>159
<li class="list-group-item">Feature</li>160
</ul>161
</div>162
163
<div class="card-footer bg-white py-3">164
<button type="button" class="btn btn-primary btn-sm" data-mdb-ripple-init>Buy now</button>165
</div>166
167
</div>168
<!-- Card -->169
170
</div>171
<!--Grid column-->172
173
<!--Grid column-->174
<div class="col-lg-3 col-md-6 mb-4">175
176
<!-- Card -->177
<div class="card">178
179
<div class="card-header bg-white py-3">180
<p class="text-uppercase small mb-2"><strong>Advanced</strong></p>181
<h5 class="mb-0">$49/month</h5>182
</div>183
184
<div class="card-body">185
<ul class="list-group list-group-flush">186
<li class="list-group-item">Feature</li>187
<li class="list-group-item">Feature</li>188
<li class="list-group-item">Feature</li>189
<li class="list-group-item">Feature</li>190
<li class="list-group-item">Feature</li>191
</ul>192
</div>193
194
<div class="card-footer bg-white py-3">195
<button type="button" class="btn btn-info btn-sm" data-mdb-ripple-init>Buy now</button>196
</div>197
198
</div>199
<!-- Card -->200
201
</div>202
<!--Grid column-->203
204
<!--Grid column-->205
<div class="col-lg-3 col-md-6 mb-4">206
207
<!-- Card -->208
<div class="card">209
210
<div class="card-header bg-white py-3">211
<p class="text-uppercase small mb-2"><strong>Enterprise</strong></p>212
<h5 class="mb-0">$189/month</h5>213
</div>214
215
<div class="card-body">216
<ul class="list-group list-group-flush">217
<li class="list-group-item">Feature</li>218
<li class="list-group-item">Feature</li>219
<li class="list-group-item">Feature</li>220
<li class="list-group-item">Feature</li>221
<li class="list-group-item">Feature</li>222
<li class="list-group-item">Feature</li>223
</ul>224
</div>225
226
<div class="card-footer bg-white py-3">227
<button type="button" class="btn btn-info btn-sm" data-mdb-ripple-init>Buy now</button>228
</div>229
230
</div>231
<!-- Card -->232
233
</div>234
<!--Grid column-->235
236
</div>237
</section>238
<!--Section: Content-->239
</div>240
</main>241
<!--Main layout-->242
243
<!--Footer-->244
<footer class="bg-light text-lg-start">245
<div class="py-4 text-center">246
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init247
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">248
Learn Bootstrap 5249
</a>250
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank">251
Download MDB UI KIT252
</a>253
</div>254
255
<hr class="m-0" />256
257
<div class="text-center py-4 align-items-center">258
<p>Follow MDB on social media</p>259
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init260
rel="nofollow" target="_blank">261
<i class="fab fa-youtube"></i>262
</a>263
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init264
target="_blank">265
<i class="fab fa-facebook-f"></i>266
</a>267
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init268
target="_blank">269
<i class="fab fa-twitter"></i>270
</a>271
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init272
target="_blank">273
<i class="fab fa-github"></i>274
</a>275
</div>276
277
<!-- Copyright -->278
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">279
© 2020 Copyright:280
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>281
</div>282
<!-- Copyright -->283
</footer>284
<!--Footer-->CSS
1
1
JS
1
1
Console errors: 0