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
<!-- Navbar -->44
<nav class="navbar navbar-expand-lg navbar-light bg-white">45
<!-- Container wrapper -->46
<div class="container justify-content-center justify-content-md-between">47
<!-- Toggle button -->48
<button49
class="navbar-toggler border py-2 text-dark"50
type="button"51
data-mdb-toggle="collapse"52
data-mdb-target="#navbarLeftAlignExample"53
aria-controls="navbarLeftAlignExample"54
aria-expanded="false"55
aria-label="Toggle navigation"56
>57
<i class="fas fa-bars"></i>58
</button>59
60
<!-- Collapsible wrapper -->61
<div class="collapse navbar-collapse" id="navbarLeftAlignExample">62
<!-- Left links -->63
<ul class="navbar-nav me-auto mb-2 mb-lg-0">64
<li class="nav-item">65
<a class="nav-link text-dark" aria-current="page" href="#">Home</a>66
</li>67
<li class="nav-item">68
<a class="nav-link text-dark" href="#">Categories</a>69
</li>70
<li class="nav-item">71
<a class="nav-link text-dark" href="#">Hot offers</a>72
</li>73
<li class="nav-item">74
<a class="nav-link text-dark" href="#">Gift boxes</a>75
</li>76
<li class="nav-item">77
<a class="nav-link text-dark" href="#">Projects</a>78
</li>79
<li class="nav-item">80
<a class="nav-link text-dark" href="#">Menu item</a>81
</li>82
<li class="nav-item">83
<a class="nav-link text-dark" href="#">Menu name</a>84
</li>85
<!-- Navbar dropdown -->86
<li class="nav-item dropdown">87
<a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false">88
Others89
</a>90
<!-- Dropdown menu -->91
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">92
<li>93
<a class="dropdown-item" href="#">Action</a>94
</li>95
<li>96
<a class="dropdown-item" href="#">Another action</a>97
</li>98
<li><hr class="dropdown-divider" /></li>99
<li>100
<a class="dropdown-item" href="#">Something else here</a>101
</li>102
</ul>103
</li>104
</ul>105
<!-- Left links -->106
</div>107
</div>108
<!-- Container wrapper -->109
</nav>110
<!-- Navbar -->111
<!-- Jumbotron -->112
<div class="bg-primary text-white py-5">113
<div class="container py-5">114
<h1>115
Best products & <br />116
brands in our store117
</h1>118
<p>119
Trendy Products, Factory Prices, Excellent Service120
</p>121
<button type="button" class="btn btn-outline-light">122
Learn more123
</button>124
<button type="button" class="btn btn-light shadow-0 text-primary pt-2 border border-white">125
<span class="pt-1">Purchase now</span>126
</button>127
</div>128
</div>129
<!-- Jumbotron -->130
</header>131
<!-- Products -->132
<section>133
<div class="container my-5">134
<header class="mb-4">135
<h3>New products</h3>136
</header>137
138
<div class="row">139
<div class="col-lg-3 col-md-6 col-sm-6 d-flex">140
<div class="card w-100 my-2 shadow-2-strong">141
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/1.webp" class="card-img-top" style="aspect-ratio: 1 / 1" />142
<div class="card-body d-flex flex-column">143
<h5 class="card-title">GoPro HERO6 4K Action Camera - Black</h5>144
<p class="card-text">$790.50</p>145
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">146
<a href="#!" class="btn btn-primary shadow-0 me-1">Add to cart</a>147
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg text-secondary px-1"></i></a>148
</div>149
</div>150
</div>151
</div>152
<div class="col-lg-3 col-md-6 col-sm-6 d-flex">153
<div class="card w-100 my-2 shadow-2-strong">154
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/2.webp" class="card-img-top" style="aspect-ratio: 1 / 1" />155
<div class="card-body d-flex flex-column">156
<h5 class="card-title">Canon camera 20x zoom, Black color EOS 2000</h5>157
<p class="card-text">$320.00</p>158
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">159
<a href="#!" class="btn btn-primary shadow-0 me-1">Add to cart</a>160
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg text-secondary px-1"></i></a>161
</div>162
</div>163
</div>164
</div>165
<div class="col-lg-3 col-md-6 col-sm-6 d-flex">166
<div class="card w-100 my-2 shadow-2-strong">167
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/3.webp" class="card-img-top" style="aspect-ratio: 1 / 1" />168
<div class="card-body d-flex flex-column">169
<h5 class="card-title">Xiaomi Redmi 8 Original Global Version 4GB</h5>170
<p class="card-text">$120.00</p>171
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">172
<a href="#!" class="btn btn-primary shadow-0 me-1">Add to cart</a>173
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg text-secondary px-1"></i></a>174
</div>175
</div>176
</div>177
</div>178
<div class="col-lg-3 col-md-6 col-sm-6 d-flex">179
<div class="card w-100 my-2 shadow-2-strong">180
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/4.webp" class="card-img-top" style="aspect-ratio: 1 / 1" />181
<div class="card-body d-flex flex-column">182
<h5 class="card-title">Apple iPhone 12 Pro 6.1" RAM 6GB 512GB Unlocked</h5>183
<p class="card-text">$120.00</p>184
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">185
<a href="#!" class="btn btn-primary shadow-0 me-1">Add to cart</a>186
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg text-secondary px-1"></i></a>187
</div>188
</div>189
</div>190
</div>191
<div class="col-lg-3 col-md-6 col-sm-6 d-flex">192
<div class="card w-100 my-2 shadow-2-strong">193
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/5.webp" class="card-img-top" style="aspect-ratio: 1 / 1" />194
<div class="card-body d-flex flex-column">195
<h5 class="card-title">Apple Watch Series 1 Sport Case 38mm Black</h5>196
<p class="card-text">$790.50</p>197
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">198
<a href="#!" class="btn btn-primary shadow-0 me-1">Add to cart</a>199
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg text-secondary px-1"></i></a>200
</div>201
</div>202
</div>203
</div>204
<div class="col-lg-3 col-md-6 col-sm-6 d-flex">205
<div class="card w-100 my-2 shadow-2-strong">206
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/6.webp" class="card-img-top" style="aspect-ratio: 1 / 1" />207
<div class="card-body d-flex flex-column">208
<h5 class="card-title">T-shirts with multiple colors, for men and lady</h5>209
<p class="card-text">$120.00</p>210
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">211
<a href="#!" class="btn btn-primary shadow-0 me-1">Add to cart</a>212
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg text-secondary px-1"></i></a>213
</div>214
</div>215
</div>216
</div>217
<div class="col-lg-3 col-md-6 col-sm-6 d-flex">218
<div class="card w-100 my-2 shadow-2-strong">219
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/7.webp" class="card-img-top" style="aspect-ratio: 1 / 1" />220
<div class="card-body d-flex flex-column">221
<h5 class="card-title">Gaming Headset 32db Blackbuilt in mic</h5>222
<p class="card-text">$99.50</p>223
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">224
<a href="#!" class="btn btn-primary shadow-0 me-1">Add to cart</a>225
<a href="#!" class="btn btn-light border icon-hover px-2 pt-2"><i class="fas fa-heart fa-lg text-secondary px-1"></i></a>226
</div>227
</div>228
</div>229
</div>230
<div class="col-lg-3 col-md-6 col-sm-6 d-flex">231
<div class="card w-100 my-2 shadow-2-strong">232
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/8.webp" class="card-img-top" style="aspect-ratio: 1 / 1" />233
<div class="card-body d-flex flex-column">234
<h5 class="card-title">T-shirts with multiple colors, for men and lady</h5>235
<p class="card-text">$120.00</p>236
<div class="card-footer d-flex align-items-end pt-3 px-0 pb-0 mt-auto">237
<a href="#!" class="btn btn-primary shadow-0 me-1">Add to cart</a>238
<a href="#!" class="btn btn-light border px-2 pt-2 icon-hover"><i class="fas fa-heart fa-lg text-secondary px-1"></i></a>239
</div>240
</div>241
</div>242
</div>243
</div>244
</div>245
</section>246
<!-- Products -->247
248
<!-- Feature -->249
<section class="mt-5" style="background-color: #f5f5f5;">250
<div class="container text-dark pt-3">251
<header class="pt-4 pb-3">252
<h3>Why choose us</h3>253
</header>254
255
<div class="row mb-4">256
<div class="col-lg-4 col-md-6">257
<figure class="d-flex align-items-center mb-4">258
<span class="rounded-circle bg-white p-3 d-flex me-2 mb-2">259
<i class="fas fa-camera-retro fa-2x fa-fw text-primary floating"></i>260
</span>261
<figcaption class="info">262
<h6 class="title">Reasonable prices</h6>263
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmor</p>264
</figcaption>265
</figure>266
<!-- itemside // -->267
</div>268
<!-- col // -->269
<div class="col-lg-4 col-md-6">270
<figure class="d-flex align-items-center mb-4">271
<span class="rounded-circle bg-white p-3 d-flex me-2 mb-2">272
<i class="fas fa-star fa-2x fa-fw text-primary floating"></i>273
</span>274
<figcaption class="info">275
<h6 class="title">Best quality</h6>276
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmor</p>277
</figcaption>278
</figure>279
<!-- itemside // -->280
</div>281
<!-- col // -->282
<div class="col-lg-4 col-md-6">283
<figure class="d-flex align-items-center mb-4">284
<span class="rounded-circle bg-white p-3 d-flex me-2 mb-2">285
<i class="fas fa-plane fa-2x fa-fw text-primary floating"></i>286
</span>287
<figcaption class="info">288
<h6 class="title">Worldwide shipping</h6>289
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmor</p>290
</figcaption>291
</figure>292
<!-- itemside // -->293
</div>294
<!-- col // -->295
<div class="col-lg-4 col-md-6">296
<figure class="d-flex align-items-center mb-4">297
<span class="rounded-circle bg-white p-3 d-flex me-2 mb-2">298
<i class="fas fa-users fa-2x fa-fw text-primary floating"></i>299
</span>300
<figcaption class="info">301
<h6 class="title">Customer satisfaction</h6>302
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmor</p>303
</figcaption>304
</figure>305
<!-- itemside // -->306
</div>307
<!-- col // -->308
<div class="col-lg-4 col-md-6">309
<figure class="d-flex align-items-center mb-4">310
<span class="rounded-circle bg-white p-3 d-flex me-2 mb-2">311
<i class="fas fa-thumbs-up fa-2x fa-fw text-primary floating"></i>312
</span>313
<figcaption class="info">314
<h6 class="title">Happy customers</h6>315
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmor</p>316
</figcaption>317
</figure>318
<!-- itemside // -->319
</div>320
<!-- col // -->321
<div class="col-lg-4 col-md-6">322
<figure class="d-flex align-items-center mb-4">323
<span class="rounded-circle bg-white p-3 d-flex me-2 mb-2">324
<i class="fas fa-box fa-2x fa-fw text-primary floating"></i>325
</span>326
<figcaption class="info">327
<h6 class="title">Thousand items</h6>328
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmor</p>329
</figcaption>330
</figure>331
<!-- itemside // -->332
</div>333
<!-- col // -->334
</div>335
</div>336
<!-- container end.// -->337
</section>338
<!-- Feature -->339
340
<!-- Blog -->341
<section class="mt-5 mb-4">342
<div class="container text-dark">343
<header class="mb-4">344
<h3>Blog posts</h3>345
</header>346
347
<div class="row">348
<div class="col-lg-3 col-md-6 col-sm-6 col-12">349
<article>350
<a href="#" class="img-fluid">351
<img class="rounded w-100" src="https://mdbootstrap.com/img/bootstrap-ecommerce/posts/1.webp" style="object-fit: cover;" height="160" />352
</a>353
<div class="mt-2 text-muted small d-block mb-1">354
<span>355
<i class="fa fa-calendar-alt fa-sm"></i>356
23.12.2022357
</span>358
<a href="#"><h6 class="text-dark">How to promote brands</h6></a>359
<p>When you enter into any new area of science, you almost reach</p>360
</div>361
</article>362
</div>363
<!-- col.// -->364
<div class="col-lg-3 col-md-6 col-sm-6 col-12">365
<article>366
<a href="#" class="img-fluid">367
<img class="rounded w-100" src="https://mdbootstrap.com/img/bootstrap-ecommerce/posts/2.webp" style="object-fit: cover;" height="160" />368
</a>369
<div class="mt-2 text-muted small d-block mb-1">370
<span>371
<i class="fa fa-calendar-alt fa-sm"></i>372
13.12.2022373
</span>374
<a href="#"><h6 class="text-dark">How we handle shipping</h6></a>375
<p>When you enter into any new area of science, you almost reach</p>376
</div>377
</article>378
</div>379
<!-- col.// -->380
<div class="col-lg-3 col-md-6 col-sm-6 col-12">381
<article>382
<a href="#" class="img-fluid">383
<img class="rounded w-100" src="https://mdbootstrap.com/img/bootstrap-ecommerce/posts/3.webp" style="object-fit: cover;" height="160" />384
</a>385
<div class="mt-2 text-muted small d-block mb-1">386
<span>387
<i class="fa fa-calendar-alt fa-sm"></i>388
25.11.2022389
</span>390
<a href="#"><h6 class="text-dark">How to promote brands</h6></a>391
<p>When you enter into any new area of science, you almost reach</p>392
</div>393
</article>394
</div>395
<!-- col.// -->396
<div class="col-lg-3 col-md-6 col-sm-6 col-12">397
<article>398
<a href="#" class="img-fluid">399
<img class="rounded w-100" src="https://mdbootstrap.com/img/bootstrap-ecommerce/posts/4.webp" style="object-fit: cover;" height="160" />400
</a>401
<div class="mt-2 text-muted small d-block mb-1">402
<span>403
<i class="fa fa-calendar-alt fa-sm"></i>404
03.09.2022405
</span>406
<a href="#"><h6 class="text-dark">Success story of sellers</h6></a>407
<p>When you enter into any new area of science, you almost reach</p>408
</div>409
</article>410
</div>411
</div>412
</div>413
</section>414
<!-- Blog -->415
416
<!-- Footer -->417
<footer class="text-center text-lg-start text-muted mt-3" style="background-color: #f5f5f5;">418
<!-- Section: Links -->419
<section class="">420
<div class="container text-center text-md-start pt-4 pb-4">421
<!-- Grid row -->422
<div class="row mt-3">423
<!-- Grid column -->424
<div class="col-12 col-lg-3 col-sm-12 mb-2">425
<!-- Content -->426
<a href="https://mdbootstrap.com/" target="_blank" class="">427
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="35" />428
</a>429
<p class="mt-2 text-dark">430
© 2023 Copyright: MDBootstrap.com431
</p>432
</div>433
<!-- Grid column -->434
435
<!-- Grid column -->436
<div class="col-6 col-sm-4 col-lg-2">437
<!-- Links -->438
<h6 class="text-uppercase text-dark fw-bold mb-2">439
Store440
</h6>441
<ul class="list-unstyled mb-4">442
<li><a class="text-muted" href="#">About us</a></li>443
<li><a class="text-muted" href="#">Find store</a></li>444
<li><a class="text-muted" href="#">Categories</a></li>445
<li><a class="text-muted" href="#">Blogs</a></li>446
</ul>447
</div>448
<!-- Grid column -->449
450
<!-- Grid column -->451
<div class="col-6 col-sm-4 col-lg-2">452
<!-- Links -->453
<h6 class="text-uppercase text-dark fw-bold mb-2">454
Information455
</h6>456
<ul class="list-unstyled mb-4">457
<li><a class="text-muted" href="#">Help center</a></li>458
<li><a class="text-muted" href="#">Money refund</a></li>459
<li><a class="text-muted" href="#">Shipping info</a></li>460
<li><a class="text-muted" href="#">Refunds</a></li>461
</ul>462
</div>463
<!-- Grid column -->464
465
<!-- Grid column -->466
<div class="col-6 col-sm-4 col-lg-2">467
<!-- Links -->468
<h6 class="text-uppercase text-dark fw-bold mb-2">469
Support470
</h6>471
<ul class="list-unstyled mb-4">472
<li><a class="text-muted" href="#">Help center</a></li>473
<li><a class="text-muted" href="#">Documents</a></li>474
<li><a class="text-muted" href="#">Account restore</a></li>475
<li><a class="text-muted" href="#">My orders</a></li>476
</ul>477
</div>478
<!-- Grid column -->479
480
<!-- Grid column -->481
<div class="col-12 col-sm-12 col-lg-3">482
<!-- Links -->483
<h6 class="text-uppercase text-dark fw-bold mb-2">Newsletter</h6>484
<p class="text-muted">Stay in touch with latest updates about our products and offers</p>485
<div class="input-group mb-3">486
<input type="email" class="form-control border" placeholder="Email" aria-label="Email" aria-describedby="button-addon2" />487
<button class="btn btn-light border shadow-0" type="button" id="button-addon2" data-mdb-ripple-color="dark">488
Join489
</button>490
</div>491
</div>492
<!-- Grid column -->493
</div>494
<!-- Grid row -->495
</div>496
</section>497
<!-- Section: Links -->498
499
<div class="">500
<div class="container">501
<div class="d-flex justify-content-between py-4 border-top">502
<!--- payment --->503
<div>504
<i class="fab fa-lg fa-cc-visa text-dark"></i>505
<i class="fab fa-lg fa-cc-amex text-dark"></i>506
<i class="fab fa-lg fa-cc-mastercard text-dark"></i>507
<i class="fab fa-lg fa-cc-paypal text-dark"></i>508
</div>509
<!--- payment --->510
511
<!--- language selector --->512
<div class="dropdown dropup">513
<a class="dropdown-toggle text-dark" 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>514
515
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="Dropdown">516
<li>517
<a class="dropdown-item" href="#"><i class="flag-united-kingdom flag"></i>English <i class="fa fa-check text-success ms-2"></i></a>518
</li>519
<li><hr class="dropdown-divider" /></li>520
<li>521
<a class="dropdown-item" href="#"><i class="flag-poland flag"></i>Polski</a>522
</li>523
<li>524
<a class="dropdown-item" href="#"><i class="flag-china flag"></i>中文</a>525
</li>526
<li>527
<a class="dropdown-item" href="#"><i class="flag-japan flag"></i>日本語</a>528
</li>529
<li>530
<a class="dropdown-item" href="#"><i class="flag-germany flag"></i>Deutsch</a>531
</li>532
<li>533
<a class="dropdown-item" href="#"><i class="flag-france flag"></i>Français</a>534
</li>535
<li>536
<a class="dropdown-item" href="#"><i class="flag-spain flag"></i>Español</a>537
</li>538
<li>539
<a class="dropdown-item" href="#"><i class="flag-russia flag"></i>Русский</a>540
</li>541
<li>542
<a class="dropdown-item" href="#"><i class="flag-portugal flag"></i>Português</a>543
</li>544
</ul>545
</div>546
<!--- language selector --->547
</div>548
</div>549
</div>550
</footer>551
<!-- Footer -->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
}1
1
Console errors: 0