HTML
xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<style>4
/* Height for devices larger than 576px */5
@media (min-width: 992px) {6
#intro {7
margin-top: -58.59px;8
height: 50vh !important;9
}10
}11
12
.navbar .nav-link {13
color: #fff !important;14
}15
</style>16
17
<!-- Navbar -->18
<nav class="navbar navbar-expand-lg navbar-dark d-none d-lg-block" style="z-index: 2000;">19
<div class="container-fluid">20
<!-- Navbar brand -->21
<a class="navbar-brand nav-link" target="_blank" href="https://mdbootstrap.com/docs/standard/">22
<strong>MDB</strong>23
</a>24
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"25
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">26
<i class="fas fa-bars"></i>27
</button>28
<div class="collapse navbar-collapse" id="navbarExample01">29
<ul class="navbar-nav me-auto mb-2 mb-lg-0">30
<li class="nav-item active">31
<a class="nav-link" aria-current="page" href="#intro">Home</a>32
</li>33
<li class="nav-item">34
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"35
target="_blank">Learn Bootstrap 5</a>36
</li>37
<li class="nav-item">38
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>39
</li>40
</ul>41
42
<ul class="navbar-nav d-flex flex-row">43
<!-- Icons -->44
<li class="nav-item me-3 me-lg-0">45
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"46
target="_blank">47
<i class="fab fa-youtube"></i>48
</a>49
</li>50
<li class="nav-item me-3 me-lg-0">51
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">52
<i class="fab fa-facebook-f"></i>53
</a>54
</li>55
<li class="nav-item me-3 me-lg-0">56
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">57
<i class="fab fa-twitter"></i>58
</a>59
</li>60
<li class="nav-item me-3 me-lg-0">61
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">62
<i class="fab fa-github"></i>63
</a>64
</li>65
</ul>66
</div>67
</div>68
</nav>69
<!-- Navbar -->70
71
<!-- Background image -->72
<div id="intro" class="bg-image vh-100 shadow-1-strong">73
<video style="min-width: 100%; min-height: 100%;" playsinline autoplay muted loop>74
<source class="h-100"75
src="https://mdbootstrap.com/img/video/animation-intro-min.mp4"76
type="video/mp4"77
/>78
</video>79
<div class="mask" style="80
background: linear-gradient(81
45deg,82
rgba(29, 236, 197, 0.7),83
rgba(91, 14, 214, 0.7) 100%84
);85
">86
<div class="container d-flex align-items-center justify-content-center text-center h-100">87
<div class="text-white" data-mdb-theme="dark">88
<h1 class="mb-3">Learn Bootstrap 5 with MDB</h1>89
<h5 class="mb-4">Best & free guide of responsive web design</h5>90
<a class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init href="https://www.youtube.com/watch?v=c9B4TPnak1A" role="button"91
rel="nofollow" target="_blank">Start tutorial</a>92
<a class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank"93
role="button">Download MDB UI KIT</a>94
</div>95
</div>96
</div>97
</div>98
<!-- Background image -->99
</header>100
<!--Main Navigation-->101
102
<!--Main layout-->103
<main class="mt-5">104
<div class="container">105
<!--Section: Content-->106
<section>107
<div class="row">108
<div class="col-md-6 gx-5 mb-4">109
<div class="bg-image hover-overlay shadow-2-strong" data-mdb-ripple-init data-mdb-ripple-color="light">110
<img src="https://mdbootstrap.com/img/new/slides/031.jpg" class="img-fluid" />111
<a href="#!">112
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>113
</a>114
</div>115
</div>116
117
<div class="col-md-6 gx-5 mb-4">118
<h4><strong>Facilis consequatur eligendi</strong></h4>119
<p class="text-muted">120
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis121
consequatur eligendi quisquam doloremque vero ex debitis122
veritatis placeat unde animi laborum sapiente illo possimus,123
commodi dignissimos obcaecati illum maiores corporis.124
</p>125
<p><strong>Doloremque vero ex debitis veritatis?</strong></p>126
<p class="text-muted">127
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod128
itaque voluptate nesciunt laborum incidunt. Officia, quam129
consectetur. Earum eligendi aliquam illum alias, unde optio130
accusantium soluta, iusto molestiae adipisci et?131
</p>132
</div>133
</div>134
</section>135
<!--Section: Content-->136
137
<hr class="my-5" />138
139
<!--Section: Content-->140
<section class="text-center">141
<h4 class="mb-5"><strong>Facilis consequatur eligendi</strong></h4>142
143
<div class="row">144
<div class="col-lg-4 col-md-12 mb-4">145
<div class="card">146
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">147
<img src="https://mdbootstrap.com/img/new/standard/nature/184.jpg" class="img-fluid" />148
<a href="#!">149
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>150
</a>151
</div>152
<div class="card-body">153
<h5 class="card-title">Card title</h5>154
<p class="card-text">155
Some quick example text to build on the card title and make156
up the bulk of the card's content.157
</p>158
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>159
</div>160
</div>161
</div>162
163
<div class="col-lg-4 col-md-6 mb-4">164
<div class="card">165
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">166
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />167
<a href="#!">168
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>169
</a>170
</div>171
<div class="card-body">172
<h5 class="card-title">Card title</h5>173
<p class="card-text">174
Some quick example text to build on the card title and make175
up the bulk of the card's content.176
</p>177
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>178
</div>179
</div>180
</div>181
182
<div class="col-lg-4 col-md-6 mb-4">183
<div class="card">184
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">185
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />186
<a href="#!">187
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>188
</a>189
</div>190
<div class="card-body">191
<h5 class="card-title">Card title</h5>192
<p class="card-text">193
Some quick example text to build on the card title and make194
up the bulk of the card's content.195
</p>196
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>197
</div>198
</div>199
</div>200
</div>201
</section>202
<!--Section: Content-->203
204
<hr class="my-5" />205
206
<!--Section: Content-->207
<section class="mb-5">208
<h4 class="mb-5 text-center">209
<strong>Facilis consequatur eligendi</strong>210
</h4>211
212
<div class="row d-flex justify-content-center">213
<div class="col-md-6">214
<form>215
<!-- 2 column grid layout with text inputs for the first and last names -->216
<div class="row mb-4">217
<div class="col">218
<div class="form-outline" data-mdb-input-init>219
<input type="text" id="form3Example1" class="form-control" />220
<label class="form-label" for="form3Example1">First name</label>221
</div>222
</div>223
<div class="col">224
<div class="form-outline" data-mdb-input-init>225
<input type="text" id="form3Example2" class="form-control" />226
<label class="form-label" for="form3Example2">Last name</label>227
</div>228
</div>229
</div>230
231
<!-- Email input -->232
<div class="form-outline mb-4" data-mdb-input-init>233
<input type="email" id="form3Example3" class="form-control" />234
<label class="form-label" for="form3Example3">Email address</label>235
</div>236
237
<!-- Password input -->238
<div class="form-outline mb-4" data-mdb-input-init>239
<input type="password" id="form3Example4" class="form-control" />240
<label class="form-label" for="form3Example4">Password</label>241
</div>242
243
<!-- Checkbox -->244
<div class="form-check d-flex justify-content-center mb-4">245
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" checked />246
<label class="form-check-label" for="form2Example3">247
Subscribe to our newsletter248
</label>249
</div>250
251
<!-- Submit button -->252
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>253
Sign up254
</button>255
256
<!-- Register buttons -->257
<div class="text-center">258
<p>or sign up with:</p>259
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>260
<i class="fab fa-facebook-f"></i>261
</button>262
263
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>264
<i class="fab fa-google"></i>265
</button>266
267
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>268
<i class="fab fa-twitter"></i>269
</button>270
271
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>272
<i class="fab fa-github"></i>273
</button>274
</div>275
</form>276
</div>277
</div>278
</section>279
<!--Section: Content-->280
</div>281
</main>282
<!--Main layout-->283
284
<!--Footer-->285
<footer class="bg-light text-lg-start">286
<div class="py-4 text-center">287
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init288
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">289
Learn Bootstrap 5290
</a>291
<a role="button" class="btn btn-primary btn-lg data-mdb-ripple-init m-2" href="https://mdbootstrap.com/docs/standard/" target="_blank">292
Download MDB UI KIT293
</a>294
</div>295
296
<hr class="m-0" />297
298
<div class="text-center py-4 align-items-center">299
<p>Follow MDB on social media</p>300
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init301
rel="nofollow" target="_blank">302
<i class="fab fa-youtube"></i>303
</a>304
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init305
target="_blank">306
<i class="fab fa-facebook-f"></i>307
</a>308
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init309
target="_blank">310
<i class="fab fa-twitter"></i>311
</a>312
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init313
target="_blank">314
<i class="fab fa-github"></i>315
</a>316
</div>317
318
<!-- Copyright -->319
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">320
© 2020 Copyright:321
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>322
</div>323
<!-- Copyright -->324
</footer>325
<!--Footer-->CSS
1
1
JS
1
1
Console errors: 0