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