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