xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<style>4
/* Carousel styling */5
#introCarousel,6
.carousel-inner,7
.carousel-item,8
.carousel-item.active {9
height: 100vh;10
}11
12
.carousel-item:nth-child(1) {13
background-image: url('https://mdbootstrap.com/img/Photos/Others/images/76.jpg');14
background-repeat: no-repeat;15
background-size: cover;16
background-position: center center;17
}18
.carousel-item:nth-child(2) {19
background-image: url('https://mdbootstrap.com/img/Photos/Others/images/77.jpg');20
background-repeat: no-repeat;21
background-size: cover;22
background-position: center center;23
}24
.carousel-item:nth-child(3) {25
background-image: url('https://mdbootstrap.com/img/Photos/Others/images/78.jpg');26
background-repeat: no-repeat;27
background-size: cover;28
background-position: center center;29
}30
31
/* Height for devices larger than 576px */32
@media (min-width: 992px) {33
#introCarousel {34
margin-top: -58.59px;35
}36
#introCarousel,37
.carousel-inner,38
.carousel-item,39
.carousel-item.active {40
height: 50vh;41
}42
}43
44
.navbar .nav-link {45
color: #fff !important;46
}47
</style>48
49
<!-- Navbar -->50
<nav class="navbar navbar-expand-lg navbar-dark d-none d-lg-block" style="z-index: 2000;">51
<div class="container-fluid">52
<!-- Navbar brand -->53
<a class="navbar-brand nav-link" target="_blank" href="https://mdbootstrap.com/docs/standard/">54
<strong>MDB</strong>55
</a>56
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"57
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">58
<i class="fas fa-bars"></i>59
</button>60
<div class="collapse navbar-collapse" id="navbarExample01">61
<ul class="navbar-nav me-auto mb-2 mb-lg-0">62
<li class="nav-item active">63
<a class="nav-link" aria-current="page" href="#intro">Home</a>64
</li>65
<li class="nav-item">66
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"67
target="_blank">Learn Bootstrap 5</a>68
</li>69
<li class="nav-item">70
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>71
</li>72
</ul>73
74
<ul class="navbar-nav d-flex flex-row">75
<!-- Icons -->76
<li class="nav-item me-3 me-lg-0">77
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"78
target="_blank">79
<i class="fab fa-youtube"></i>80
</a>81
</li>82
<li class="nav-item me-3 me-lg-0">83
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">84
<i class="fab fa-facebook-f"></i>85
</a>86
</li>87
<li class="nav-item me-3 me-lg-0">88
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">89
<i class="fab fa-twitter"></i>90
</a>91
</li>92
<li class="nav-item me-3 me-lg-0">93
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">94
<i class="fab fa-github"></i>95
</a>96
</li>97
</ul>98
</div>99
</div>100
</nav>101
<!-- Navbar -->102
103
<!-- Carousel wrapper -->104
<div id="introCarousel" class="carousel slide carousel-fade shadow-2-strong" data-mdb-carousel-init>105
<!-- Indicators -->106
<div class="carousel-indicators">107
<li data-mdb-target="#introCarousel" data-mdb-slide-to="0" class="active"></li>108
<li data-mdb-target="#introCarousel" data-mdb-slide-to="1"></li>109
<li data-mdb-target="#introCarousel" data-mdb-slide-to="2"></li>110
</div>111
112
<!-- Inner -->113
<div class="carousel-inner">114
<!-- Single item -->115
<div class="carousel-item active">116
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">117
<div class="d-flex justify-content-center align-items-center h-100">118
<div class="text-white text-center" data-mdb-theme="dark">119
<h1 class="mb-3">Learn Bootstrap 5 with MDB</h1>120
<h5 class="mb-4">Best & free guide of responsive web design</h5>121
<a122
class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init123
href="https://www.youtube.com/watch?v=c9B4TPnak1A"124
role="button"125
rel="nofollow"126
target="_blank"127
>Start tutorial</a128
>129
<a130
class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init131
href="https://mdbootstrap.com/docs/standard/"132
target="_blank"133
role="button"134
>Download MDB UI KIT</a135
>136
</div>137
</div>138
</div>139
</div>140
141
<!-- Single item -->142
<div class="carousel-item">143
<div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">144
<div class="d-flex justify-content-center align-items-center h-100">145
<div class="text-white text-center">146
<h2>You can place here any content</h2>147
</div>148
</div>149
</div>150
</div>151
152
<!-- Single item -->153
<div class="carousel-item">154
<div155
class="mask"156
style="157
background: linear-gradient(158
45deg,159
rgba(29, 236, 197, 0.7),160
rgba(91, 14, 214, 0.7) 100%161
);162
"163
>164
<div class="d-flex justify-content-center align-items-center h-100">165
<div class="text-white text-center" data-mdb-theme="dark">166
<h2>And cover it with any mask</h2>167
<a168
class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init169
href="https://mdbootstrap.com/docs/standard/content-styles/masks/"170
target="_blank"171
role="button"172
>Learn about masks</a173
>174
</div>175
</div>176
</div>177
</div>178
</div>179
<!-- Inner -->180
181
<!-- Controls -->182
<a class="carousel-control-prev" href="#introCarousel" role="button" data-mdb-slide="prev">183
<span class="carousel-control-prev-icon" aria-hidden="true"></span>184
<span class="sr-only">Previous</span>185
</a>186
<a class="carousel-control-next" href="#introCarousel" role="button" data-mdb-slide="next">187
<span class="carousel-control-next-icon" aria-hidden="true"></span>188
<span class="sr-only">Next</span>189
</a>190
</div>191
<!-- Carousel wrapper -->192
</header>193
<!--Main Navigation-->194
195
<!--Main layout-->196
<main class="mt-5">197
<div class="container">198
<!--Section: Content-->199
<section>200
<div class="row">201
<div class="col-md-6 gx-5 mb-4">202
<div class="bg-image hover-overlay shadow-2-strong" data-mdb-ripple-init data-mdb-ripple-color="light">203
<img src="https://mdbootstrap.com/img/new/slides/031.jpg" class="img-fluid" />204
<a href="#!">205
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>206
</a>207
</div>208
</div>209
210
<div class="col-md-6 gx-5 mb-4">211
<h4><strong>Facilis consequatur eligendi</strong></h4>212
<p class="text-muted">213
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur214
eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum215
sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.216
</p>217
<p><strong>Doloremque vero ex debitis veritatis?</strong></p>218
<p class="text-muted">219
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod itaque voluptate220
nesciunt laborum incidunt. Officia, quam consectetur. Earum eligendi aliquam illum221
alias, unde optio accusantium soluta, iusto molestiae adipisci et?222
</p>223
</div>224
</div>225
</section>226
<!--Section: Content-->227
228
<hr class="my-5" />229
230
<!--Section: Content-->231
<section class="text-center">232
<h4 class="mb-5"><strong>Facilis consequatur eligendi</strong></h4>233
234
<div class="row">235
<div class="col-lg-4 col-md-12 mb-4">236
<div class="card">237
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">238
<img239
src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"240
class="img-fluid"241
/>242
<a href="#!">243
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>244
</a>245
</div>246
<div class="card-body">247
<h5 class="card-title">Card title</h5>248
<p class="card-text">249
Some quick example text to build on the card title and make up the bulk of the250
card's content.251
</p>252
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>253
</div>254
</div>255
</div>256
257
<div class="col-lg-4 col-md-6 mb-4">258
<div class="card">259
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">260
<img261
src="https://mdbootstrap.com/img/new/standard/nature/023.jpg"262
class="img-fluid"263
/>264
<a href="#!">265
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>266
</a>267
</div>268
<div class="card-body">269
<h5 class="card-title">Card title</h5>270
<p class="card-text">271
Some quick example text to build on the card title and make up the bulk of the272
card's content.273
</p>274
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>275
</div>276
</div>277
</div>278
279
<div class="col-lg-4 col-md-6 mb-4">280
<div class="card">281
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">282
<img283
src="https://mdbootstrap.com/img/new/standard/nature/111.jpg"284
class="img-fluid"285
/>286
<a href="#!">287
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>288
</a>289
</div>290
<div class="card-body">291
<h5 class="card-title">Card title</h5>292
<p class="card-text">293
Some quick example text to build on the card title and make up the bulk of the294
card's content.295
</p>296
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>297
</div>298
</div>299
</div>300
</div>301
</section>302
<!--Section: Content-->303
304
<hr class="my-5" />305
306
<!--Section: Content-->307
<section class="mb-5">308
<h4 class="mb-5 text-center"><strong>Facilis consequatur eligendi</strong></h4>309
310
<div class="row d-flex justify-content-center">311
<div class="col-md-6">312
<form>313
<!-- 2 column grid layout with text inputs for the first and last names -->314
<div class="row mb-4">315
<div class="col">316
<div class="form-outline" data-mdb-input-init>317
<input type="text" id="form3Example1" class="form-control" />318
<label class="form-label" for="form3Example1">First name</label>319
</div>320
</div>321
<div class="col">322
<div class="form-outline" data-mdb-input-init >323
<input type="text" id="form3Example2" class="form-control" />324
<label class="form-label" for="form3Example2">Last name</label>325
</div>326
</div>327
</div>328
329
<!-- Email input -->330
<div class="form-outline mb-4" data-mdb-input-init>331
<input type="email" id="form3Example3" class="form-control" />332
<label class="form-label" for="form3Example3">Email address</label>333
</div>334
335
<!-- Password input -->336
<div class="form-outline mb-4" data-mdb-input-init>337
<input type="password" id="form3Example4" class="form-control" />338
<label class="form-label" for="form3Example4">Password</label>339
</div>340
341
<!-- Checkbox -->342
<div class="form-check d-flex justify-content-center mb-4">343
<input344
class="form-check-input me-2"345
type="checkbox"346
value=""347
id="form2Example3"348
checked349
/>350
<label class="form-check-label" for="form2Example3">351
Subscribe to our newsletter352
</label>353
</div>354
355
<!-- Submit button -->356
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>357
Sign up358
</button>359
360
<!-- Register buttons -->361
<div class="text-center">362
<p>or sign up with:</p>363
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>364
<i class="fab fa-facebook-f"></i>365
</button>366
367
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>368
<i class="fab fa-google"></i>369
</button>370
371
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>372
<i class="fab fa-twitter"></i>373
</button>374
375
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>376
<i class="fab fa-github"></i>377
</button>378
</div>379
</form>380
</div>381
</div>382
</section>383
<!--Section: Content-->384
</div>385
</main>386
<!--Main layout-->387
388
<!--Footer-->389
<footer class="bg-light text-lg-start">390
<div class="py-4 text-center">391
<a392
role="button"393
class="btn btn-primary btn-lg m-2" data-mdb-ripple-init394
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"395
rel="nofollow"396
target="_blank"397
>398
Learn Bootstrap 5399
</a>400
<a401
role="button"402
class="btn btn-primary btn-lg m-2" data-mdb-ripple-init403
href="https://mdbootstrap.com/docs/standard/"404
target="_blank"405
>406
Download MDB UI KIT407
</a>408
</div>409
410
<hr class="m-0" />411
412
<div class="text-center py-4 align-items-center">413
<p>Follow MDB on social media</p>414
<a415
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"416
class="btn btn-primary m-1" data-mdb-ripple-init417
role="button"418
rel="nofollow"419
target="_blank"420
>421
<i class="fab fa-youtube"></i>422
</a>423
<a424
href="https://www.facebook.com/mdbootstrap"425
class="btn btn-primary m-1" data-mdb-ripple-init426
role="button"427
rel="nofollow"428
target="_blank"429
>430
<i class="fab fa-facebook-f"></i>431
</a>432
<a433
href="https://twitter.com/MDBootstrap"434
class="btn btn-primary m-1"435
role="button"436
rel="nofollow"437
target="_blank"438
>439
<i class="fab fa-twitter"></i>440
</a>441
<a442
href="https://github.com/mdbootstrap/mdb-ui-kit"443
class="btn btn-primary m-1" data-mdb-ripple-init444
role="button"445
rel="nofollow"446
target="_blank"447
>448
<i class="fab fa-github"></i>449
</a>450
</div>451
452
<!-- Copyright -->453
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">454
© 2020 Copyright:455
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>456
</div>457
<!-- Copyright -->458
</footer>1
1
1
1
Console errors: 0