HTML
xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<!-- Jumbotron -->4
<div class="p-3 text-center bg-white border-bottom">5
<div class="container">6
<div class="row gy-3">7
<!-- Left elements -->8
<div class="col-lg-2 col-sm-4 col-4">9
<a href="https://mdbootstrap.com/" target="_blank" class="float-start">10
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="35" />11
</a>12
</div>13
<!-- Left elements -->14
15
<!-- Center elements -->16
<div class="order-lg-last col-lg-5 col-sm-8 col-8">17
<div class="d-flex float-end">18
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="me-1 border rounded py-1 px-3 nav-link d-flex align-items-center" target="_blank"> <i class="fas fa-user-alt m-1 me-md-2"></i><p class="d-none d-md-block mb-0">Sign in</p> </a>19
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="me-1 border rounded py-1 px-3 nav-link d-flex align-items-center" target="_blank"> <i class="fas fa-heart m-1 me-md-2"></i><p class="d-none d-md-block mb-0">Wishlist</p> </a>20
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="border rounded py-1 px-3 nav-link d-flex align-items-center" target="_blank"> <i class="fas fa-shopping-cart m-1 me-md-2"></i><p class="d-none d-md-block mb-0">My cart</p> </a>21
</div>22
</div>23
<!-- Center elements -->24
25
<!-- Right elements -->26
<div class="col-lg-5 col-md-12 col-12">27
<div class="input-group float-center">28
<div class="form-outline">29
<input type="search" id="form1" class="form-control" />30
<label class="form-label" for="form1">Search</label>31
</div>32
<button type="button" class="btn btn-primary shadow-0">33
<i class="fas fa-search"></i>34
</button>35
</div>36
</div>37
<!-- Right elements -->38
</div>39
</div>40
</div>41
<!-- Jumbotron -->42
43
<!-- Heading -->44
<div class="bg-primary mb-4">45
<div class="container py-4">46
<h3 class="text-white mt-2">Men's wear</h3>47
<!-- Breadcrumb -->48
<nav class="d-flex mb-2">49
<h6 class="mb-0">50
<a href="" class="text-white-50">Home</a>51
<span class="text-white-50 mx-2"> > </span>52
<a href="" class="text-white-50">Library</a>53
<span class="text-white-50 mx-2"> > </span>54
<a href="" class="text-white"><u>Data</u></a>55
</h6>56
</nav>57
<!-- Breadcrumb -->58
</div>59
</div>60
<!-- Heading -->61
</header>62
63
<!-- sidebar + content -->64
<section class="">65
<div class="container">66
<div class="row">67
<!-- sidebar -->68
<div class="col-lg-3">69
<!-- Toggle button -->70
<button71
class="btn btn-outline-secondary mb-3 w-100 d-lg-none"72
type="button"73
data-mdb-toggle="collapse"74
data-mdb-target="#navbarSupportedContent"75
aria-controls="navbarSupportedContent"76
aria-expanded="false"77
aria-label="Toggle navigation"78
>79
<span>Show filter</span>80
</button>81
<!-- Collapsible wrapper -->82
<div class="collapse card d-lg-block mb-5" id="navbarSupportedContent">83
<div class="accordion" id="accordionPanelsStayOpenExample">84
<div class="accordion-item">85
<h2 class="accordion-header" id="headingOne">86
<button87
class="accordion-button text-dark bg-light"88
type="button"89
data-mdb-toggle="collapse"90
data-mdb-target="#panelsStayOpen-collapseOne"91
aria-expanded="true"92
aria-controls="panelsStayOpen-collapseOne"93
>94
Related items95
</button>96
</h2>97
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">98
<div class="accordion-body">99
<ul class="list-unstyled">100
<li><a href="#" class="text-dark">Electronics </a></li>101
<li><a href="#" class="text-dark">Home items </a></li>102
<li><a href="#" class="text-dark">Books, Magazines </a></li>103
<li><a href="#" class="text-dark">Men's clothing </a></li>104
<li><a href="#" class="text-dark">Interiors items </a></li>105
<li><a href="#" class="text-dark">Underwears </a></li>106
<li><a href="#" class="text-dark">Shoes for men </a></li>107
<li><a href="#" class="text-dark">Accessories </a></li>108
</ul>109
</div>110
</div>111
</div>112
<div class="accordion-item">113
<h2 class="accordion-header" id="headingTwo">114
<button115
class="accordion-button text-dark bg-light"116
type="button"117
data-mdb-toggle="collapse"118
data-mdb-target="#panelsStayOpen-collapseTwo"119
aria-expanded="true"120
aria-controls="panelsStayOpen-collapseTwo"121
>122
Brands123
</button>124
</h2>125
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo">126
<div class="accordion-body">127
<div>128
<!-- Checked checkbox -->129
<div class="form-check">130
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked1" checked />131
<label class="form-check-label" for="flexCheckChecked1">Mercedes</label>132
<span class="badge badge-secondary float-end">120</span>133
</div>134
<!-- Checked checkbox -->135
<div class="form-check">136
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked2" checked />137
<label class="form-check-label" for="flexCheckChecked2">Toyota</label>138
<span class="badge badge-secondary float-end">15</span>139
</div>140
<!-- Checked checkbox -->141
<div class="form-check">142
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked3" checked />143
<label class="form-check-label" for="flexCheckChecked3">Mitsubishi</label>144
<span class="badge badge-secondary float-end">35</span>145
</div>146
<!-- Checked checkbox -->147
<div class="form-check">148
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked4" checked />149
<label class="form-check-label" for="flexCheckChecked4">Nissan</label>150
<span class="badge badge-secondary float-end">89</span>151
</div>152
<!-- Default checkbox -->153
<div class="form-check">154
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />155
<label class="form-check-label" for="flexCheckDefault">Honda</label>156
<span class="badge badge-secondary float-end">30</span>157
</div>158
<!-- Default checkbox -->159
<div class="form-check">160
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />161
<label class="form-check-label" for="flexCheckDefault">Suzuki</label>162
<span class="badge badge-secondary float-end">30</span>163
</div>164
</div>165
</div>166
</div>167
</div>168
<div class="accordion-item">169
<h2 class="accordion-header" id="headingThree">170
<button171
class="accordion-button text-dark bg-light"172
type="button"173
data-mdb-toggle="collapse"174
data-mdb-target="#panelsStayOpen-collapseThree"175
aria-expanded="false"176
aria-controls="panelsStayOpen-collapseThree"177
>178
Price179
</button>180
</h2>181
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingThree">182
<div class="accordion-body">183
<div class="range">184
<input type="range" class="form-range" id="customRange1" />185
</div>186
<div class="row mb-3">187
<div class="col-6">188
<p class="mb-0">189
Min190
</p>191
<div class="form-outline">192
<input type="number" id="typeNumber" class="form-control" />193
<label class="form-label" for="typeNumber">$0</label>194
</div>195
</div>196
<div class="col-6">197
<p class="mb-0">198
Max199
</p>200
<div class="form-outline">201
<input type="number" id="typeNumber" class="form-control" />202
<label class="form-label" for="typeNumber">$1,0000</label>203
</div>204
</div>205
</div>206
<button type="button" class="btn btn-white w-100 border border-secondary">apply</button>207
</div>208
</div>209
</div>210
<div class="accordion-item">211
<h2 class="accordion-header" id="headingThree">212
<button213
class="accordion-button text-dark bg-light"214
type="button"215
data-mdb-toggle="collapse"216
data-mdb-target="#panelsStayOpen-collapseFour"217
aria-expanded="false"218
aria-controls="panelsStayOpen-collapseFour"219
>220
Size221
</button>222
</h2>223
<div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse show" aria-labelledby="headingThree">224
<div class="accordion-body">225
<input type="checkbox" class="btn-check border justify-content-center" id="btn-check1" checked autocomplete="off" />226
<label class="btn btn-white mb-1 px-1" style="width: 60px;" for="btn-check1">XS</label>227
<input type="checkbox" class="btn-check border justify-content-center" id="btn-check2" checked autocomplete="off" />228
<label class="btn btn-white mb-1 px-1" style="width: 60px;" for="btn-check2">SM</label>229
<input type="checkbox" class="btn-check border justify-content-center" id="btn-check3" checked autocomplete="off" />230
<label class="btn btn-white mb-1 px-1" style="width: 60px;" for="btn-check3">LG</label>231
<input type="checkbox" class="btn-check border justify-content-center" id="btn-check4" checked autocomplete="off" />232
<label class="btn btn-white mb-1 px-1" style="width: 60px;" for="btn-check4">XXL</label>233
</div>234
</div>235
</div>236
<div class="accordion-item">237
<h2 class="accordion-header" id="headingThree">238
<button239
class="accordion-button text-dark bg-light"240
type="button"241
data-mdb-toggle="collapse"242
data-mdb-target="#panelsStayOpen-collapseFive"243
aria-expanded="false"244
aria-controls="panelsStayOpen-collapseFive"245
>246
Ratings247
</button>248
</h2>249
<div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse show" aria-labelledby="headingThree">250
<div class="accordion-body">251
<!-- Default checkbox -->252
<div class="form-check">253
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked />254
<label class="form-check-label" for="flexCheckDefault">255
<i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i>256
<i class="fas fa-star text-warning"></i>257
</label>258
</div>259
<!-- Default checkbox -->260
<div class="form-check">261
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked />262
<label class="form-check-label" for="flexCheckDefault">263
<i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i>264
<i class="fas fa-star text-secondary"></i>265
</label>266
</div>267
<!-- Default checkbox -->268
<div class="form-check">269
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked />270
<label class="form-check-label" for="flexCheckDefault">271
<i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-secondary"></i>272
<i class="fas fa-star text-secondary"></i>273
</label>274
</div>275
<!-- Default checkbox -->276
<div class="form-check">277
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked />278
<label class="form-check-label" for="flexCheckDefault">279
<i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-secondary"></i><i class="fas fa-star text-secondary"></i>280
<i class="fas fa-star text-secondary"></i>281
</label>282
</div>283
</div>284
</div>285
</div>286
</div>287
</div>288
</div>289
<!-- sidebar -->290
<!-- content -->291
<div class="col-lg-9">292
<header class="d-sm-flex align-items-center border-bottom mb-4 pb-3">293
<strong class="d-block py-2">32 Items found </strong>294
<div class="ms-auto">295
<select class="form-select d-inline-block w-auto border pt-1">296
<option value="0">Best match</option>297
<option value="1">Recommended</option>298
<option value="2">High rated</option>299
<option value="3">Randomly</option>300
</select>301
<div class="btn-group shadow-0 border">302
<a href="#" class="btn btn-light" title="List view">303
<i class="fa fa-bars fa-lg"></i>304
</a>305
<a href="#" class="btn btn-light active" title="Grid view">306
<i class="fa fa-th fa-lg"></i>307
</a>308
</div>309
</div>310
</header>311
312
<div class="row justify-content-center mb-3">313
<div class="col-md-12">314
<div class="card shadow-0 border rounded-3">315
<div class="card-body">316
<div class="row g-0">317
<div class="col-xl-3 col-md-4 d-flex justify-content-center">318
<div class="bg-image hover-zoom ripple rounded ripple-surface me-md-3 mb-3 mb-md-0">319
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/8.webp" class="w-100" />320
<a href="#!">321
<div class="hover-overlay">322
<div class="mask" style="background-color: rgba(253, 253, 253, 0.15);"></div>323
</div>324
</a>325
</div>326
</div>327
<div class="col-xl-6 col-md-5 col-sm-7">328
<h5>Rucksack Backpack Jeans</h5>329
<div class="d-flex flex-row">330
<div class="text-warning mb-1 me-2">331
<i class="fa fa-star"></i>332
<i class="fa fa-star"></i>333
<i class="fa fa-star"></i>334
<i class="fa fa-star"></i>335
<i class="fas fa-star-half-alt"></i>336
<span class="ms-1">337
4.5338
</span>339
</div>340
<span class="text-muted">154 orders</span>341
</div>342
343
<p class="text mb-4 mb-md-0">344
Short description about the product goes here, for ex its features. Lorem ipsum dolor sit amet with hapti you enter into any new area of science, you almost lorem ipsum is great text345
consectetur adipisicing346
</p>347
</div>348
<div class="col-xl-3 col-md-3 col-sm-5">349
<div class="d-flex flex-row align-items-center mb-1">350
<h4 class="mb-1 me-1">$34,50</h4>351
<span class="text-danger"><s>$49.99</s></span>352
</div>353
<h6 class="text-success">Free shipping</h6>354
<div class="mt-4">355
<button class="btn btn-primary shadow-0" type="button">Buy this</button>356
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg px-1"></i></a>357
</div>358
</div>359
</div>360
</div>361
</div>362
</div>363
</div>364
365
<div class="row justify-content-center mb-3">366
<div class="col-md-12">367
<div class="card shadow-0 border rounded-3">368
<div class="card-body">369
<div class="row g-0">370
<div class="col-xl-3 col-md-4 d-flex justify-content-center">371
<div class="bg-image hover-zoom ripple rounded ripple-surface me-md-3 mb-3 mb-md-0">372
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/9.webp" class="w-100" />373
<a href="#!">374
<div class="hover-overlay">375
<div class="mask" style="background-color: rgba(253, 253, 253, 0.15);"></div>376
</div>377
</a>378
</div>379
</div>380
<div class="col-xl-6 col-md-5 col-sm-7">381
<h5>Men's Denim Jeans Shorts</h5>382
<div class="d-flex flex-row">383
<div class="text-warning mb-1 me-2">384
<i class="fa fa-star"></i>385
<i class="fa fa-star"></i>386
<i class="fa fa-star"></i>387
<i class="far fa-star"></i>388
<i class="far fa-star"></i>389
<span class="ms-1">390
3391
</span>392
</div>393
<span class="text-muted">73 orders</span>394
</div>395
396
<p class="text mb-4 mb-md-0">397
Re-engineered Digital Crown with hapti Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut398
labore et dolore magna [...]399
</p>400
</div>401
<div class="col-xl-3 col-md-3 col-sm-5">402
<div class="d-flex flex-row align-items-center mb-1">403
<h4 class="mb-1 me-1">$34,50</h4>404
<span class="text-danger"><s>$49.99</s></span>405
</div>406
<h6 class="text-warning">Paid shipping</h6>407
<div class="mt-4">408
<button class="btn btn-primary shadow-0" type="button">Buy this</button>409
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg px-1"></i></a>410
</div>411
</div>412
</div>413
</div>414
</div>415
</div>416
</div>417
418
<div class="row justify-content-center mb-3">419
<div class="col-md-12">420
<div class="card shadow-0 border rounded-3">421
<div class="card-body">422
<div class="row g-0">423
<div class="col-xl-3 col-md-4 d-flex justify-content-center">424
<div class="bg-image hover-zoom ripple rounded ripple-surface me-md-3 mb-3 mb-md-0">425
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/10.webp" class="w-100" />426
<a href="#!">427
<div class="hover-overlay">428
<div class="mask" style="background-color: rgba(253, 253, 253, 0.15);"></div>429
</div>430
</a>431
</div>432
</div>433
<div class="col-xl-6 col-md-5 col-sm-7">434
<h5>T-shirt for Men Blue Cotton Base</h5>435
<div class="d-flex flex-row">436
<div class="text-warning mb-1 me-2">437
<i class="fa fa-star"></i>438
<i class="fa fa-star"></i>439
<i class="fa fa-star"></i>440
<i class="fas fa-star-half-alt"></i>441
<i class="far fa-star"></i>442
<span class="ms-1">443
3.5444
</span>445
</div>446
<span class="text-muted">910 orders</span>447
</div>448
449
<p class="text mb-4 mb-md-0">450
Short description about the product goes here, for ex its features. Lorem ipsum dolor sit amet with hapti you enter into any new area of science, you almost lorem ipsum is great text451
consectetur adipisicing452
</p>453
</div>454
<div class="col-xl-3 col-md-3 col-sm-5">455
<div class="d-flex flex-row align-items-center mb-1">456
<h4 class="mb-1 me-1">$99,50</h4>457
</div>458
<h6 class="text-success">Free shipping</h6>459
<div class="mt-4">460
<button class="btn btn-primary shadow-0" type="button">Buy this</button>461
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg px-1"></i></a>462
</div>463
</div>464
</div>465
</div>466
</div>467
</div>468
</div>469
470
<div class="row justify-content-center mb-3">471
<div class="col-md-12">472
<div class="card shadow-0 border rounded-3">473
<div class="card-body">474
<div class="row g-0">475
<div class="col-xl-3 col-md-4 d-flex justify-content-center">476
<div class="bg-image hover-zoom ripple rounded ripple-surface me-md-3 mb-3 mb-md-0">477
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/11.webp" class="w-100" />478
<a href="#!">479
<div class="hover-overlay">480
<div class="mask" style="background-color: rgba(253, 253, 253, 0.15);"></div>481
</div>482
</a>483
</div>484
</div>485
<div class="col-xl-6 col-md-5 col-sm-7">486
<h5>Winter Jacket for Men and Women</h5>487
<div class="d-flex flex-row">488
<div class="text-warning mb-1 me-2">489
<i class="fa fa-star"></i>490
<i class="fa fa-star"></i>491
<i class="fa fa-star"></i>492
<i class="fa fa-star"></i>493
<i class="fas fa-star-half-alt"></i>494
<span class="ms-1">495
4.5496
</span>497
</div>498
<span class="text-muted">154 orders</span>499
</div>500
501
<p class="text mb-4 mb-md-0">502
Short description about the product goes here, for ex its features. Lorem ipsum dolor sit amet with hapti you enter into any new area of science, you almost lorem ipsum is great text503
</p>504
</div>505
<div class="col-xl-3 col-md-3 col-sm-5">506
<div class="d-flex flex-row align-items-center mb-1">507
<h4 class="mb-1 me-1">$140</h4>508
<span class="text-danger"><s>$190</s></span>509
</div>510
<h6 class="text-success">Free shipping</h6>511
<div class="mt-4">512
<button class="btn btn-primary shadow-0" type="button">Buy this</button>513
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg px-1"></i></a>514
</div>515
</div>516
</div>517
</div>518
</div>519
</div>520
</div>521
522
<div class="row justify-content-center mb-3">523
<div class="col-md-12">524
<div class="card shadow-0 border rounded-3">525
<div class="card-body">526
<div class="row g-0">527
<div class="col-xl-3 col-md-4 d-flex justify-content-center">528
<div class="bg-image hover-zoom ripple rounded ripple-surface me-md-3 mb-3 mb-md-0">529
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/12.webp" class="w-100" />530
<a href="#!">531
<div class="hover-overlay">532
<div class="mask" style="background-color: rgba(253, 253, 253, 0.15);"></div>533
</div>534
</a>535
</div>536
</div>537
<div class="col-xl-6 col-md-5 col-sm-7">538
<h5>T-shirt for Men Blue Cotton Base</h5>539
<div class="d-flex flex-row">540
<div class="text-warning mb-1 me-2">541
<i class="fa fa-star"></i>542
<i class="fa fa-star"></i>543
<i class="fa fa-star"></i>544
<i class="fa fa-star"></i>545
<i class="fas fa-star-half-alt"></i>546
<span class="ms-1">547
4.5548
</span>549
</div>550
<span class="text-muted">154 orders</span>551
</div>552
553
<p class="text mb-4 mb-md-0">554
Short description about the product goes here, for ex its features. Lorem ipsum dolor sit amet with hapti you enter into any new area of science, you almost lorem ipsum is great text555
</p>556
</div>557
<div class="col-xl-3 col-md-3 col-sm-5">558
<div class="d-flex flex-row align-items-center mb-1">559
<h4 class="mb-1 me-1">$99.50</h4>560
<span class="text-danger"><s>$190</s></span>561
</div>562
<h6 class="text-success">Free shipping</h6>563
<div class="mt-4">564
<button class="btn btn-primary shadow-0" type="button">Buy this</button>565
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg px-1"></i></a>566
</div>567
</div>568
</div>569
</div>570
</div>571
</div>572
</div>573
574
<hr />575
576
<!-- Pagination -->577
<nav aria-label="Page navigation example" class="d-flex justify-content-center mt-3">578
<ul class="pagination">579
<li class="page-item disabled">580
<a class="page-link" href="#" aria-label="Previous">581
<span aria-hidden="true">«</span>582
</a>583
</li>584
<li class="page-item active"><a class="page-link" href="#">1</a></li>585
<li class="page-item"><a class="page-link" href="#">2</a></li>586
<li class="page-item"><a class="page-link" href="#">3</a></li>587
<li class="page-item"><a class="page-link" href="#">4</a></li>588
<li class="page-item"><a class="page-link" href="#">5</a></li>589
<li class="page-item">590
<a class="page-link" href="#" aria-label="Next">591
<span aria-hidden="true">»</span>592
</a>593
</li>594
</ul>595
</nav>596
<!-- Pagination -->597
</div>598
</div>599
</div>600
</section>601
<!-- Footer -->602
<footer class="text-center text-lg-start text-muted bg-primary mt-3">603
<!-- Section: Links -->604
<section class="">605
<div class="container text-center text-md-start pt-4 pb-4">606
<!-- Grid row -->607
<div class="row mt-3">608
<!-- Grid column -->609
<div class="col-12 col-lg-3 col-sm-12 mb-2">610
<!-- Content -->611
<ahref="https://mdbootstrap.com/" target="_blank" class="text-white h2">612
MDB613
</ahref=>614
<p class="mt-1 text-white">615
© 2023 Copyright: MDBootstrap.com616
</p>617
</div>618
<!-- Grid column -->619
620
<!-- Grid column -->621
<div class="col-6 col-sm-4 col-lg-2">622
<!-- Links -->623
<h6 class="text-uppercase text-white fw-bold mb-2">624
Store625
</h6>626
<ul class="list-unstyled mb-4">627
<li><a class="text-white-50" href="#">About us</a></li>628
<li><a class="text-white-50" href="#">Find store</a></li>629
<li><a class="text-white-50" href="#">Categories</a></li>630
<li><a class="text-white-50" href="#">Blogs</a></li>631
</ul>632
</div>633
<!-- Grid column -->634
635
<!-- Grid column -->636
<div class="col-6 col-sm-4 col-lg-2">637
<!-- Links -->638
<h6 class="text-uppercase text-white fw-bold mb-2">639
Information640
</h6>641
<ul class="list-unstyled mb-4">642
<li><a class="text-white-50" href="#">Help center</a></li>643
<li><a class="text-white-50" href="#">Money refund</a></li>644
<li><a class="text-white-50" href="#">Shipping info</a></li>645
<li><a class="text-white-50" href="#">Refunds</a></li>646
</ul>647
</div>648
<!-- Grid column -->649
650
<!-- Grid column -->651
<div class="col-6 col-sm-4 col-lg-2">652
<!-- Links -->653
<h6 class="text-uppercase text-white fw-bold mb-2">654
Support655
</h6>656
<ul class="list-unstyled mb-4">657
<li><a class="text-white-50" href="#">Help center</a></li>658
<li><a class="text-white-50" href="#">Documents</a></li>659
<li><a class="text-white-50" href="#">Account restore</a></li>660
<li><a class="text-white-50" href="#">My orders</a></li>661
</ul>662
</div>663
<!-- Grid column -->664
665
<!-- Grid column -->666
<div class="col-12 col-sm-12 col-lg-3">667
<!-- Links -->668
<h6 class="text-uppercase text-white fw-bold mb-2">Newsletter</h6>669
<p class="text-white">Stay in touch with latest updates about our products and offers</p>670
<div class="input-group mb-3">671
<input type="email" class="form-control border" placeholder="Email" aria-label="Email" aria-describedby="button-addon2" />672
<button class="btn btn-light border shadow-0" type="button" id="button-addon2" data-mdb-ripple-color="dark">673
Join674
</button>675
</div>676
</div>677
<!-- Grid column -->678
</div>679
<!-- Grid row -->680
</div>681
</section>682
<!-- Section: Links -->683
684
<div class="">685
<div class="container">686
<div class="d-flex justify-content-between py-4 border-top">687
<!--- payment --->688
<div>689
<i class="fab fa-lg fa-cc-visa text-white"></i>690
<i class="fab fa-lg fa-cc-amex text-white"></i>691
<i class="fab fa-lg fa-cc-mastercard text-white"></i>692
<i class="fab fa-lg fa-cc-paypal text-white"></i>693
</div>694
<!--- payment --->695
696
<!--- language selector --->697
<div class="dropdown dropup">698
<a class="dropdown-toggle text-white" href="#" id="Dropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false"> <i class="flag-united-kingdom flag m-0 me-1"></i>English </a>699
700
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="Dropdown">701
<li>702
<a class="dropdown-item" href="#"><i class="flag-united-kingdom flag"></i>English <i class="fa fa-check text-success ms-2"></i></a>703
</li>704
<li><hr class="dropdown-divider" /></li>705
<li>706
<a class="dropdown-item" href="#"><i class="flag-poland flag"></i>Polski</a>707
</li>708
<li>709
<a class="dropdown-item" href="#"><i class="flag-china flag"></i>中文</a>710
</li>711
<li>712
<a class="dropdown-item" href="#"><i class="flag-japan flag"></i>日本語</a>713
</li>714
<li>715
<a class="dropdown-item" href="#"><i class="flag-germany flag"></i>Deutsch</a>716
</li>717
<li>718
<a class="dropdown-item" href="#"><i class="flag-france flag"></i>Français</a>719
</li>720
<li>721
<a class="dropdown-item" href="#"><i class="flag-spain flag"></i>Español</a>722
</li>723
<li>724
<a class="dropdown-item" href="#"><i class="flag-russia flag"></i>Русский</a>725
</li>726
<li>727
<a class="dropdown-item" href="#"><i class="flag-portugal flag"></i>Português</a>728
</li>729
</ul>730
</div>731
<!--- language selector --->732
</div>733
</div>734
</div>735
</footer>736
<!-- Footer -->CSS
xxxxxxxxxx1
.icon-hover:hover {2
border-color: #3b71ca !important;3
background-color: white !important;4
}5
6
.icon-hover:hover i {7
color: #3b71ca !important;8
}JS
1
1
Console errors: 0