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-dark bg-primary">45
<!-- Container wrapper -->46
<div class="container justify-content-center justify-content-md-between">47
<!-- Toggle button -->48
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarLeftAlignExample" aria-controls="navbarLeftAlignExample" aria-expanded="false" aria-label="Toggle navigation">49
<i class="fas fa-bars"></i>50
</button>51
52
<!-- Collapsible wrapper -->53
<div class="collapse navbar-collapse" id="navbarLeftAlignExample">54
<!-- Left links -->55
<ul class="navbar-nav me-auto mb-2 mb-lg-0">56
<li class="nav-item">57
<a class="nav-link" href="#">Categories</a>58
</li>59
<li class="nav-item">60
<a class="nav-link" href="#">Hot offers</a>61
</li>62
<li class="nav-item">63
<a class="nav-link" href="#">Gift boxes</a>64
</li>65
<li class="nav-item">66
<a class="nav-link" href="#">Projects</a>67
</li>68
<li class="nav-item">69
<a class="nav-link" href="#">Menu item</a>70
</li>71
<li class="nav-item">72
<a class="nav-link" href="#">Menu name</a>73
</li>74
<!-- Navbar dropdown -->75
<li class="nav-item dropdown">76
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false">77
Others78
</a>79
<!-- Dropdown menu -->80
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">81
<li>82
<a class="dropdown-item" href="#">Action</a>83
</li>84
<li>85
<a class="dropdown-item" href="#">Another action</a>86
</li>87
<li><hr class="dropdown-divider" /></li>88
<li>89
<a class="dropdown-item" href="#">Something else here</a>90
</li>91
</ul>92
</li>93
</ul>94
<!-- Left links -->95
</div>96
</div>97
<!-- Container wrapper -->98
</nav>99
<!-- Navbar -->100
</header>101
102
<!-- intro -->103
<section class="mt-3">104
<div class="container">105
<main class="card p-3 shadow-2-strong">106
<div class="row">107
<div class="col-lg-3">108
<nav class="nav flex-column nav-pills mb-md-2">109
<a class="nav-link active py-2 ps-3 my-0" aria-current="page" href="#">Electronics</a>110
<a class="nav-link my-0 py-2 ps-3 bg-white" href="#">Clothes and wear</a>111
<a class="nav-link my-0 py-2 ps-3 bg-white" href="#">Home interiors</a>112
<a class="nav-link my-0 py-2 ps-3 bg-white" href="#">Computer and tech</a>113
<a class="nav-link my-0 py-2 ps-3 bg-white" href="#">Tools, equipments</a>114
<a class="nav-link my-0 py-2 ps-3 bg-white" href="#">Sports and outdoor</a>115
<a class="nav-link my-0 py-2 ps-3 bg-white" href="#">Animal and pets</a>116
<a class="nav-link my-0 py-2 ps-3 bg-white" href="#">Machinery tools</a>117
<a class="nav-link my-0 py-2 ps-3 bg-white" href="#">Other products</a>118
</nav>119
</div>120
<div class="col-lg-9">121
<div class="card-banner h-auto p-5 bg-primary rounded-5" style="height: 350px;">122
<div>123
<h2 class="text-white">124
Great products with <br />125
best deals126
</h2>127
<p class="text-white">No matter how far along you are in your sophistication as an amateur astronomer, there is always one.</p>128
<a href="#" class="btn btn-light shadow-0 text-primary"> View more </a>129
</div>130
</div>131
</div>132
</div>133
</main>134
</div>135
<!-- container end.// -->136
</section>137
<!-- intro -->138
139
<!-- Products -->140
<section>141
<div class="container my-5">142
<header class="mb-4">143
<h3>New products</h3>144
</header>145
146
<div class="row">147
<div class="col-lg-3 col-md-6 col-sm-6">148
<div class="card my-2 shadow-0">149
<a href="#" class="img-wrap">150
<div class="mask" style="height: 50px;">151
<div class="d-flex justify-content-start align-items-start h-100 m-2">152
<h6><span class="badge bg-success pt-2">Offer</span></h6>153
</div>154
</div>155
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/12.webp" class="card-img-top" style="aspect-ratio: 1 / 1"> 156
</a>157
<div class="card-body p-0 pt-3">158
<a href="#!" class="btn btn-light border px-2 pt-2 float-end icon-hover"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>159
<h5 class="card-title">$29.95</h5>160
<p class="card-text mb-0">GoPro action camera 4K</p>161
<p class="text-muted">162
Model: X-200163
</p>164
</div>165
</div>166
</div>167
<div class="col-lg-3 col-md-6 col-sm-6">168
<div class="card my-2 shadow-0">169
<a href="#" class="img-wrap"> 170
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/11.webp" class="card-img-top" style="aspect-ratio: 1 / 1"> 171
</a>172
<div class="card-body p-0 pt-2">173
<a href="#!" class="btn btn-light border px-2 pt-2 float-end icon-hover"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>174
<h5 class="card-title">$590.00</h5>175
<p class="card-text mb-0">Canon EOS professional</p>176
<p class="text-muted">177
Capacity: 128GB178
</p>179
</div>180
</div>181
</div>182
<div class="col-lg-3 col-md-6 col-sm-6">183
<div class="card my-2 shadow-0">184
<a href="#" class="img-wrap"> 185
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/10.webp" class="card-img-top" style="aspect-ratio: 1 / 1"> 186
</a>187
<div class="card-body p-0 pt-2">188
<a href="#!" class="btn btn-light border px-2 pt-2 float-end icon-hover"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>189
<h5 class="card-title">$29.95</h5>190
<p class="card-text mb-0">Modern product name here</p>191
<p class="text-muted">192
Sizes: S, M, XL193
</p>194
</div>195
</div>196
</div>197
<div class="col-lg-3 col-md-6 col-sm-6">198
<div class="card my-2 shadow-0">199
<a href="#" class="img-wrap"> 200
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/9.webp" class="card-img-top" style="aspect-ratio: 1 / 1"> 201
</a>202
<div class="card-body p-0 pt-2">203
<a href="#!" class="btn btn-light border px-2 pt-2 float-end icon-hover"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>204
<h5 class="card-title">$1099.00</h5>205
<p class="card-text mb-0">Apple iPhone 13 Pro max</p>206
<p class="text-muted">207
Color: Black, Memory: 128GB208
</p>209
</div>210
</div>211
</div>212
<div class="col-lg-3 col-md-6 col-sm-6">213
<div class="card my-2 shadow-0">214
<a href="#" class="img-wrap"> 215
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/5.webp" class="card-img-top" style="aspect-ratio: 1 / 1"> 216
</a>217
<div class="card-body p-0 pt-2">218
<a href="#!" class="btn btn-light border px-2 pt-2 float-end icon-hover"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>219
<h5 class="card-title">$29.95</h5>220
<p class="card-text mb-0">Modern product name here</p>221
<p class="text-muted">222
Sizes: S, M, XL223
</p>224
</div>225
</div>226
</div>227
<div class="col-lg-3 col-md-6 col-sm-6">228
<div class="card my-2 shadow-0">229
<a href="#" class="img-wrap"> 230
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/6.webp" class="card-img-top" style="aspect-ratio: 1 / 1"> 231
</a>232
<div class="card-body p-0 pt-2">233
<a href="#!" class="btn btn-light border px-2 pt-2 float-end icon-hover"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>234
<h5 class="card-title">$29.95</h5>235
<p class="card-text mb-0">Modern product name here</p>236
<p class="text-muted">237
Model: X-200238
</p>239
</div>240
</div>241
</div>242
<div class="col-lg-3 col-md-6 col-sm-6">243
<div class="card my-2 shadow-0">244
<a href="#" class="img-wrap"> 245
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/7.webp" class="card-img-top" style="aspect-ratio: 1 / 1"> 246
</a>247
<div class="card-body p-0 pt-2">248
<a href="#!" class="btn btn-light border px-2 pt-2 float-end icon-hover"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>249
<h5 class="card-title">$29.95</h5>250
<p class="card-text mb-0">Modern product name here</p>251
<p class="text-muted">252
Sizes: S, M, XL253
</p>254
</div>255
</div>256
</div>257
<div class="col-lg-3 col-md-6 col-sm-6">258
<div class="card my-2 shadow-0">259
<a href="#" class="img-wrap"> 260
<img src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/8.webp" class="card-img-top" style="aspect-ratio: 1 / 1"> 261
</a>262
<div class="card-body p-0 pt-2">263
<a href="#!" class="btn btn-light border px-2 pt-2 float-end icon-hover"><i class="fas fa-heart fa-lg px-1 text-secondary"></i></a>264
<h5 class="card-title">$29.95</h5>265
<p class="card-text mb-0">Modern product name here</p>266
<p class="text-muted">267
Material: Jeans268
</p>269
</div>270
</div>271
</div>272
</div>273
</div>274
</section>275
<!-- Products -->276
277
<!-- Feature -->278
<section class="">279
<div class="container">280
<div class="row gy-4">281
<div class="col-lg-6">282
<div class="card-banner bg-gray h-100" style="283
min-height: 200px;284
background-size: cover;285
background-position: center;286
width: 100%;287
background-repeat: no-repeat;288
top: 50%;289
background-image: url('https://mdbootstrap.com/img/bootstrap-ecommerce/banners/banner-item2.webp');">290
<div class="p-3 p-lg-5" style="max-width: 70%;">291
<h3 class="text-dark">Best products & brands in our store at 80% off</h3>292
<p>That's true but not always</p>293
<button class="btn btn-warning shadow-0" href="#"> Claim offer </button>294
</div>295
</div>296
</div>297
<div class="col-lg-6">298
<div class="row mb-3 mb-sm-4 g-3 g-sm-4">299
<div class="col-6 d-flex">300
<div class="card w-100 bg-primary" style="min-height: 200px;">301
<div class="card-body">302
<h5 class="text-white">Gaming toolset</h5>303
<p class="text-white-50">Technology for cyber sport</p>304
<a class="btn btn-outline-light btn-sm" href="#">Learn more</a>305
</div>306
</div>307
</div>308
<div class="col-6 d-flex">309
<div class="card w-100 bg-primary" style="min-height: 200px;">310
<div class="card-body">311
<h5 class="text-white">Quality sound</h5>312
<p class="text-white-50">All you need for music</p>313
<a class="btn btn-outline-light btn-sm" href="#">Learn more</a>314
</div>315
</div>316
</div>317
</div>318
<!-- row.// -->319
320
<div class="card bg-success" style="min-height: 200px;">321
<div class="card-body">322
<h5 class="text-white">Buy 2 items, With special gift</h5>323
<p class="text-white-50" style="max-width: 400px;">Buy one, get one free marketing strategy helps your business improves the brand by sharing the profits</p>324
<a class="btn btn-outline-light btn-sm" href="#">Learn more</a>325
</div>326
</div>327
</div>328
<!-- col.// -->329
</div>330
<!-- row.// -->331
</div>332
<!-- container end.// -->333
</section>334
<!-- Feature -->335
336
<!-- Recently viewed -->337
<section class="mt-5 mb-4">338
<div class="container text-dark">339
<header class="">340
<h3 class="section-title">Recently viewed</h3>341
</header>342
343
<div class="row gy-3">344
<div class="col-lg-2 col-md-4 col-4">345
<a href="#" class="img-wrap">346
<img height="200" width="200" class="img-thumbnail" src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/1.webp" />347
</a>348
</div>349
<!-- col.// -->350
<div class="col-lg-2 col-md-4 col-4">351
<a href="#" class="img-wrap">352
<img height="200" width="200" class="img-thumbnail" src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/2.webp" />353
</a>354
</div>355
<!-- col.// -->356
<div class="col-lg-2 col-md-4 col-4">357
<a href="#" class="img-wrap">358
<img height="200" width="200" class="img-thumbnail" src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/3.webp" />359
</a>360
</div>361
<!-- col.// -->362
<div class="col-lg-2 col-md-4 col-4">363
<a href="#" class="img-wrap">364
<img height="200" width="200" class="img-thumbnail" src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/4.webp" />365
</a>366
</div>367
<!-- col.// -->368
<div class="col-lg-2 col-md-4 col-4">369
<a href="#" class="img-wrap">370
<img height="200" width="200" class="img-thumbnail" src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/5.webp" />371
</a>372
</div>373
<!-- col.// -->374
<div class="col-lg-2 col-md-4 col-4">375
<a href="#" class="img-wrap">376
<img height="200" width="200" class="img-thumbnail" src="https://mdbootstrap.com/img/bootstrap-ecommerce/items/6.webp" />377
</a>378
</div>379
</div>380
</div>381
</section>382
<!-- Recently viewed -->383
384
<section>385
<div class="container">386
<div class="px-4 pt-3 border">387
<div class="row pt-1">388
<div class="col-lg-3 col-md-6 mb-3 d-flex">389
<div class="d-flex align-items-center">390
<div class="badge badge-warning p-2 rounded-4 me-3">391
<i class="fas fa-thumbs-up fa-2x fa-fw"></i>392
</div>393
<span class="info">394
<h6 class="title">Reasonable prices</h6>395
<p class="mb-0">Have you ever finally just</p>396
</span>397
</div>398
</div>399
<div class="col-lg-3 col-md-6 mb-3 d-flex">400
<div class="d-flex align-items-center">401
<div class="badge badge-warning p-2 rounded-4 me-3">402
<i class="fas fa-plane fa-2x fa-fw"></i>403
</div>404
<span class="info">405
<h6 class="title">Worldwide shipping</h6>406
<p class="mb-0">Have you ever finally just</p>407
</span>408
</div>409
</div>410
<div class="col-lg-3 col-md-6 mb-3 d-flex">411
<div class="d-flex align-items-center">412
<div class="badge badge-warning p-2 rounded-4 me-3">413
<i class="fas fa-star fa-2x fa-fw"></i>414
</div>415
<span class="info">416
<h6 class="title">Best ratings</h6>417
<p class="mb-0">Have you ever finally just</p>418
</span>419
</div>420
</div>421
<div class="col-lg-3 col-md-6 mb-3 d-flex">422
<div class="d-flex align-items-center">423
<div class="badge badge-warning p-2 rounded-4 me-3">424
<i class="fas fa-phone-alt fa-2x fa-fw"></i>425
</div>426
<span class="info">427
<h6 class="title">Help center</h6>428
<p class="mb-0">Have you ever finally just</p>429
</span>430
</div>431
</div>432
</div>433
</div>434
</div>435
</section>436
437
438
<!-- Footer -->439
<footer class="text-center text-lg-start text-muted bg-primary mt-3">440
<!-- Section: Links -->441
<section class="">442
<div class="container text-center text-md-start pt-4 pb-4">443
<!-- Grid row -->444
<div class="row mt-3">445
<!-- Grid column -->446
<div class="col-12 col-lg-3 col-sm-12 mb-2">447
<!-- Content -->448
<a href="https://mdbootstrap.com/" target="_blank" class="text-white h2">449
MDB450
</a>451
<p class="mt-1 text-white">452
© 2023 Copyright: MDBootstrap.com453
</p>454
</div>455
<!-- Grid column -->456
457
<!-- Grid column -->458
<div class="col-6 col-sm-4 col-lg-2">459
<!-- Links -->460
<h6 class="text-uppercase text-white fw-bold mb-2">461
Store462
</h6>463
<ul class="list-unstyled mb-4">464
<li><a class="text-white-50" href="#">About us</a></li>465
<li><a class="text-white-50" href="#">Find store</a></li>466
<li><a class="text-white-50" href="#">Categories</a></li>467
<li><a class="text-white-50" href="#">Blogs</a></li>468
</ul>469
</div>470
<!-- Grid column -->471
472
<!-- Grid column -->473
<div class="col-6 col-sm-4 col-lg-2">474
<!-- Links -->475
<h6 class="text-uppercase text-white fw-bold mb-2">476
Information477
</h6>478
<ul class="list-unstyled mb-4">479
<li><a class="text-white-50" href="#">Help center</a></li>480
<li><a class="text-white-50" href="#">Money refund</a></li>481
<li><a class="text-white-50" href="#">Shipping info</a></li>482
<li><a class="text-white-50" href="#">Refunds</a></li>483
</ul>484
</div>485
<!-- Grid column -->486
487
<!-- Grid column -->488
<div class="col-6 col-sm-4 col-lg-2">489
<!-- Links -->490
<h6 class="text-uppercase text-white fw-bold mb-2">491
Support492
</h6>493
<ul class="list-unstyled mb-4">494
<li><a class="text-white-50" href="#">Help center</a></li>495
<li><a class="text-white-50" href="#">Documents</a></li>496
<li><a class="text-white-50" href="#">Account restore</a></li>497
<li><a class="text-white-50" href="#">My orders</a></li>498
</ul>499
</div>500
<!-- Grid column -->501
502
<!-- Grid column -->503
<div class="col-12 col-sm-12 col-lg-3">504
<!-- Links -->505
<h6 class="text-uppercase text-white fw-bold mb-2">Newsletter</h6>506
<p class="text-white">Stay in touch with latest updates about our products and offers</p>507
<div class="input-group mb-3">508
<input type="email" class="form-control border" placeholder="Email" aria-label="Email" aria-describedby="button-addon2" />509
<button class="btn btn-light border shadow-0" type="button" id="button-addon2" data-mdb-ripple-color="dark">510
Join511
</button>512
</div>513
</div>514
<!-- Grid column -->515
</div>516
<!-- Grid row -->517
</div>518
</section>519
<!-- Section: Links -->520
521
<div class="">522
<div class="container">523
<div class="d-flex justify-content-between py-4 border-top">524
<!--- payment --->525
<div>526
<i class="fab fa-lg fa-cc-visa text-white"></i>527
<i class="fab fa-lg fa-cc-amex text-white"></i>528
<i class="fab fa-lg fa-cc-mastercard text-white"></i>529
<i class="fab fa-lg fa-cc-paypal text-white"></i>530
</div>531
<!--- payment --->532
533
<!--- language selector --->534
<div class="dropdown dropup">535
<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>536
537
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="Dropdown">538
<li>539
<a class="dropdown-item" href="#"><i class="flag-united-kingdom flag"></i>English <i class="fa fa-check text-success ms-2"></i></a>540
</li>541
<li><hr class="dropdown-divider" /></li>542
<li>543
<a class="dropdown-item" href="#"><i class="flag-poland flag"></i>Polski</a>544
</li>545
<li>546
<a class="dropdown-item" href="#"><i class="flag-china flag"></i>中文</a>547
</li>548
<li>549
<a class="dropdown-item" href="#"><i class="flag-japan flag"></i>日本語</a>550
</li>551
<li>552
<a class="dropdown-item" href="#"><i class="flag-germany flag"></i>Deutsch</a>553
</li>554
<li>555
<a class="dropdown-item" href="#"><i class="flag-france flag"></i>Français</a>556
</li>557
<li>558
<a class="dropdown-item" href="#"><i class="flag-spain flag"></i>Español</a>559
</li>560
<li>561
<a class="dropdown-item" href="#"><i class="flag-russia flag"></i>Русский</a>562
</li>563
<li>564
<a class="dropdown-item" href="#"><i class="flag-portugal flag"></i>Português</a>565
</li>566
</ul>567
</div>568
<!--- language selector --->569
</div>570
</div>571
</div>572
</footer>573
<!-- 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