-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
761 lines (677 loc) · 43.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"-->
<!-- rel="stylesheet">-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/media-queries.css">
<link rel="shortcut icon" href="./assets/images/favicon/favicon.ico" type="image/x-icon">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<script defer src="assets/js/menu.js"></script>
<script type="module" defer src="./assets/js/slider.js"></script>
<script defer src="./assets/js/products.js"></script>
<script type="module" defer src="assets/js/slider-filter.js"></script>
<title>Fashion Era</title>
</head>
<body>
<div class="container">
<header>
<div class="menu">
<div class="main-menu">
<div class="main-menu-logo">
<a href="index.html">
<img class="header-lg-logo" src="./assets/images/logo.png" alt="Fashion Era">
</a>
</div>
<div class="header-lg-menu">
<nav class="header-lg-nav">
<ul class="header-lg-list">
<li class="lg-list-item"><a href="#">Men</a></li>
<li class="lg-list-item"><a href="#">Women</a></li>
<li class="lg-list-item"><a href="#">Kids</a></li>
<li class="lg-list-item new"><a href="#">Winter</a></li>
<li class="lg-list-item"><a href="#">Lifestyle</a></li>
</ul>
</nav>
</div>
<div class="main-menu-search">
<input class="lg-search-input" type="text" placeholder="Search">
<a href="#" class="lg-search-btn">
<svg class="search-icon" width="24" height="25" viewBox="0 0 28 31" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g opacity="0.6" filter="url(#filter0_d_47_1740)">
<circle cx="12" cy="11" r="7" stroke="#323232" stroke-width="2"/>
<path d="M12 8C11.606 8 11.2159 8.0776 10.8519 8.22836C10.488 8.37913 10.1573 8.6001 9.87868 8.87868C9.6001 9.15726 9.37913 9.48797 9.22836 9.85195C9.0776 10.2159 9 10.606 9 11"
stroke="#323232" stroke-width="2" stroke-linecap="round"/>
<path d="M21 20L18 17" stroke="#323232" stroke-width="2" stroke-linecap="round"/>
</g>
<defs>
<filter id="filter0_d_47_1740" x="-3" y="0" width="32" height="32"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix"
result="effect1_dropShadow_47_1740"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_47_1740"
result="shape"/>
</filter>
</defs>
</svg>
</a>
</div>
<div class="lg-header-btn-container">
<div class="lg-shopping-btn-container">
<a href="cart.html">
<button class="shopping-cart-btn">
<span class="cart-number-badge">0</span>
<svg class="shopping-cart" width="18" height="19" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M3.78227 6.07082C11.0327 4.36956 20.0466 4.47387 22.1299 6.69105C24.2131 8.90824 24.1702 16.322 21.735 18.3562C19.3012 20.3905 8.73155 20.5839 5.38303 18.3562C1.8453 16.0014 3.89797 8.75741 3.78227 4.36956C3.85169 1.91419 1 1.51599 1 1.51599"
stroke="#004743" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M15.3005 11.5278H19.0751" stroke="#004743" stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.91909 23.4963C6.32745 23.4963 6.65958 23.8068 6.65958 24.1884C6.65958 24.5714 6.32745 24.8818 5.91909 24.8818C5.50938 24.8818 5.17725 24.5714 5.17725 24.1884C5.17725 23.8068 5.50938 23.4963 5.91909 23.4963Z"
fill="black" stroke="#004743" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M19.9822 23.4963C20.3919 23.4963 20.724 23.8068 20.724 24.1884C20.724 24.5714 20.3919 24.8818 19.9822 24.8818C19.5738 24.8818 19.2417 24.5714 19.2417 24.1884C19.2417 23.8068 19.5738 23.4963 19.9822 23.4963Z"
fill="black" stroke="#004743" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</button>
</a>
<a href="favorites.html">
<button class="favorites-btn">
<svg class="favorites" width="19" height="18" viewBox="0 0 25 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.45022 11.3758C0.151129 7.58508 1.66936 3.2523 5.92743 1.97023C8.16725 1.29469 10.6395 1.693 12.5016 3.00222C14.2632 1.72921 16.8262 1.29921 19.0636 1.97023C23.3217 3.2523 24.8496 7.58508 23.5517 11.3758C21.5299 17.3845 12.5016 22.0126 12.5016 22.0126C12.5016 22.0126 3.53991 17.4546 1.45022 11.3758Z"
stroke="#004743" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path opacity="0.5"
d="M17.3447 5.83313C18.6402 6.22465 19.5555 7.3053 19.6657 8.57379"
stroke="#FBD103" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</button>
</a>
</div>
<div class="profile-management">
<a href="user.html">
<button class="manage-profile-btn">
<svg class="manage-profile" width="18" height="22" viewBox="0 0 22 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.57018 15.4502C4.94779 15.4502 1 16.1032 1 18.7196C1 21.336 4.92374 22.0126 9.57018 22.0126C14.1938 22.0126 18.1404 21.3585 18.1404 18.7432C18.1404 16.1279 14.2178 15.4502 9.57018 15.4502Z"
stroke="#004743" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.57023 11.7185C12.6041 11.7185 15.0632 9.42019 15.0632 6.58461C15.0632 3.74904 12.6041 1.45068 9.57023 1.45068C6.53754 1.45068 4.0784 3.74904 4.0784 6.58461C4.06762 9.41007 6.50868 11.7084 9.53296 11.7185H9.57023Z"
stroke="#004743" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</button>
</a>
</div>
</div>
</div>
<div class="top-menu">
<a href="user.html">
<button class="manage-profile-btn">
<svg class="manage-profile" width="18" height="22" viewBox="0 0 22 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.57018 15.4502C4.94779 15.4502 1 16.1032 1 18.7196C1 21.336 4.92374 22.0126 9.57018 22.0126C14.1938 22.0126 18.1404 21.3585 18.1404 18.7432C18.1404 16.1279 14.2178 15.4502 9.57018 15.4502Z"
stroke="#004743" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.57023 11.7185C12.6041 11.7185 15.0632 9.42019 15.0632 6.58461C15.0632 3.74904 12.6041 1.45068 9.57023 1.45068C6.53754 1.45068 4.0784 3.74904 4.0784 6.58461C4.06762 9.41007 6.50868 11.7084 9.53296 11.7185H9.57023Z"
stroke="#004743" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</a>
<a href="index.html">
<img class="header-logo" src="./assets/images/logo.png" alt="Fashion Era">
</a>
<button class="burger-menu">
<svg class="ham hamRotate ham4 menu-btn" viewBox="0 0 95 95" width="30">
<path
class="line top"
d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20"/>
<path
class="line middle"
d="m 70,50 h -40"/>
<path
class="line bottom"
d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20"/>
</svg>
</button>
</div>
<div class="bottom-menu">
<div class="shopping-btn-container">
<a href="cart.html">
<button class="shopping-cart-btn">
<span class="cart-number-badge">0</span>
<svg class="shopping-cart" width="18" height="19" viewBox="0 0 25 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M3.78227 6.07082C11.0327 4.36956 20.0466 4.47387 22.1299 6.69105C24.2131 8.90824 24.1702 16.322 21.735 18.3562C19.3012 20.3905 8.73155 20.5839 5.38303 18.3562C1.8453 16.0014 3.89797 8.75741 3.78227 4.36956C3.85169 1.91419 1 1.51599 1 1.51599"
stroke="#004743" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.3005 11.5278H19.0751" stroke="#004743" stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.91909 23.4963C6.32745 23.4963 6.65958 23.8068 6.65958 24.1884C6.65958 24.5714 6.32745 24.8818 5.91909 24.8818C5.50938 24.8818 5.17725 24.5714 5.17725 24.1884C5.17725 23.8068 5.50938 23.4963 5.91909 23.4963Z"
fill="black" stroke="#004743" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M19.9822 23.4963C20.3919 23.4963 20.724 23.8068 20.724 24.1884C20.724 24.5714 20.3919 24.8818 19.9822 24.8818C19.5738 24.8818 19.2417 24.5714 19.2417 24.1884C19.2417 23.8068 19.5738 23.4963 19.9822 23.4963Z"
fill="black" stroke="#004743" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</button>
</a>
<a href="favorites.html">
<button class="favorites-btn">
<svg class="favorites" width="19" height="18" viewBox="0 0 25 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.45022 11.3758C0.151129 7.58508 1.66936 3.2523 5.92743 1.97023C8.16725 1.29469 10.6395 1.693 12.5016 3.00222C14.2632 1.72921 16.8262 1.29921 19.0636 1.97023C23.3217 3.2523 24.8496 7.58508 23.5517 11.3758C21.5299 17.3845 12.5016 22.0126 12.5016 22.0126C12.5016 22.0126 3.53991 17.4546 1.45022 11.3758Z"
stroke="#004743" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.5" d="M17.3447 5.83313C18.6402 6.22465 19.5555 7.3053 19.6657 8.57379"
stroke="#FBD103" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</a>
</div>
<div class="search">
<input class="search-input search-icon" type="text" placeholder="Search">
<a href="#" class="search-btn">
<svg class="search-icon" width="24" height="25" viewBox="0 0 28 31" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g opacity="0.6" filter="url(#filter0_d_47_1740)">
<circle cx="12" cy="11" r="7" stroke="#323232" stroke-width="2"/>
<path d="M12 8C11.606 8 11.2159 8.0776 10.8519 8.22836C10.488 8.37913 10.1573 8.6001 9.87868 8.87868C9.6001 9.15726 9.37913 9.48797 9.22836 9.85195C9.0776 10.2159 9 10.606 9 11"
stroke="#323232" stroke-width="2" stroke-linecap="round"/>
<path d="M21 20L18 17" stroke="#323232" stroke-width="2" stroke-linecap="round"/>
</g>
<defs>
<filter id="filter0_d_47_1740" x="-3" y="0" width="32" height="32"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix"
result="effect1_dropShadow_47_1740"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_47_1740"
result="shape"/>
</filter>
</defs>
</svg>
</a>
</div>
</div>
<div class="header-menu">
<nav class="header-nav">
<ul class="header-list">
<li class="list-item"><a href="#">Men</a></li>
<li class="list-item"><a href="#">Women</a></li>
<li class="list-item"><a href="#">Kids</a></li>
<li class="list-item"><a href="#">Winter</a></li>
<li class="list-item"><a href="#">Lifestyle</a></li>
</ul>
</nav>
</div>
</div>
<div class="header-poster">
<div class="poster-img">
<img class="models" src="./assets/images/women.png" alt="female-model">
<img class="bg-photo" src="./assets/images/image%204.png" alt="color">
</div>
<div class="poster-info">
<h3>TRENDING COLLECTION</h3>
<h1>Explore Summer Collection</h1>
<button class="shop-btn">Shop Now</button>
</div>
</div>
</header>
<main>
<div class="benefits-container">
<div class="benefits-1">
<div class="benefits-img">
<img src="./assets/images/icons/FreeShipping.jpg" alt="Free Shipping">
</div>
<div class="benefits-info">
<h4>Free Shipping</h4>
<p>Orders over $100</p>
</div>
</div>
<div class="benefits-2">
<div class="benefits-img">
<img src="./assets/images/icons/SmartGiftCard.jpg" alt="Smart GiftCard">
</div>
<div class="benefits-info">
<h4>Smart Gift Card</h4>
<p>Buy $1000 to get card</p>
</div>
</div>
<div class="benefits-3">
<div class="benefits-img">
<img src="./assets/images/icons/QuickPaymment.jpg" alt="Quick Payment">
</div>
<div class="benefits-info">
<h4>Quick Payment</h4>
<p>100% Secure payment</p>
</div>
</div>
<div class="benefits-4">
<div class="benefits-img">
<img src="./assets/images/icons/24-7Support.jpg" alt="24-7Support">
</div>
<div class="benefits-info">
<h4>24-7Support</h4>
<p>Quick support</p>
</div>
</div>
</div>
<div class="collection-off">
<div class="adults-off">
<div class="womens-off">
<div class="women-off-info off-info">
<h4>Collection For Girls</h4>
<p>Up To <span class="off-color-women">40%</span> Off</p>
<button class="adults-off-btn">Shop Now</button>
</div>
<div class="off-img">
<img src="./assets/images/image%209.png" alt="women-model">
</div>
</div>
<div class="mens-off">
<div class="mens-off-info off-info">
<h4>Collection For Men</h4>
<p>Up To <span class="off-color-mens">40%</span> Off</p>
<button class="adults-off-btn">Shop Now</button>
</div>
<div class="off-img">
<img src="./assets/images/men_small%201.png" alt="men-model">
</div>
</div>
</div>
<div class="kids-off-container">
<div class="kids-off">
<div class="kids-off-img">
<img class="kid-model" src="./assets/images/image%2010.png" alt="child-model">
</div>
<div class="kids-off-info">
<h4>Baby & Kids Fashion</h4>
<div class="kids-sale-info">
<h3>SALE!</h3>
<p>07 to 14 Febuary</p>
</div>
<button class="kids-off-btn">Shop Now</button>
</div>
</div>
</div>
</div>
<div class="new-arrivals">
<div class="arrivals-header">
<h3>New Arrivals</h3>
<p>Check out most promising product bought by our buyers</p>
</div>
<div class="arrivals-filter">
<button class="arrivals-filter-btn btn-active all-btn">All</button>
<button class="arrivals-filter-btn men-btn">Men</button>
<button class="arrivals-filter-btn women-btn">Women</button>
<button class="arrivals-filter-btn kids-btn">Kids</button>
</div>
<section id="splide-1" class="splide arrivals" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<section class="splide__list new-arrivals-list"></section>
<div class="splide__arrows splide__arrows--ltr slider-btn-wrapper">
<button class="splide__arrow splide__arrow--prev left-btn" type="button"
aria-label="Go to last slide"
aria-controls="splide01-track">
<svg class="arrow" width="27" height="17" viewBox="0 0 27 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M2.26904 8.64614L1.56194 7.93903L0.854829 8.64614L1.56194 9.35325L2.26904 8.64614ZM25.0229 9.64614C25.5752 9.64614 26.0229 9.19842 26.0229 8.64614C26.0229 8.09385 25.5752 7.64614 25.0229 7.64614V9.64614ZM9.14655 0.354417L1.56194 7.93903L2.97615 9.35325L10.5608 1.76863L9.14655 0.354417ZM1.56194 9.35325L9.14655 16.9379L10.5608 15.5236L2.97615 7.93903L1.56194 9.35325ZM2.26904 9.64614H25.0229V7.64614H2.26904V9.64614Z"
fill="#323232"/>
</svg>
</button>
<button class="splide__arrow splide__arrow--next right-btn" type="button"
aria-label="Next slide"
aria-controls="splide01-track">
<svg class="arrow" width="25" height="17" viewBox="0 0 27 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M24.731 8.64614L25.4381 7.93903L26.1452 8.64614L25.4381 9.35325L24.731 8.64614ZM1.97711 9.64614C1.42483 9.64614 0.977112 9.19842 0.977112 8.64614C0.977112 8.09385 1.42483 7.64614 1.97711 7.64614V9.64614ZM17.8534 0.354417L25.4381 7.93903L24.0239 9.35325L16.4392 1.76863L17.8534 0.354417ZM25.4381 9.35325L17.8534 16.9379L16.4392 15.5236L24.0239 7.93903L25.4381 9.35325ZM24.731 9.64614H1.97711V7.64614H24.731V9.64614Z"
fill="#323232"/>
</svg>
</button>
</div>
</div>
</section>
</div>
<div class="top-brands-wrapper">
<div class="top-brands">
<div class="top-brands-header">
<h3>Top Brands Deal</h3>
<p>Up To <span>60%</span> off on brands</p>
</div>
<div class="brands-logo">
<div class="nike">
<a href="#">
<img src="./assets/images/nike.png" alt="nike-logo">
</a>
</div>
<div class="h&m">
<a href="#">
<img src="./assets/images/levis.png" alt="levis-logo">
</a>
</div>
<div class="levis">
<a href="#">
<img src="./assets/images/h&m.png" alt="H&M-logo">
</a>
</div>
<div class="polo">
<a href="#">
<img src="./assets/images/polo.png" alt="polo-logo">
</a>
</div>
<div class="puma">
<a href="#">
<img src="./assets/images/puma.png" alt="puma-logo">
</a>
</div>
</div>
</div>
</div>
<div class="trending-collection">
<div class="trending-header">
<h3>Trending Collection</h3>
<p>Check out most promising product bought by our buyers</p>
</div>
<section id="splide-2" class="splide collections" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<section class="splide__list trending-collection-list"></section>
<div class="splide__arrows splide__arrows--ltr slider-btn-wrapper">
<button class="splide__arrow splide__arrow--prev left-btn" type="button"
aria-label="Go to last slide"
aria-controls="splide01-track">
<svg class="arrow" width="27" height="17" viewBox="0 0 27 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M2.26904 8.64614L1.56194 7.93903L0.854829 8.64614L1.56194 9.35325L2.26904 8.64614ZM25.0229 9.64614C25.5752 9.64614 26.0229 9.19842 26.0229 8.64614C26.0229 8.09385 25.5752 7.64614 25.0229 7.64614V9.64614ZM9.14655 0.354417L1.56194 7.93903L2.97615 9.35325L10.5608 1.76863L9.14655 0.354417ZM1.56194 9.35325L9.14655 16.9379L10.5608 15.5236L2.97615 7.93903L1.56194 9.35325ZM2.26904 9.64614H25.0229V7.64614H2.26904V9.64614Z"
fill="#323232"/>
</svg>
</button>
<button class="splide__arrow splide__arrow--next right-btn" type="button"
aria-label="Next slide"
aria-controls="splide01-track">
<svg class="arrow" width="25" height="17" viewBox="0 0 27 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M24.731 8.64614L25.4381 7.93903L26.1452 8.64614L25.4381 9.35325L24.731 8.64614ZM1.97711 9.64614C1.42483 9.64614 0.977112 9.19842 0.977112 8.64614C0.977112 8.09385 1.42483 7.64614 1.97711 7.64614V9.64614ZM17.8534 0.354417L25.4381 7.93903L24.0239 9.35325L16.4392 1.76863L17.8534 0.354417ZM25.4381 9.35325L17.8534 16.9379L16.4392 15.5236L24.0239 7.93903L25.4381 9.35325ZM24.731 9.64614H1.97711V7.64614H24.731V9.64614Z"
fill="#323232"/>
</svg>
</button>
</div>
</div>
</section>
</div>
</main>
<div class="reviews-wrapper">
<div class="reviews-header">
<h3>Reviews</h3>
<p>This is what our customers have to say</p>
</div>
<div id="splide-3" class="splide reviews">
<div class="splide__track user-review">
<div class="reviews__arrow splide__arrows splide__arrows--ltr slider-btn-wrapper">
<button class="splide__arrow splide__arrow--prev left-btn" type="button"
aria-label="Go to last slide"
aria-controls="splide01-track">
<svg class="arrow" width="27" height="17" viewBox="0 0 27 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M2.26904 8.64614L1.56194 7.93903L0.854829 8.64614L1.56194 9.35325L2.26904 8.64614ZM25.0229 9.64614C25.5752 9.64614 26.0229 9.19842 26.0229 8.64614C26.0229 8.09385 25.5752 7.64614 25.0229 7.64614V9.64614ZM9.14655 0.354417L1.56194 7.93903L2.97615 9.35325L10.5608 1.76863L9.14655 0.354417ZM1.56194 9.35325L9.14655 16.9379L10.5608 15.5236L2.97615 7.93903L1.56194 9.35325ZM2.26904 9.64614H25.0229V7.64614H2.26904V9.64614Z"
fill="#323232"/>
</svg>
</button>
<button class="splide__arrow splide__arrow--next right-btn" type="button"
aria-label="Next slide"
aria-controls="splide01-track">
<svg class="arrow" width="25" height="17" viewBox="0 0 27 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M24.731 8.64614L25.4381 7.93903L26.1452 8.64614L25.4381 9.35325L24.731 8.64614ZM1.97711 9.64614C1.42483 9.64614 0.977112 9.19842 0.977112 8.64614C0.977112 8.09385 1.42483 7.64614 1.97711 7.64614V9.64614ZM17.8534 0.354417L25.4381 7.93903L24.0239 9.35325L16.4392 1.76863L17.8534 0.354417ZM25.4381 9.35325L17.8534 16.9379L16.4392 15.5236L24.0239 7.93903L25.4381 9.35325ZM24.731 9.64614H1.97711V7.64614H24.731V9.64614Z"
fill="#323232"/>
</svg>
</button>
</div>
<div class="splide__list">
<div class="splide__slide review-slide">
<div class="user-photo">
<img src="./assets/images/user.png" alt="user-photo">
</div>
<div class="review-text">
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have
suffered
alteration in some form, by injected humour, or randomised words which don't look even
slightly
believable. If you are going to use a passage of Lorem Ipsum.
</p>
<div class="user-name">Sameer Jain</div>
</div>
</div>
<div class="splide__slide review-slide">
<div class="user-photo">
<img src="./assets/images/user.png" alt="user-photo">
</div>
<div class="review-text">
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have
suffered
alteration in some form, by injected humour, or randomised words which don't look even
slightly
believable. If you are going to use a passage of Lorem Ipsum.
</p>
<div class="user-name">Alexandro</div>
</div>
</div>
<div class="splide__slide review-slide">
<div class="user-photo">
<img src="./assets/images/user.png" alt="user-photo">
</div>
<div class="review-text">
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have
suffered
alteration in some form, by injected humour, or randomised words which don't look even
slightly
believable. If you are going to use a passage of Lorem Ipsum.
</p>
<div class="user-name">John Mata</div>
</div>
</div>
<div class="splide__slide review-slide">
<div class="user-photo">
<img src="./assets/images/user.png" alt="user-photo">
</div>
<div class="review-text">
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have
suffered
alteration in some form, by injected humour, or randomised words which don't look even
slightly
believable. If you are going to use a passage of Lorem Ipsum.
</p>
<div class="user-name">David Ernest</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="subscribe-form">
<div class="subscribe-header">
<img src="./assets/images/mail-icon.png" alt="mail">
<h3>Subscribe Newsletter</h3>
<p>Subscribe to our email and get updates right in your inbox</p>
</div>
<form>
<div class="subscribe-input-wrapper">
<input class="subscribe-input" type="text" placeholder="Enter Your Email" required>
<a href="#">
<button>
<svg class="paper-plane" width="52" height="52" viewBox="-10 -15 80 80" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M23.6899 31.3809L33.182 46.7805C33.5973 47.4554 34.2462 47.4476 34.5083 47.4113C34.7705 47.3749 35.4012 47.214 35.6296 46.4483L47.4992 6.35948C47.7069 5.65088 47.3253 5.1681 47.154 4.9968C46.9879 4.82549 46.5129 4.45951 45.8251 4.65418L5.70771 16.4018C4.9472 16.625 4.78108 17.2635 4.74475 17.5257C4.70841 17.793 4.69803 18.4549 5.37028 18.878L20.9464 28.6192L34.7082 14.7121C35.4635 13.949 36.6964 13.9412 37.4621 14.6965C38.2278 15.4518 38.233 16.6873 37.4777 17.4504L23.6899 31.3809ZM34.3059 51.3202C32.4993 51.3202 30.8434 50.4014 29.8674 48.8233L19.8043 32.4944L3.30679 22.177C1.52882 21.0635 0.599596 19.0804 0.887706 16.9962C1.17322 14.9119 2.60339 13.2559 4.61237 12.6668L44.7297 0.919131C46.5752 0.379249 48.553 0.89058 49.9131 2.24548C51.2732 3.61335 51.7794 5.61195 51.2291 7.4652L39.3595 47.5514C38.7651 49.5682 37.1039 50.9932 35.0248 51.2709C34.7809 51.302 34.5447 51.3202 34.3059 51.3202Z"
fill="#323232"/>
</svg>
</button>
</a>
</div>
</form>
<div class="social-network">
<button class="facebook">
<svg width="15" height="20" viewBox="0 0 15 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.1965 13.6515L13.8764 9.2673H9.62541V6.42229C9.62541 5.22287 10.2192 4.05373 12.1231 4.05373H14.0557V0.321091C14.0557 0.321091 12.302 0.0249023 10.6252 0.0249023C7.12434 0.0249023 4.83604 2.12472 4.83604 5.92596V9.2673H0.94458V13.6515H4.83604V24.2499H9.62541V13.6515H13.1965Z"
fill="black"/>
</svg>
</button>
<button class="instagram">
<svg width="15" height="20" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.1499 5.34485C8.25379 5.34485 5.91781 7.64433 5.91781 10.4952C5.91781 13.346 8.25379 15.6454 11.1499 15.6454C14.0459 15.6454 16.3819 13.346 16.3819 10.4952C16.3819 7.64433 14.0459 5.34485 11.1499 5.34485ZM11.1499 13.8435C9.27834 13.8435 7.74834 12.3419 7.74834 10.4952C7.74834 8.64839 9.27378 7.14678 11.1499 7.14678C13.0259 7.14678 14.5514 8.64839 14.5514 10.4952C14.5514 12.3419 13.0214 13.8435 11.1499 13.8435ZM17.8163 5.13418C17.8163 5.80206 17.2699 6.33547 16.5959 6.33547C15.9174 6.33547 15.3756 5.79758 15.3756 5.13418C15.3756 4.47078 15.922 3.93289 16.5959 3.93289C17.2699 3.93289 17.8163 4.47078 17.8163 5.13418ZM21.2815 6.3534C21.2041 4.74421 20.8307 3.3188 19.6332 2.14441C18.4401 0.970012 16.9921 0.602454 15.3574 0.52177C13.6725 0.427639 8.62262 0.427639 6.9378 0.52177C5.30763 0.597971 3.85959 0.965529 2.662 2.13992C1.46442 3.31432 1.09558 4.73973 1.01361 6.34891C0.917988 8.00741 0.917988 12.9784 1.01361 14.6369C1.09102 16.2461 1.46442 17.6715 2.662 18.8459C3.85959 20.0203 5.30307 20.3878 6.9378 20.4685C8.62262 20.5627 13.6725 20.5627 15.3574 20.4685C16.9921 20.3923 18.4401 20.0248 19.6332 18.8459C20.8262 17.6715 21.1996 16.2461 21.2815 14.6369C21.3772 12.9784 21.3772 8.01189 21.2815 6.3534ZM19.1049 16.4164C18.7498 17.295 18.0622 17.9718 17.1651 18.3259C15.8218 18.8504 12.6343 18.7294 11.1499 18.7294C9.66539 18.7294 6.47334 18.8459 5.13459 18.3259C4.24209 17.9763 3.5545 17.2995 3.19477 16.4164C2.662 15.0941 2.78495 11.9564 2.78495 10.4952C2.78495 9.03388 2.66656 5.89171 3.19477 4.57388C3.54995 3.69532 4.23754 3.01848 5.13459 2.66437C6.47789 2.13992 9.66539 2.26095 11.1499 2.26095C12.6343 2.26095 15.8264 2.14441 17.1651 2.66437C18.0576 3.01399 18.7452 3.69084 19.1049 4.57388C19.6377 5.89619 19.5148 9.03388 19.5148 10.4952C19.5148 11.9564 19.6377 15.0986 19.1049 16.4164Z"
fill="black"/>
</svg>
</button>
<button class="twitter">
<svg width="15" height="20" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.9066 5.06111C20.9212 5.25798 20.9212 5.45489 20.9212 5.65175C20.9212 11.6564 16.1885 18.5752 7.53854 18.5752C4.87364 18.5752 2.39808 17.8298 0.315674 16.5361C0.694305 16.5783 1.05832 16.5924 1.45152 16.5924C3.65038 16.5924 5.67456 15.8752 7.29097 14.6518C5.22313 14.6096 3.49023 13.3018 2.89316 11.5017C3.18443 11.5439 3.47566 11.572 3.78149 11.572C4.20378 11.572 4.62612 11.5158 5.01927 11.4174C2.86407 10.9955 1.24762 9.16737 1.24762 6.95956V6.90333C1.87377 7.24083 2.60194 7.45177 3.37368 7.47986C2.10677 6.66422 1.27675 5.27205 1.27675 3.69704C1.27675 2.8533 1.50971 2.07987 1.91747 1.40486C4.23288 4.16111 7.71326 5.96108 11.6159 6.15799C11.5431 5.82048 11.4994 5.46896 11.4994 5.11739C11.4994 2.61423 13.5964 0.575195 16.203 0.575195C17.5573 0.575195 18.7805 1.12363 19.6397 2.00957C20.7027 1.8127 21.722 1.433 22.6249 0.912698C22.2754 1.96741 21.5327 2.85335 20.5571 3.41581C21.5037 3.31742 22.4211 3.06424 23.2657 2.71271C22.625 3.61267 21.8241 4.4142 20.9066 5.06111Z"
fill="black"/>
</svg>
</button>
</div>
</div>
<footer>
<div class="footer-container">
<div class="footer-info">
<div class="footer-logo-wrapper">
<a href="index.html">
<img src="./assets/images/logo.png" alt="logo">
</a>
</div>
<div class="footer-info-text">
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered
alteration in some.
</p>
</div>
</div>
<div class="footer-help">
<nav class="help-nav">
<div class="help-header">
<h5>Help</h5>
</div>
<ul class="help-list">
<li class="help-list-item">
<a href="#">
Privacy Policy
</a>
</li>
<li class="help-list-item">
<a href="#">
Shipping & Delivery
</a>
</li>
<li class="help-list-item">
<a href="#">
Refund Policy
</a>
</li>
<li class="help-list-item">
<a href="#">
Track Your Order
</a>
</li>
</ul>
</nav>
</div>
<div class="footer-store">
<nav class="store-nav">
<div class="store-header">
<h5>Store</h5>
</div>
<ul class="store-list">
<li class="store-list-item">
<a href="#">
Men Fashion
</a>
</li>
<li class="store-list-item">
<a href="#">
Women Fashion
</a>
</li>
<li class="store-list-item">
<a href="#">
Kids Fashion
</a>
</li>
<li class="store-list-item">
<a href="#">
Other
</a>
</li>
</ul>
</nav>
</div>
<div class="footer-support">
<nav class="support-nav">
<div class="support-header">
<h5>Support</h5>
</div>
<ul class="support-list">
<li class="support-list-item">
<a href="#">
Feedback
</a>
</li>
<li class="support-list-item">
<a href="#">
Contact us
</a>
</li>
<li class="support-list-item">
<a href="#">
Download app
</a>
</li>
<li class="support-list-item">
<a href="#">
Terms & condition
</a>
</li>
</ul>
</nav>
</div>
</div>
</footer>
</div>
</body>
</html>