HTML
xxxxxxxxxx1
<!-- Navbar -->2
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white">3
<!-- Container wrapper -->4
<div class="container"> 5
<!-- Toggle button -->6
<button7
class="navbar-toggler"8
type="button"9
data-mdb-toggle="collapse"10
data-mdb-target="#navbarSupportedContent1"11
aria-controls="navbarSupportedContent1"12
aria-expanded="false"13
aria-label="Toggle navigation"14
>15
<i class="fas fa-bars"></i>16
</button>17
18
<!-- Collapsible wrapper -->19
<div class="collapse navbar-collapse" id="navbarSupportedContent1"> 20
<!-- Navbar brand -->21
<a class="navbar-brand mt-2 mt-sm-0" href="https://mdbootstrap.com/">22
<img23
src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp"24
height="20"25
alt="MDB Logo"26
loading="lazy"27
/>28
</a>29
<!-- Left links -->30
<ul class="navbar-nav me-auto mb-2 mb-lg-0">31
<li class="nav-item active">32
<a class="nav-link " href="https://mdbootstrap.com/">Home</a>33
</li>34
<li class="nav-item">35
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/">About MDB</a>36
</li>37
<li class="nav-item">38
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/getting-started/installation/">Free download</a>39
</li>40
<li class="nav-item">41
<a class="nav-link" href="https://mdbootstrap.com/education/bootstrap/">Free tutorials</a>42
</li>43
</ul>44
<!-- Left links --> 45
</div>46
<!-- Collapsible wrapper -->47
48
<!-- Right elements -->49
<div class="d-flex align-items-center">50
<!-- Icon -->51
<a class="nav-link me-3" href="#">52
<i class="fas fa-shopping-cart"></i>53
<span class="badge rounded-pill badge-notification bg-danger">1</span>54
</a>55
56
<a class="nav-link me-3" href="#">57
<i class="fab fa-facebook-f"></i>58
</a>59
<a class="nav-link me-3" href="#">60
<i class="fab fa-twitter"></i>61
</a>62
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="border rounded px-2 nav-link"63
target="_blank">64
<i class="fab fa-github me-2"></i>MDB GitHub65
</a>66
</div>67
<!-- Right elements -->68
69
</div>70
<!-- Container wrapper -->71
</nav>72
<!-- Navbar -->73
74
<!-- carousel -->75
<div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-mdb-ride="carousel">76
<div class="carousel-indicators">77
<button78
type="button"79
data-mdb-target="#carouselExampleCaptions"80
data-mdb-slide-to="0"81
class="active"82
aria-current="true"83
aria-label="Slide 1"84
></button>85
<button86
type="button"87
data-mdb-target="#carouselExampleCaptions"88
data-mdb-slide-to="1"89
aria-label="Slide 2"90
></button>91
<button92
type="button"93
data-mdb-target="#carouselExampleCaptions"94
data-mdb-slide-to="2"95
aria-label="Slide 3"96
></button>97
</div>98
<div class="carousel-inner">99
<div class="carousel-item active">100
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/8-col/img%282%29.jpg" class="d-block w-100" alt="Wild Landscape"/>101
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)"></div>102
<div class="carousel-caption d-none d-sm-block mb-5">103
<h1 class="mb-4">104
<strong>Learn Bootstrap 5 with MDB</strong>105
</h1>106
107
<p>108
<strong>Best & free guide of responsive web design</strong>109
</p>110
111
<p class="mb-4 d-none d-md-block">112
<strong>The most comprehensive tutorial for the Bootstrap 5. Loved by over 3 000 000 users. Video and written versions113
available. Create your own, stunning website.</strong>114
</p>115
116
<a target="_blank" href="https://mdbootstrap.com/education/bootstrap/" class="btn btn-outline-white btn-lg">Start free tutorial117
<i class="fas fa-graduation-cap ms-2"></i>118
</a>119
</div>120
</div>121
<div class="carousel-item">122
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/8-col/img%283%29.jpg" class="d-block w-100" alt="Camera"/>123
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)"></div>124
<div class="carousel-caption d-none d-md-block mb-5">125
<h1 class="mb-4">126
<strong>Learn Bootstrap 5 with MDB</strong>127
</h1>128
129
<p>130
<strong>Best & free guide of responsive web design</strong>131
</p>132
133
<p class="mb-4 d-none d-md-block">134
<strong>The most comprehensive tutorial for the Bootstrap 5. Loved by over 3 000 000 users. Video and written versions135
available. Create your own, stunning website.</strong>136
</p>137
138
<a target="_blank" href="https://mdbootstrap.com/education/bootstrap/" class="btn btn-outline-white btn-lg">Start free tutorial139
<i class="fas fa-graduation-cap ms-2"></i>140
</a>141
</div>142
</div>143
<div class="carousel-item">144
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/8-col/img%285%29.jpg" class="d-block w-100" alt="Exotic Fruits"/>145
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)"></div>146
<div class="carousel-caption d-none d-md-block mb-5">147
<h1 class="mb-4">148
<strong>Learn Bootstrap 5 with MDB</strong>149
</h1>150
151
<p>152
<strong>Best & free guide of responsive web design</strong>153
</p>154
155
<p class="mb-4 d-none d-md-block">156
<strong>The most comprehensive tutorial for the Bootstrap 5. Loved by over 3 000 000 users. Video and written versions157
available. Create your own, stunning website.</strong>158
</p>159
160
<a target="_blank" href="https://mdbootstrap.com/education/bootstrap/" class="btn btn-outline-white btn-lg">Start free tutorial161
<i class="fas fa-graduation-cap ms-2"></i>162
</a>163
</div>164
</div>165
</div>166
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide="prev">167
<span class="carousel-control-prev-icon" aria-hidden="true"></span>168
<span class="visually-hidden">Previous</span>169
</button>170
<button class="carousel-control-next" type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide="next">171
<span class="carousel-control-next-icon" aria-hidden="true"></span>172
<span class="visually-hidden">Next</span>173
</button>174
</div>175
176
<!--Main layout-->177
<main>178
<div class="container">179
<!-- Navbar -->180
<nav class="navbar navbar-expand-lg navbar-dark mt-3 mb-5 shadow p-2" style="background-color: #607D8B">181
<!-- Container wrapper -->182
<div class="container-fluid">183
184
<!-- Navbar brand -->185
<a class="navbar-brand" href="#">Categories:</a>186
187
<!-- Toggle button -->188
<button 189
class="navbar-toggler" 190
type="button" 191
data-mdb-toggle="collapse" 192
data-mdb-target="#navbarSupportedContent2" 193
aria-controls="navbarSupportedContent2" 194
aria-expanded="false" 195
aria-label="Toggle navigation">196
<i class="fas fa-bars"></i>197
</button>198
199
<!-- Collapsible wrapper -->200
<div class="collapse navbar-collapse" id="navbarSupportedContent2">201
<ul class="navbar-nav me-auto mb-2 mb-lg-0">202
203
<!-- Link -->204
<li class="nav-item acitve">205
<a class="nav-link text-white" href="#">All</a>206
</li>207
<li class="nav-item">208
<a class="nav-link text-white" href="#">Shirts</a>209
</li>210
<li class="nav-item">211
<a class="nav-link text-white" href="#">Sport wears</a>212
</li>213
<li class="nav-item">214
<a class="nav-link text-white" href="#">Outwears</a>215
</li>216
217
</ul>218
219
<!-- Search -->220
<form class="w-auto py-1" style="max-width: 12rem">221
<input type="search" class="form-control rounded-0" placeholder="Search" aria-label="Search">222
</form>223
224
</div>225
</div>226
<!-- Container wrapper -->227
</nav>228
<!-- Navbar -->229
230
<!-- Products -->231
<section>232
<div class="text-center">233
<div class="row">234
235
<div class="col-lg-3 col-md-6 mb-4">236
<div class="card">237
<div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"238
data-mdb-ripple-color="light">239
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"240
class="w-100" />241
<a href="#!">242
<div class="mask">243
<div class="d-flex justify-content-start align-items-end h-100">244
<h5><span class="badge bg-dark ms-2">NEW</span></h5>245
</div>246
</div>247
<div class="hover-overlay">248
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>249
</div>250
</a>251
</div>252
<div class="card-body">253
<a href="" class="text-reset">254
<h5 class="card-title mb-2">Denim shirt</h5>255
</a>256
<a href="" class="text-reset ">257
<p>Shirt</p>258
</a>259
<h6 class="mb-3 price">120$</h6>260
</div>261
</div>262
</div>263
264
<div class="col-lg-3 col-md-6 mb-4">265
<div class="card">266
<div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"267
data-mdb-ripple-color="light">268
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"269
class="w-100" />270
<a href="#!"> 271
<div class="mask">272
<div class="d-flex justify-content-start align-items-end h-100">273
<h5><span class="badge bg-primary ms-2">bestseller</span></h5>274
</div>275
</div>276
<div class="hover-overlay">277
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>278
</div>279
</a>280
</div>281
<div class="card-body">282
<a href="" class="text-reset">283
<h5 class="card-title mb-2">Sweatshirt</h5>284
</a>285
<a href="" class="text-reset ">286
<p>Sport wear</p>287
</a>288
<h6 class="mb-3 price">139$</h6>289
</div>290
</div>291
</div>292
293
<div class="col-lg-3 col-md-6 mb-4">294
<div class="card">295
<div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"296
data-mdb-ripple-color="light">297
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"298
class="w-100" />299
<a href="#!"> 300
<div class="hover-overlay">301
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>302
</div>303
</a>304
</div>305
<div class="card-body">306
<a href="" class="text-reset">307
<h5 class="card-title mb-2">Grey blouse</h5>308
</a>309
<a href="" class="text-reset ">310
<p>Sport wear</p>311
</a>312
<h6 class="mb-3 price">99$</h6>313
</div>314
</div>315
</div>316
317
<div class="col-lg-3 col-md-6 mb-4">318
<div class="card">319
<div class="bg-image hover-zoom ripple" data-mdb-ripple-color="light">320
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"321
class="w-100" />322
<a href="#!">323
<div class="mask">324
<div class="d-flex justify-content-start align-items-end h-100">325
<h5><span class="badge sale-badge ms-2">-10%</span></h5>326
</div>327
</div>328
<div class="hover-overlay">329
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>330
</div>331
</a>332
</div>333
<div class="card-body">334
<a href="" class="text-reset">335
<h5 class="card-title mb-2">Black jacket</h5>336
</a>337
<a href="" class="text-reset ">338
<p>Outwear</p>339
</a>340
<h6 class="mb-3 price">341
<s>199$</s><strong class="ms-2 sale">179$</strong>342
</h6>343
</div>344
</div>345
</div>346
</div>347
348
<div class="row">349
350
<div class="col-lg-3 col-md-6 mb-4">351
<div class="card">352
<div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"353
data-mdb-ripple-color="light">354
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"355
class="w-100" />356
<a href="#!"> 357
<div class="hover-overlay">358
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>359
</div>360
</a>361
</div>362
<div class="card-body">363
<a href="" class="text-reset">364
<h5 class="card-title mb-2">Sweatshirt</h5>365
</a>366
<a href="" class="text-reset ">367
<p>Sport wear</p>368
</a>369
<h6 class="mb-3 price">139$</h6>370
</div>371
</div>372
</div>373
374
<div class="col-lg-3 col-md-6 mb-4">375
<div class="card">376
<div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"377
data-mdb-ripple-color="light">378
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"379
class="w-100" />380
<a href="#!">381
<div class="mask">382
<div class="d-flex justify-content-start align-items-end h-100">383
<h5><span class="badge bg-success ms-2">Eco</span></h5>384
</div>385
</div>386
<div class="hover-overlay">387
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>388
</div>389
</a>390
</div>391
<div class="card-body">392
<a href="" class="text-reset">393
<h5 class="card-title mb-2">Grey blouse</h5>394
</a>395
<a href="" class="text-reset ">396
<p>Sport wear</p>397
</a>398
<h6 class="mb-3 price">99$</h6>399
</div>400
</div>401
</div>402
403
<div class="col-lg-3 col-md-6 mb-4">404
<div class="card">405
<div class="bg-image hover-zoom ripple" data-mdb-ripple-color="light">406
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"407
class="w-100" />408
<a href="#!"> 409
<div class="hover-overlay">410
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>411
</div>412
</a>413
</div>414
<div class="card-body">415
<a href="" class="text-reset">416
<h5 class="card-title mb-2">Black jacket</h5>417
</a>418
<a href="" class="text-reset">419
<p>Outwear</p>420
</a>421
<h6 class="mb-3 price">199$</h6>422
</div>423
</div>424
</div>425
426
<div class="col-lg-3 col-md-6 mb-4">427
<div class="card">428
<div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"429
data-mdb-ripple-color="light">430
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"431
class="w-100" />432
<a href="#!"> 433
<div class="hover-overlay">434
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>435
</div>436
</a>437
</div>438
<div class="card-body">439
<a href="" class="text-reset">440
<h5 class="card-title mb-2">Denim shirt</h5>441
</a>442
<a href="" class="text-reset ">443
<p>Shirt</p>444
</a>445
<h6 class="mb-3 price">120$</h6>446
</div>447
</div>448
</div>449
</div>450
</div>451
</section>452
453
<!-- Pagination -->454
<nav aria-label="Page navigation example" class="d-flex justify-content-center mt-3">455
<ul class="pagination">456
<li class="page-item disabled">457
<a class="page-link" href="#" aria-label="Previous">458
<span aria-hidden="true">«</span>459
</a>460
</li>461
<li class="page-item active"><a class="page-link" href="#">1</a></li>462
<li class="page-item"><a class="page-link" href="#">2</a></li>463
<li class="page-item"><a class="page-link" href="#">3</a></li>464
<li class="page-item"><a class="page-link" href="#">4</a></li>465
<li class="page-item"><a class="page-link" href="#">5</a></li>466
<li class="page-item">467
<a class="page-link" href="#" aria-label="Next">468
<span aria-hidden="true">»</span>469
</a>470
</li>471
</ul>472
</nav> 473
<!-- Pagination --> 474
</div>475
</main>476
<!--Main layout-->477
478
<footer class="text-center text-white mt-4" style="background-color: #607D8B">479
480
<!--Call to action-->481
<div class="pt-4 pb-2">482
<a class="btn btn-outline-white footer-cta mx-2" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank" role="button">Download MDB483
<i class="fas fa-download ms-2"></i>484
</a>485
<a class="btn btn-outline-white footer-cta mx-2" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">Start free tutorial486
<i class="fas fa-graduation-cap ms-2"></i>487
</a>488
</div>489
<!--/.Call to action-->490
491
<hr class="text-dark">492
493
<div class="container">494
<!-- Section: Social media -->495
<section class="mb-3">496
497
<!-- Facebook -->498
<a499
class="btn-link btn-floating btn-lg text-white"500
href="#!"501
role="button"502
data-mdb-ripple-color="dark"503
><i class="fab fa-facebook-f"></i504
></a>505
506
<!-- Twitter -->507
<a508
class="btn-link btn-floating btn-lg text-white"509
href="#!"510
role="button"511
data-mdb-ripple-color="dark"512
><i class="fab fa-twitter"></i513
></a>514
515
<!-- Google -->516
<a517
class="btn-link btn-floating btn-lg text-white"518
href="#!"519
role="button"520
data-mdb-ripple-color="dark"521
><i class="fab fa-google"></i522
></a>523
524
<!-- Instagram -->525
<a526
class="btn-link btn-floating btn-lg text-white"527
href="#!"528
role="button"529
data-mdb-ripple-color="dark"530
><i class="fab fa-instagram"></i531
></a>532
533
<!-- YouTube -->534
<a535
class="btn-link btn-floating btn-lg text-white"536
href="#!"537
role="button"538
data-mdb-ripple-color="dark"539
><i class="fab fa-youtube"></i540
></a>541
<!-- Github -->542
<a543
class="btn-link btn-floating btn-lg text-white"544
href="#!"545
role="button"546
data-mdb-ripple-color="dark"547
><i class="fab fa-github"></i548
></a>549
</section>550
<!-- Section: Social media -->551
</div>552
<!-- Grid container -->553
554
<!-- Copyright -->555
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2); text-color: #E0E0E0">556
© 2022 Copyright:557
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>558
</div>559
<!-- Copyright -->560
</footer>CSS
xxxxxxxxxx1
.carousel-item {2
height: 50vh;3
}4
.card {5
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;6
}7
.footer-cta {8
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;9
}10
.price {11
color: #263238;12
font-size: 24px;13
}14
15
.card-title {16
color:#26323817
}18
19
.sale {20
color: #E5393521
}22
23
.sale-badge {24
background-color: #E5393525
}JS
1
1
Console errors: 0