xxxxxxxxxx
1
<!--Main Navigation-->
2
<header class="mb-5">
3
<!-- Jumbotron -->
4
<div class="p-3 text-center text-white" style="background-color: #131921">
5
<div class="container">
6
<div class="row">
7
<div
8
class="col-md-4 d-flex justify-content-center justify-content-md-start mb-3 mb-md-0"
9
>
10
<a href="#!" class="ml-md-2">
11
<img
12
src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png"
13
height="35"
14
/>
15
</a>
16
</div>
17
18
<div class="col-md-4">
19
<form class="d-flex input-group w-auto my-auto mb-3 mb-md-0">
20
<input
21
autocomplete="off"
22
type="search"
23
class="form-control rounded"
24
placeholder="Search"
25
/>
26
<span class="input-group-text border-0 d-none d-lg-flex"
27
><i class="fas fa-search text-white"></i
28
></span>
29
</form>
30
</div>
31
32
<div
33
class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center"
34
>
35
<div class="d-flex">
36
<!-- Cart -->
37
<a class="text-reset mr-3" href="#">
38
<span><i class="fas fa-shopping-cart"></i></span>
39
<span class="badge rounded-pill badge-notification bg-danger"
40
>1</span
41
>
42
</a>
43
44
<!-- Notification -->
45
<div class="dropdown">
46
<a
47
class="text-reset mr-3 dropdown-toggle hidden-arrow"
48
href="#"
49
id="navbarDropdownMenuLink"
50
role="button"
51
data-toggle="dropdown"
52
aria-expanded="false"
53
>
54
<i class="fas fa-bell"></i>
55
</a>
56
<ul
57
class="dropdown-menu dropdown-menu-right"
58
aria-labelledby="navbarDropdownMenuLink"
59
>
60
<li><a class="dropdown-item" href="#">Some news</a></li>
61
<li><a class="dropdown-item" href="#">Another news</a></li>
62
<li>
63
<a class="dropdown-item" href="#">Something else here</a>
64
</li>
65
</ul>
66
</div>
67
68
<!-- Languages -->
69
<div class="dropdown">
70
<a
71
class="text-reset dropdown-toggle mr-3 hidden-arrow"
72
href="#"
73
id="navbarDropdown"
74
role="button"
75
data-toggle="dropdown"
76
aria-expanded="false"
77
>
78
<i class="united kingdom flag m-0"></i>
79
</a>
80
<ul
81
class="dropdown-menu dropdown-menu-right"
82
aria-labelledby="navbarDropdown"
83
>
84
<li>
85
<a class="dropdown-item" href="#"
86
><i class="united kingdom flag"></i>English
87
<i class="fa fa-check text-success ml-2"></i
88
></a>
89
</li>
90
<li><hr class="dropdown-divider" /></li>
91
<li>
92
<a class="dropdown-item" href="#"
93
><i class="poland flag"></i>Polski</a
94
>
95
</li>
96
<li>
97
<a class="dropdown-item" href="#"
98
><i class="china flag"></i>中文</a
99
>
100
</li>
101
<li>
102
<a class="dropdown-item" href="#"
103
><i class="japan flag"></i>日本語</a
104
>
105
</li>
106
<li>
107
<a class="dropdown-item" href="#"
108
><i class="germany flag"></i>Deutsch</a
109
>
110
</li>
111
<li>
112
<a class="dropdown-item" href="#"
113
><i class="france flag"></i>Français</a
114
>
115
</li>
116
<li>
117
<a class="dropdown-item" href="#"
118
><i class="spain flag"></i>Español</a
119
>
120
</li>
121
<li>
122
<a class="dropdown-item" href="#"
123
><i class="russia flag"></i>Русский</a
124
>
125
</li>
126
<li>
127
<a class="dropdown-item" href="#"
128
><i class="portugal flag"></i>Português</a
129
>
130
</li>
131
</ul>
132
</div>
133
134
<!-- User -->
135
<div class="dropdown">
136
<a
137
class="text-reset dropdown-toggle d-flex align-items-center hidden-arrow"
138
href="#"
139
id="navbarDropdownMenuLink"
140
role="button"
141
data-toggle="dropdown"
142
aria-expanded="false"
143
>
144
<img
145
src="https://mdbootstrap.com/img/new/avatars/1.jpg"
146
class="rounded-circle"
147
height="22"
148
alt=""
149
loading="lazy"
150
/>
151
</a>
152
<ul
153
class="dropdown-menu dropdown-menu-right"
154
aria-labelledby="navbarDropdownMenuLink"
155
>
156
<li><a class="dropdown-item" href="#">My profile</a></li>
157
<li><a class="dropdown-item" href="#">Settings</a></li>
158
<li><a class="dropdown-item" href="#">Logout</a></li>
159
</ul>
160
</div>
161
</div>
162
</div>
163
</div>
164
</div>
165
</div>
166
<!-- Jumbotron -->
167
168
<!-- Navbar -->
169
<nav
170
class="navbar navbar-expand-lg navbar-dark"
171
style="background-color: #232f3e"
172
>
173
<!-- Container wrapper -->
174
<div
175
class="container justify-content-center justify-content-md-between"
176
>
177
<!-- Left links -->
178
<ul class="navbar-nav flex-row">
179
<li class="nav-item mr-2 mr-lg-0">
180
<a
181
class="nav-link"
182
href="#"
183
role="button"
184
data-toggle="sidenav"
185
data-target="#sidenav-1"
186
class="btn shadow-0 p-0 mr-3"
187
aria-controls="#sidenav-1"
188
aria-haspopup="true"
189
>
190
<i class="fas fa-bars mr-1"></i>
191
<span>Categories</span>
192
</a>
193
</li>
194
<li class="nav-item mr-2 mr-lg-0 d-none d-md-inline-block">
195
<a class="nav-link" href="#">Bestsellers</a>
196
</li>
197
<li class="nav-item mr-2 mr-lg-0 d-none d-md-inline-block">
198
<a class="nav-link" href="#">Inspirations</a>
199
</li>
200
<li class="nav-item mr-2 mr-lg-0 d-none d-md-inline-block">
201
<a class="nav-link" href="#">Blog</a>
202
</li>
203
<li class="nav-item mr-2 mr-lg-0 d-none d-md-inline-block">
204
<a class="nav-link" href="#">Contact</a>
205
</li>
206
</ul>
207
<!-- Left links -->
208
209
<button class="btn btn-outline-light" type="button">
210
Download app<i class="fas fa-download ml-2"></i>
211
</button>
212
</div>
213
<!-- Container wrapper -->
214
</nav>
215
<!-- Navbar -->
216
217
<!-- Sidenav -->
218
<div
219
id="sidenav-1"
220
class="sidenav"
221
role="navigation"
222
data-hidden="true"
223
data-accordion="true"
224
>
225
<ul class="sidenav-menu">
226
<li class="sidenav-item">
227
<a class="sidenav-link"
228
><i class="fas fa-layer-group pr-3"></i><span>Categories</span></a
229
>
230
<ul class="sidenav-collapse show">
231
<li class="sidenav-item">
232
<a class="sidenav-link">Dresses</a>
233
</li>
234
<li class="sidenav-item">
235
<a class="sidenav-link">Shirts</a>
236
</li>
237
<li class="sidenav-item">
238
<a class="sidenav-link">Jeans</a>
239
</li>
240
<li class="sidenav-item">
241
<a class="sidenav-link">Shoes</a>
242
</li>
243
<li class="sidenav-item">
244
<a class="sidenav-link">Accessories</a>
245
</li>
246
<li class="sidenav-item">
247
<a class="sidenav-link">Jewelry</a>
248
</li>
249
</ul>
250
</li>
251
<li class="sidenav-item">
252
<a class="sidenav-link"
253
><i class="fas fa-gem pr-3"></i><span>Brands</span></a
254
>
255
<ul class="sidenav-collapse">
256
<li class="sidenav-item">
257
<a class="sidenav-link">Brand 1</a>
258
</li>
259
<li class="sidenav-item">
260
<a class="sidenav-link">Brand 2</a>
261
</li>
262
<li class="sidenav-item">
263
<a class="sidenav-link">Brand 3</a>
264
</li>
265
<li class="sidenav-item">
266
<a class="sidenav-link">Brand 4</a>
267
</li>
268
</ul>
269
</li>
270
<li class="sidenav-item">
271
<a class="sidenav-link"
272
><i class="fas fa-gift pr-3"></i><span>Discounts</span></a
273
>
274
<ul class="sidenav-collapse">
275
<li class="sidenav-item">
276
<a class="sidenav-link">-70%</a>
277
</li>
278
<li class="sidenav-item">
279
<a class="sidenav-link">-50%</a>
280
</li>
281
<li class="sidenav-item">
282
<a class="sidenav-link">Any</a>
283
</li>
284
</ul>
285
</li>
286
<li class="sidenav-item">
287
<a class="sidenav-link"
288
><i class="fas fa-fire-alt pr-3"></i><span>Popular</span></a
289
>
290
<ul class="sidenav-collapse">
291
<li class="sidenav-item">
292
<a class="sidenav-link">Jewelry</a>
293
</li>
294
<li class="sidenav-item">
295
<a class="sidenav-link">Snickers</a>
296
</li>
297
</ul>
298
</li>
299
<li class="sidenav-item">
300
<a class="sidenav-link"
301
><i class="fab fa-hotjar pr-3"></i
302
><span>Today's bestseller</span></a
303
>
304
<div class="card mx-3">
305
<div class="bg-image hover-zoom ripple" data-ripple-color="light">
306
<img
307
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(3).jpg"
308
class="w-100"
309
/>
310
<a href="#!">
311
<div class="mask">
312
<div
313
class="d-flex justify-content-start align-items-end h-100"
314
>
315
<h5><span class="badge bg-danger ml-2">-10%</span></h5>
316
</div>
317
</div>
318
<div class="hover-overlay">
319
<div
320
class="mask"
321
style="background-color: rgba(251, 251, 251, 0.15)"
322
></div>
323
</div>
324
</a>
325
</div>
326
<div class="card-body">
327
<a href="" class="text-reset"
328
><p class="mb-2">Pink snickers</p></a
329
>
330
<p class="mb-0">
331
<s>$61.99</s><strong class="ml-2 text-danger">$50.99</strong>
332
</p>
333
</div>
334
</div>
335
</li>
336
</ul>
337
</div>
338
<!-- Sidenav -->
339
340
<!-- Carousel wrapper -->
341
<div
342
id="intro-carousel"
343
class="carousel slide carousel-fade"
344
data-ride="carousel"
345
>
346
<!-- Indicators -->
347
<ol class="carousel-indicators">
348
<li
349
data-target="#carouselBasicExample"
350
data-slide-to="0"
351
class="active"
352
></li>
353
<li data-target="#carouselBasicExample" data-slide-to="1"></li>
354
<li data-target="#carouselBasicExample" data-slide-to="2"></li>
355
</ol>
356
<div class="carousel-inner">
357
<div class="carousel-item active">
358
<a href="#!" class="ripple" data-ripple-color="light">
359
<img
360
src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/lab/amazon-homepage/assets/assets/slide-1.jpg"
361
class="d-block w-100"
362
alt="..."
363
/>
364
<div class="carousel-caption d-none d-md-block">
365
<h5>Epic daily deal</h5>
366
</div>
367
</a>
368
</div>
369
<div class="carousel-item">
370
<a href="#!" class="ripple" data-ripple-color="light">
371
<img
372
src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/lab/amazon-homepage/assets/assets/slide-2.jpg"
373
class="d-block w-100"
374
alt="..."
375
/>
376
<div class="carousel-caption d-none d-md-block">
377
<h5>Huge discounts</h5>
378
</div>
379
</a>
380
</div>
381
<div class="carousel-item">
382
<a href="#!" class="ripple" data-ripple-color="light">
383
<img
384
src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/lab/amazon-homepage/assets/assets/slide-3.jpg"
385
class="d-block w-100"
386
alt="..."
387
/>
388
<div class="carousel-caption d-none d-md-block">
389
<h5>
390
<span class="bg-dark p-2 rounded">Up to 70% cheaper</span>
391
</h5>
392
</div>
393
</a>
394
</div>
395
</div>
396
<a
397
class="carousel-control-prev"
398
href="#intro-carousel"
399
role="button"
400
data-slide="prev"
401
>
402
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
403
<span class="visually-hidden">Previous</span>
404
</a>
405
<a
406
class="carousel-control-next"
407
href="#intro-carousel"
408
role="button"
409
data-slide="next"
410
>
411
<span class="carousel-control-next-icon" aria-hidden="true"></span>
412
<span class="visually-hidden">Next</span>
413
</a>
414
</div>
415
<!-- Carousel wrapper -->
416
</header>
417
<!--Main Navigation-->
418
419
<!--Main layout-->
420
<main class="mb-5">
421
<div class="container">
422
<!--Section: Featured-->
423
<section>
424
<div class="row">
425
<div class="col-lg-3 col-md-6 mb-4">
426
<div class="card h-100">
427
<div class="card-body text-center pb-0">
428
<p class="card-title mb-3">
429
<strong>Coming soon from The Drop</strong>
430
</p>
431
432
<a href="#!" class="ripple" data-ripple-color="light">
433
<img
434
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/041.jpg"
435
class="w-100"
436
alt=""
437
/>
438
</a>
439
</div>
440
<div class="card-footer border-0 text-center">
441
<a
442
class="btn btn-link"
443
href="#!"
444
role="button"
445
data-ripple-color="dark"
446
>Learn more</a
447
>
448
</div>
449
</div>
450
</div>
451
452
<div class="col-lg-3 col-md-6 mb-4">
453
<div class="card h-100">
454
<div class="card-body text-center pb-0">
455
<p class="card-title mb-3">
456
<strong>Discounts of the week</strong>
457
</p>
458
459
<div class="row">
460
<div class="col-md-6 mb-4 mb-md-0">
461
<a href="#!" class="ripple" data-ripple-color="light">
462
<img
463
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/042.jpg"
464
class="w-100"
465
alt=""
466
/>
467
</a>
468
<small>Watches</small>
469
</div>
470
471
<div class="col-md-6 mb-4 mb-md-0">
472
<a href="#!" class="ripple" data-ripple-color="light">
473
<img
474
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/043.jpg"
475
class="w-100"
476
alt=""
477
/>
478
</a>
479
<small>Photo cameras</small>
480
</div>
481
482
<div class="col-md-6 mb-4 mb-md-0">
483
<a href="#!" class="ripple" data-ripple-color="light">
484
<img
485
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/044.jpg"
486
class="w-100"
487
alt=""
488
/>
489
</a>
490
<small>Backpacks</small>
491
</div>
492
493
<div class="col-md-6 mb-4 mb-md-0">
494
<a href="#!" class="ripple" data-ripple-color="light">
495
<img
496
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/045.jpg"
497
class="w-100"
498
alt=""
499
/>
500
</a>
501
<small>Shoes</small>
502
</div>
503
</div>
504
</div>
505
506
<div class="card-footer border-0 text-center">
507
<a
508
class="btn btn-link"
509
href="#!"
510
role="button"
511
data-ripple-color="dark"
512
>Shop all</a
513
>
514
</div>
515
</div>
516
</div>
517
518
<div class="col-lg-3 col-md-6 mb-4">
519
<div class="card h-100">
520
<div class="card-body text-center pb-0">
521
<p class="card-title mb-3">
522
<strong>Drones</strong>
523
</p>
524
525
<a href="#!" class="ripple" data-ripple-color="light">
526
<img
527
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/001.jpg"
528
class="w-100"
529
alt=""
530
/>
531
</a>
532
</div>
533
<div class="card-footer border-0 text-center">
534
<a
535
class="btn btn-link"
536
href="#!"
537
role="button"
538
data-ripple-color="dark"
539
>See more details</a
540
>
541
</div>
542
</div>
543
</div>
544
545
<div class="col-lg-3 col-md-6 mb-4">
546
<div class="card h-100">
547
<div class="card-body text-center pb-0">
548
<p class="card-title mb-3">
549
<strong>Discounts of the month</strong>
550
</p>
551
552
<div class="row">
553
<div class="col-md-6 mb-4 mb-md-0">
554
<a href="#!" class="ripple" data-ripple-color="light">
555
<img
556
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/022.jpg"
557
class="w-100"
558
alt=""
559
/>
560
</a>
561
<small>Food</small>
562
</div>
563
564
<div class="col-md-6 mb-4 mb-md-0">
565
<a href="#!" class="ripple" data-ripple-color="light">
566
<img
567
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/023.jpg"
568
class="w-100"
569
alt=""
570
/>
571
</a>
572
<small>Glasses</small>
573
</div>
574
575
<div class="col-md-6 mb-4 mb-md-0">
576
<a href="#!" class="ripple" data-ripple-color="light">
577
<img
578
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/014.jpg"
579
class="w-100"
580
alt=""
581
/>
582
</a>
583
<small>Headphones</small>
584
</div>
585
586
<div class="col-md-6 mb-4 mb-md-0">
587
<a href="#!" class="ripple" data-ripple-color="light">
588
<img
589
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/025.jpg"
590
class="w-100"
591
alt=""
592
/>
593
</a>
594
<small>Oldschool</small>
595
</div>
596
</div>
597
</div>
598
599
<div class="card-footer border-0 text-center">
600
<a
601
class="btn btn-link"
602
href="#!"
603
role="button"
604
data-ripple-color="dark"
605
>Shop all</a
606
>
607
</div>
608
</div>
609
</div>
610
</div>
611
612
<div class="row">
613
<div class="col-lg-3 col-md-6 mb-4">
614
<div class="card h-100">
615
<div class="card-body text-center pb-0">
616
<p class="card-title mb-3">
617
<strong>Deals of the day</strong>
618
</p>
619
620
<div class="row">
621
<div class="col-md-6 mb-4 mb-md-0">
622
<a href="#!" class="ripple" data-ripple-color="light">
623
<img
624
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/052.jpg"
625
class="w-100"
626
alt=""
627
/>
628
</a>
629
<small>Trousers</small>
630
</div>
631
632
<div class="col-md-6 mb-4 mb-md-0">
633
<a href="#!" class="ripple" data-ripple-color="light">
634
<img
635
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/053.jpg"
636
class="w-100"
637
alt=""
638
/>
639
</a>
640
<small>Headphones</small>
641
</div>
642
643
<div class="col-md-6 mb-4 mb-md-0">
644
<a href="#!" class="ripple" data-ripple-color="light">
645
<img
646
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/054.jpg"
647
class="w-100"
648
alt=""
649
/>
650
</a>
651
<small>T shirts</small>
652
</div>
653
654
<div class="col-md-6 mb-4 mb-md-0">
655
<a href="#!" class="ripple" data-ripple-color="light">
656
<img
657
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/055.jpg"
658
class="w-100"
659
alt=""
660
/>
661
</a>
662
<small>Smartphones</small>
663
</div>
664
</div>
665
</div>
666
667
<div class="card-footer border-0 text-center">
668
<a
669
class="btn btn-link"
670
href="#!"
671
role="button"
672
data-ripple-color="dark"
673
>Shop all</a
674
>
675
</div>
676
</div>
677
</div>
678
679
<div class="col-lg-3 col-md-6 mb-4">
680
<div class="card h-100">
681
<div class="card-body text-center pb-0">
682
<p class="card-title mb-3">
683
<strong>Dressed to chill</strong>
684
</p>
685
686
<a href="#!" class="ripple" data-ripple-color="light">
687
<img
688
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/013.jpg"
689
class="w-100"
690
alt=""
691
/>
692
</a>
693
</div>
694
<div class="card-footer border-0 text-center">
695
<a
696
class="btn btn-link"
697
href="#!"
698
role="button"
699
data-ripple-color="dark"
700
>Learn more</a
701
>
702
</div>
703
</div>
704
</div>
705
706
<div class="col-lg-3 col-md-6 mb-4">
707
<div class="card h-100">
708
<div class="card-body text-center pb-0">
709
<p class="card-title mb-3">
710
<strong>Customers' most-loved</strong>
711
</p>
712
713
<div class="row">
714
<div class="col-md-6 mb-4 mb-md-0">
715
<a href="#!" class="ripple" data-ripple-color="light">
716
<img
717
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/062.jpg"
718
class="w-100"
719
alt=""
720
/>
721
</a>
722
<small>Bicycles</small>
723
</div>
724
725
<div class="col-md-6 mb-4 mb-md-0">
726
<a href="#!" class="ripple" data-ripple-color="light">
727
<img
728
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/063.jpg"
729
class="w-100"
730
alt=""
731
/>
732
</a>
733
<small>Clothes</small>
734
</div>
735
736
<div class="col-md-6 mb-4 mb-md-0">
737
<a href="#!" class="ripple" data-ripple-color="light">
738
<img
739
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/064.jpg"
740
class="w-100"
741
alt=""
742
/>
743
</a>
744
<small>Smartphones</small>
745
</div>
746
747
<div class="col-md-6 mb-4 mb-md-0">
748
<a href="#!" class="ripple" data-ripple-color="light">
749
<img
750
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/065.jpg"
751
class="w-100"
752
alt=""
753
/>
754
</a>
755
<small>Cosmetics</small>
756
</div>
757
</div>
758
</div>
759
760
<div class="card-footer border-0 text-center">
761
<a
762
class="btn btn-link"
763
href="#!"
764
role="button"
765
data-ripple-color="dark"
766
>Shop all</a
767
>
768
</div>
769
</div>
770
</div>
771
772
<div class="col-lg-3 col-md-6 mb-4">
773
<div class="card h-100">
774
<div class="card-body text-center pb-0">
775
<p class="card-title mb-3">
776
<strong>Surprise?</strong>
777
</p>
778
779
<a href="#!" class="ripple" data-ripple-color="light">
780
<img
781
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/002.jpg"
782
class="w-100"
783
alt=""
784
/>
785
</a>
786
</div>
787
<div class="card-footer border-0 text-center">
788
<a
789
class="btn btn-link"
790
href="#!"
791
role="button"
792
data-ripple-color="dark"
793
>See more details</a
794
>
795
</div>
796
</div>
797
</div>
798
</div>
799
</section>
800
<!--Section: Featured-->
801
802
<!--Section: Categories-->
803
<section class="mb-4">
804
<div class="card">
805
<div class="card-body">
806
<p><strong>All you need to get holiday ready</strong></p>
807
808
<div class="multi-carousel text-center">
809
<div class="multi-carousel-inner">
810
<div class="multi-carousel-item">
811
<a
812
href="#!"
813
class="ripple text-reset"
814
data-ripple-color="light"
815
>
816
<img
817
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/003.jpg"
818
class="d-block w-100 mb-2"
819
alt="..."
820
/>
821
<span>Shoes</span>
822
</a>
823
</div>
824
<div class="multi-carousel-item">
825
<a
826
href="#!"
827
class="ripple text-reset"
828
data-ripple-color="light"
829
>
830
<img
831
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/010.jpg"
832
class="d-block w-100 mb-2"
833
alt="..."
834
/>
835
<span>Glasses</span>
836
</a>
837
</div>
838
<div class="multi-carousel-item">
839
<a
840
href="#!"
841
class="ripple text-reset"
842
data-ripple-color="light"
843
>
844
<img
845
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/048.jpg"
846
class="d-block w-100 mb-2"
847
alt="..."
848
/>
849
<span>Watches</span>
850
</a>
851
</div>
852
<div class="multi-carousel-item">
853
<a
854
href="#!"
855
class="ripple text-reset"
856
data-ripple-color="light"
857
>
858
<img
859
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/118.jpg"
860
class="d-block w-100 mb-2"
861
alt="..."
862
/>
863
<span>Socks</span>
864
</a>
865
</div>
866
</div>
867
<a
868
class="carousel-control-prev"
869
tabindex="0"
870
role="button"
871
data-slide="prev"
872
>
873
<span
874
class="carousel-control-prev-icon"
875
aria-hidden="true"
876
></span>
877
</a>
878
<a
879
class="carousel-control-next"
880
tabindex="0"
881
role="button"
882
data-slide="next"
883
>
884
<span
885
class="carousel-control-next-icon"
886
aria-hidden="true"
887
></span>
888
</a>
889
</div>
890
</div>
891
</div>
892
</section>
893
<!--Section: Categories-->
894
895
<!--Section: Recommended-->
896
<section class="mb-4">
897
<div class="card">
898
<div class="card-body">
899
<p><strong>Recommended items</strong></p>
900
901
<div class="multi-carousel text-center">
902
<div class="multi-carousel-inner">
903
<div class="multi-carousel-item">
904
<a
905
href="#!"
906
class="ripple text-reset"
907
data-ripple-color="light"
908
>
909
<img
910
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/004.jpg"
911
class="d-block w-100 mb-2"
912
alt="..."
913
/>
914
<span>Sneakers</span>
915
</a>
916
</div>
917
<div class="multi-carousel-item">
918
<a
919
href="#!"
920
class="ripple text-reset"
921
data-ripple-color="light"
922
>
923
<img
924
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/005.jpg"
925
class="d-block w-100 mb-2"
926
alt="..."
927
/>
928
<span>Autumn</span>
929
</a>
930
</div>
931
<div class="multi-carousel-item">
932
<a
933
href="#!"
934
class="ripple text-reset"
935
data-ripple-color="light"
936
>
937
<img
938
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/006.jpg"
939
class="d-block w-100 mb-2"
940
alt="..."
941
/>
942
<span>Books</span>
943
</a>
944
</div>
945
<div class="multi-carousel-item">
946
<a
947
href="#!"
948
class="ripple text-reset"
949
data-ripple-color="light"
950
>
951
<img
952
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/017.jpg"
953
class="d-block w-100 mb-2"
954
alt="..."
955
/>
956
<span>Smartphones</span>
957
</a>
958
</div>
959
</div>
960
<a
961
class="carousel-control-prev"
962
tabindex="0"
963
role="button"
964
data-slide="prev"
965
>
966
<span
967
class="carousel-control-prev-icon"
968
aria-hidden="true"
969
></span>
970
</a>
971
<a
972
class="carousel-control-next"
973
tabindex="0"
974
role="button"
975
data-slide="next"
976
>
977
<span
978
class="carousel-control-next-icon"
979
aria-hidden="true"
980
></span>
981
</a>
982
</div>
983
</div>
984
</div>
985
</section>
986
<!--Section: Recommended-->
987
988
<!--Section: Trending-->
989
<section class="mb-4">
990
<div class="card">
991
<div class="card-body">
992
<p><strong>Trending deals</strong></p>
993
994
<div class="multi-carousel text-center">
995
<div class="multi-carousel-inner">
996
<div class="multi-carousel-item">
997
<a
998
href="#!"
999
class="ripple text-reset"
1000
data-ripple-color="light"
1001
>
1002
<img
1003
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/021.jpg"
1004
class="d-block w-100 mb-2"
1005
alt="..."
1006
/>
1007
<span>Natural cosmetics</span>
1008
</a>
1009
</div>
1010
<div class="multi-carousel-item">
1011
<a
1012
href="#!"
1013
class="ripple text-reset"
1014
data-ripple-color="light"
1015
>
1016
<img
1017
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/028.jpg"
1018
class="d-block w-100 mb-2"
1019
alt="..."
1020
/>
1021
<span>Plants</span>
1022
</a>
1023
</div>
1024
<div class="multi-carousel-item">
1025
<a
1026
href="#!"
1027
class="ripple text-reset"
1028
data-ripple-color="light"
1029
>
1030
<img
1031
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/029.jpg"
1032
class="d-block w-100 mb-2"
1033
alt="..."
1034
/>
1035
<span>Suits</span>
1036
</a>
1037
</div>
1038
<div class="multi-carousel-item">
1039
<a
1040
href="#!"
1041
class="ripple text-reset"
1042
data-ripple-color="light"
1043
>
1044
<img
1045
src="https://mdbootstrap.com/img/new/ecommerce/horizontal/031.jpg"
1046
class="d-block w-100 mb-2"
1047
alt="..."
1048
/>
1049
<span>Tablets</span>
1050
</a>
1051
</div>
1052
</div>
1053
<a
1054
class="carousel-control-prev"
1055
tabindex="0"
1056
role="button"
1057
data-slide="prev"
1058
>
1059
<span
1060
class="carousel-control-prev-icon"
1061
aria-hidden="true"
1062
></span>
1063
</a>
1064
<a
1065
class="carousel-control-next"
1066
tabindex="0"
1067
role="button"
1068
data-slide="next"
1069
>
1070
<span
1071
class="carousel-control-next-icon"
1072
aria-hidden="true"
1073
></span>
1074
</a>
1075
</div>
1076
</div>
1077
</div>
1078
</section>
1079
<!--Section: Trending-->
1080
1081
<!--Section: MSC-->
1082
<section>
1083
<div class="row">
1084
<div class="col-lg-3 col-md-6 mb-4">
1085
<div class="card h-100">
1086
<div class="card-body text-center pb-0">
1087
<p class="card-title mb-3">
1088
<strong>Holiday Deals</strong>
1089
</p>
1090
1091
<a href="#!" class="ripple" data-ripple-color="light">
1092
<img
1093
src="https://mdbootstrap.com/img/new/ecommerce/vertical/041.jpg"
1094
class="w-100"
1095
alt=""
1096
/>
1097
</a>
1098
</div>
1099
<div class="card-footer border-0 text-center">
1100
<a
1101
class="btn btn-link"
1102
href="#!"
1103
role="button"
1104
data-ripple-color="dark"
1105
>Learn more</a
1106
>
1107
</div>
1108
</div>
1109
</div>
1110
1111
<div class="col-lg-3 col-md-6 mb-4">
1112
<div class="card h-100">
1113
<div class="card-body text-center pb-0">
1114
<p class="card-title mb-3">
1115
<strong>Deals 4 stars and up</strong>
1116
</p>
1117
1118
<a href="#!" class="ripple" data-ripple-color="light">
1119
<img
1120
src="https://mdbootstrap.com/img/new/ecommerce/vertical/001.jpg"
1121
class="w-100"
1122
alt=""
1123
/>
1124
</a>
1125
</div>
1126
<div class="card-footer border-0 text-center">
1127
<a
1128
class="btn btn-link"
1129
href="#!"
1130
role="button"
1131
data-ripple-color="dark"
1132
>Learn more</a
1133
>
1134
</div>
1135
</div>
1136
</div>
1137
1138
<div class="col-lg-3 col-md-6 mb-4">
1139
<div class="card h-100">
1140
<div class="card-body text-center pb-0">
1141
<p class="card-title mb-3">
1142
<strong>Shop beauty gifts</strong>
1143
</p>
1144
1145
<a href="#!" class="ripple" data-ripple-color="light">
1146
<img
1147
src="https://mdbootstrap.com/img/new/ecommerce/vertical/025.jpg"
1148
class="w-100"
1149
alt=""
1150
/>
1151
</a>
1152
</div>
1153
<div class="card-footer border-0 text-center">
1154
<a
1155
class="btn btn-link"
1156
href="#!"
1157
role="button"
1158
data-ripple-color="dark"
1159
>Learn more</a
1160
>
1161
</div>
1162
</div>
1163
</div>
1164
1165
<div class="col-lg-3 col-md-6 mb-4">
1166
<div class="card h-100">
1167
<div class="card-body text-center pb-0">
1168
<p class="card-title mb-3">
1169
<strong>Gift ideas</strong>
1170
</p>
1171
1172
<a href="#!" class="ripple" data-ripple-color="light">
1173
<img
1174
src="https://mdbootstrap.com/img/new/ecommerce/vertical/018.jpg"
1175
class="w-100"
1176
alt=""
1177
/>
1178
</a>
1179
</div>
1180
<div class="card-footer border-0 text-center">
1181
<a
1182
class="btn btn-link"
1183
href="#!"
1184
role="button"
1185
data-ripple-color="dark"
1186
>Learn more</a
1187
>
1188
</div>
1189
</div>
1190
</div>
1191
</div>
1192
</section>
1193
<!--Section: MSC-->
1194
1195
<!--Section: Banner-->
1196
<section class="mb-4">
1197
<div
1198
class="bg-image ripple shadow-1-strong rounded"
1199
data-ripple-color="light"
1200
style="max-height: 250px"
1201
>
1202
<img
1203
src="https://mdbootstrap.com/img/new/slides/311.jpg"
1204
class="w-100"
1205
/>
1206
<a href="#!">
1207
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
1208
<div
1209
class="d-flex justify-content-center align-items-center h-100"
1210
>
1211
<div class="text-center">
1212
<h2 class="text-white mb-3">Grant a few birthday wishes</h2>
1213
<button type="button" class="btn btn-outline-light">
1214
Shop gift cards
1215
</button>
1216
</div>
1217
</div>
1218
</div>
1219
<div class="hover-overlay">
1220
<div
1221
class="mask"
1222
style="background-color: rgba(251, 251, 251, 0.2)"
1223
></div>
1224
</div>
1225
</a>
1226
</div>
1227
</section>
1228
<!--Section: Banner-->
1229
1230
<!--Section: MSC-->
1231
<section>
1232
<div class="row">
1233
<div class="col-lg-3 col-md-6 mb-4">
1234
<div class="card h-100">
1235
<div class="card-body text-center pb-0">
1236
<p class="card-title mb-3">
1237
<strong>Deals on top brands</strong>
1238
</p>
1239
1240
<a href="#!" class="ripple" data-ripple-color="light">
1241
<img
1242
src="https://mdbootstrap.com/img/new/ecommerce/vertical/031.jpg"
1243
class="w-100"
1244
alt=""
1245
/>
1246
</a>
1247
</div>
1248
<div class="card-footer border-0 text-center">
1249
<a
1250
class="btn btn-link"
1251
href="#!"
1252
role="button"
1253
data-ripple-color="dark"
1254
>Learn more</a
1255
>
1256
</div>
1257
</div>
1258
</div>
1259
1260
<div class="col-lg-3 col-md-6 mb-4">
1261
<div class="card h-100">
1262
<div class="card-body text-center pb-0">
1263
<p class="card-title mb-3">
1264
<strong>Artistic deals</strong>
1265
</p>
1266
1267
<a href="#!" class="ripple" data-ripple-color="light">
1268
<img
1269
src="https://mdbootstrap.com/img/new/ecommerce/vertical/067.jpg"
1270
class="w-100"
1271
alt=""
1272
/>
1273
</a>
1274
</div>
1275
<div class="card-footer border-0 text-center">
1276
<a
1277
class="btn btn-link"
1278
href="#!"
1279
role="button"
1280
data-ripple-color="dark"
1281
>Learn more</a
1282
>
1283
</div>
1284
</div>
1285
</div>
1286
1287
<div class="col-lg-3 col-md-6 mb-4">
1288
<div class="card h-100">
1289
<div class="card-body text-center pb-0">
1290
<p class="card-title mb-3">
1291
<strong>Original offers</strong>
1292
</p>
1293
1294
<a href="#!" class="ripple" data-ripple-color="light">
1295
<img
1296
src="https://mdbootstrap.com/img/new/ecommerce/vertical/084.jpg"
1297
class="w-100"
1298
alt=""
1299
/>
1300
</a>
1301
</div>
1302
<div class="card-footer border-0 text-center">
1303
<a
1304
class="btn btn-link"
1305
href="#!"
1306
role="button"
1307
data-ripple-color="dark"
1308
>Learn more</a
1309
>
1310
</div>
1311
</div>
1312
</div>
1313
1314
<div class="col-lg-3 col-md-6 mb-4">
1315
<div class="card h-100">
1316
<div class="card-body text-center pb-0">
1317
<p class="card-title mb-3">
1318
<strong>Fashionable this season</strong>
1319
</p>
1320
1321
<a href="#!" class="ripple" data-ripple-color="light">
1322
<img
1323
src="https://mdbootstrap.com/img/new/ecommerce/vertical/085.jpg"
1324
class="w-100"
1325
alt=""
1326
/>
1327
</a>
1328
</div>
1329
<div class="card-footer border-0 text-center">
1330
<a
1331
class="btn btn-link"
1332
href="#!"
1333
role="button"
1334
data-ripple-color="dark"
1335
>Learn more</a
1336
>
1337
</div>
1338
</div>
1339
</div>
1340
</div>
1341
</section>
1342
<!--Section: MSC-->
1343
</div>
1344
</main>
1345
<!--Main layout-->
1346
1347
<!--Footer-->
1348
<footer class="text-center text-white" style="background-color: #232f3e">
1349
<a
1350
href="#intro-carousel"
1351
role="button"
1352
class="btn btn-primary btn-block rounded-0 shadow-0 py-3"
1353
style="background-color: #37475a"
1354
data-smooth-scroll="smooth-scroll"
1355
>
1356
Back to top
1357
</a>
1358
1359
<!-- Grid container -->
1360
<div class="container p-4">
1361
<!--Grid row-->
1362
<div class="row">
1363
<!--Grid column-->
1364
<div class="col-lg-4 mb-4 mb-lg-0">
1365
<p><strong>About us</strong></p>
1366
1367
<p>
1368
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste
1369
atque ea quis molestias. Fugiat pariatur maxime quis culpa
1370
corporis vitae repudiandae aliquam voluptatem veniam, est atque
1371
cumque eum delectus sint!
1372
</p>
1373
</div>
1374
<!--Grid column-->
1375
1376
<!--Grid column-->
1377
<div class="col-lg-3 mb-4 mb-lg-0">
1378
<p><strong>Useful links</strong></p>
1379
1380
<ul class="list-unstyled mb-0">
1381
<li>
1382
<a href="#!" class="text-white">Privacy policy</a>
1383
</li>
1384
<li>
1385
<a href="#!" class="text-white">Media</a>
1386
</li>
1387
<li>
1388
<a href="#!" class="text-white">Job offers</a>
1389
</li>
1390
<li>
1391
<a href="#!" class="text-white">Cooperation</a>
1392
</li>
1393
</ul>
1394
</div>
1395
<!--Grid column-->
1396
1397
<!--Grid column-->
1398
<div class="col-lg-3 mb-4 mb-lg-0">
1399
<p><strong>Products</strong></p>
1400
1401
<ul class="list-unstyled">
1402
<li>
1403
<a href="#!" class="text-white">Electronics</a>
1404
</li>
1405
<li>
1406
<a href="#!" class="text-white">Fashion</a>
1407
</li>
1408
<li>
1409
<a href="#!" class="text-white">Beauty</a>
1410
</li>
1411
<li>
1412
<a href="#!" class="text-white">Automotive</a>
1413
</li>
1414
</ul>
1415
</div>
1416
<!--Grid column-->
1417
1418
<!--Grid column-->
1419
<div class="col-lg-2 mb-4 mb-lg-0">
1420
<p><strong>Support</strong></p>
1421
1422
<ul class="list-unstyled">
1423
<li>
1424
<a href="#!" class="text-white">Complaints</a>
1425
</li>
1426
<li>
1427
<a href="#!" class="text-white">Help center</a>
1428
</li>
1429
<li>
1430
<a href="#!" class="text-white">Community</a>
1431
</li>
1432
<li>
1433
<a href="#!" class="text-white">FAQ</a>
1434
</li>
1435
</ul>
1436
</div>
1437
<!--Grid column-->
1438
</div>
1439
<!--Grid row-->
1440
</div>
1441
<!-- Grid container -->
1442
1443
<!-- Copyright -->
1444
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
1445
© 2020 Copyright:
1446
<a class="text-white" href="https://mdbootstrap.com/"
1447
>MDBootstrap.com</a
1448
>
1449
</div>
1450
<!-- Copyright -->
1451
</footer>
1452
<!--Footer-->
xxxxxxxxxx
1
.navbar-dark .navbar-nav .nav-link {
2
color: #fff;
3
}
1
1
Console errors: 0