-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1944 lines (1902 loc) · 147 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
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- css links -->
<link rel="stylesheet" href="styles/app.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>
<title>Kicks</title>
</head>
<body>
<header class="header">
<div class="container">
<!-- nav -->
<nav class="nav">
<!-- logo -->
<div class="logo">
<a href="#" class="logo__link">
<svg
class="logo__img"
width="49"
height="48"
viewBox="0 0 49 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M13 9L0 22V0H13V9Z" fill="#FF3C78" />
<path d="M13.5 48H0V31L30 1H48L13.5 35.5V48Z" fill="#FF3C78" />
<path
d="M29.5 29L20.5 38L29.5 47.5H48L29.5 29Z"
fill="#FF3C78"
/>
</svg>
</a>
</div>
<!-- menu -->
<ul class="menu">
<li class="menu__item">
<a href="#" class="menu__link menu__link--active">Footwear</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">About us</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Products</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Sale</a>
</li>
</ul>
<!-- header feature -->
<div class="nav__feature">
<div class="nav__icon">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
stroke="#0A083A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M21 21.0004L16.65 16.6504"
stroke="#0A083A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="nav__icon nav__icon-user">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"
stroke="#0A083A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
stroke="#0A083A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="nav__icon nav__icon-shop">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 2L3 6V20C3 20.5304 3.21071 21.0391 3.58579 21.4142C3.96086 21.7893 4.46957 22 5 22H19C19.5304 22 20.0391 21.7893 20.4142 21.4142C20.7893 21.0391 21 20.5304 21 20V6L18 2H6Z"
stroke="#0A083A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M3 6H21"
stroke="#0A083A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16 10C16 11.0609 15.5786 12.0783 14.8284 12.8284C14.0783 13.5786 13.0609 14 12 14C10.9391 14 9.92172 13.5786 9.17157 12.8284C8.42143 12.0783 8 11.0609 8 10"
stroke="#0A083A"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<div class="nav__btn"></div>
</nav>
<!-- hero -->
<section class="hero">
<div class="hero__content">
<h1 class="hero__title big-title">Get your awesome sneakers.</h1>
<p class="hero__caption">
We offer the best deals in our shop. Check them out now. We have
awesome stuff on sale for you.
</p>
<div class="hero__wrapper">
<div class="hero__btn">
<a href="#" class="btn btn--magenta hero__link">Shop Now</a>
<svg
class="hero__heart"
width="24"
height="22"
viewBox="0 0 24 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.84 3.60987C20.3292 3.09888 19.7228 2.69352 19.0554 2.41696C18.3879 2.14039 17.6725 1.99805 16.95 1.99805C16.2275 1.99805 15.5121 2.14039 14.8446 2.41696C14.1772 2.69352 13.5708 3.09888 13.06 3.60987L12 4.66987L10.94 3.60987C9.9083 2.57818 8.50903 1.99858 7.05 1.99858C5.59096 1.99858 4.19169 2.57818 3.16 3.60987C2.1283 4.64156 1.54871 6.04084 1.54871 7.49987C1.54871 8.95891 2.1283 10.3582 3.16 11.3899L4.22 12.4499L12 20.2299L19.78 12.4499L20.84 11.3899C21.351 10.8791 21.7563 10.2727 22.0329 9.60523C22.3095 8.93777 22.4518 8.22236 22.4518 7.49987C22.4518 6.77738 22.3095 6.06198 22.0329 5.39452C21.7563 4.72706 21.351 4.12063 20.84 3.60987V3.60987Z"
stroke="#FF3C78"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="hero__free-wrapper">
<div class="hero__free">
<span class="hero__tik"
><svg
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.1666 4.25L6.37492 12.0417L2.83325 8.5"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
Free shipping
</div>
<div class="hero__free">
<span class="hero__tik"
><svg
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.1666 4.25L6.37492 12.0417L2.83325 8.5"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
Free returns
</div>
</div>
</div>
</div>
<div class="hero__banner">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide hero__slide">
<img
src="images/orange-shoes-1.png"
alt=""
class="swiper-item-img"
/>
<div class="header-comment header-comment--bottom">
<div class="header-comment__profile">
<img
class="header-comment__img"
src="images/header-comment.png"
alt=""
/>
</div>
<div class="header-comment__content">
<span class="header-comment__name">Joan</span> has just
purchased these sneakers now.
</div>
<div class="header-comment__lock">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.6667 7.33301H3.33333C2.59695 7.33301 2 7.92996 2 8.66634V13.333C2 14.0694 2.59695 14.6663 3.33333 14.6663H12.6667C13.403 14.6663 14 14.0694 14 13.333V8.66634C14 7.92996 13.403 7.33301 12.6667 7.33301Z"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M4.66666 7.33301V4.66634C4.66666 3.78229 5.01785 2.93444 5.64297 2.30932C6.26809 1.6842 7.11594 1.33301 8 1.33301C8.88405 1.33301 9.7319 1.6842 10.357 2.30932C10.9821 2.93444 11.3333 3.78229 11.3333 4.66634V7.33301"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</div>
<div class="swiper-slide hero__slide">
<img
src="images/image 6.png"
alt=""
class="swiper-item-img"
/>
<div class="header-comment header-comment--top">
<div class="header-comment__profile">
<img
class="header-comment__img"
src="images/header-comment.png"
alt=""
/>
</div>
<div class="header-comment__content">
<span class="header-comment__name">Joan</span> has just
purchased these sneakers now.
</div>
<div class="header-comment__lock">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.6667 7.33301H3.33333C2.59695 7.33301 2 7.92996 2 8.66634V13.333C2 14.0694 2.59695 14.6663 3.33333 14.6663H12.6667C13.403 14.6663 14 14.0694 14 13.333V8.66634C14 7.92996 13.403 7.33301 12.6667 7.33301Z"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M4.66666 7.33301V4.66634C4.66666 3.78229 5.01785 2.93444 5.64297 2.30932C6.26809 1.6842 7.11594 1.33301 8 1.33301C8.88405 1.33301 9.7319 1.6842 10.357 2.30932C10.9821 2.93444 11.3333 3.78229 11.3333 4.66634V7.33301"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</div>
<div class="swiper-slide hero__slide">
<img
src="images/red-shoes.png"
alt=""
class="swiper-item-img"
height="100%"
/>
<div class="header-comment header-comment--right">
<div class="header-comment__profile">
<img
class="header-comment__img"
src="images/header-comment.png"
alt=""
/>
</div>
<div class="header-comment__content">
<span class="header-comment__name">Joan</span> has just
purchased these sneakers now.
</div>
<div class="header-comment__lock">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.6667 7.33301H3.33333C2.59695 7.33301 2 7.92996 2 8.66634V13.333C2 14.0694 2.59695 14.6663 3.33333 14.6663H12.6667C13.403 14.6663 14 14.0694 14 13.333V8.66634C14 7.92996 13.403 7.33301 12.6667 7.33301Z"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M4.66666 7.33301V4.66634C4.66666 3.78229 5.01785 2.93444 5.64297 2.30932C6.26809 1.6842 7.11594 1.33301 8 1.33301C8.88405 1.33301 9.7319 1.6842 10.357 2.30932C10.9821 2.93444 11.3333 3.78229 11.3333 4.66634V7.33301"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</div>
</div>
<div class="swiper-button">
<div class="swiper-button-prev">
<svg
class="swiper-button-prev__icon"
width="34"
height="35"
viewBox="0 0 34 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.9999 32.0257C24.824 32.0257 31.1666 25.6831 31.1666 17.8591C31.1666 10.035 24.824 3.69238 16.9999 3.69238C9.17588 3.69238 2.83325 10.035 2.83325 17.8591C2.83325 25.6831 9.17588 32.0257 16.9999 32.0257Z"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.9999 12.1924L11.3333 17.859L16.9999 23.5257"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22.6666 17.8594H11.3333"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="swiper-button-next">
<svg
class="swiper-button-next__icon"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 36.6663C10.7953 36.6663 3.33333 29.2044 3.33333 19.9997C3.33333 10.7949 10.7953 3.33301 20 3.33301C29.2047 3.33301 36.6667 10.7949 36.6667 19.9997C36.6667 29.2044 29.2047 36.6663 20 36.6663Z"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 13.333L26.6667 19.9997L20 26.6663"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M13.3333 20H26.6667"
stroke="#315BFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
</div>
</header>
<main class="main">
<!-- featured -->
<section class="featured">
<div class="container">
<div class="featured__heading">
<h2 class="featured__title big-title">Featured products</h2>
<a href="#" class="featured__view-all-desk"
>View all
<svg
width="8"
height="14"
viewBox="0 0 8 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 13L7 7L1 1"
stroke="#FF3C78"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
</div>
<ul class="featured__products">
<li class="product product--orange">
<div class="product__banner">
<img
class="product__img"
src="images/featured-products/image-1.png"
alt=""
/>
<div class="product__plus-icon"></div>
</div>
<div class="product__stars">
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.62143 0.620877C5.86211 -0.119841 6.91003 -0.119842 7.1507 0.620875L8.07078 3.4526C8.17842 3.78386 8.48711 4.00814 8.83542 4.00814H11.8129C12.5917 4.00814 12.9155 5.00477 12.2854 5.46256L9.87663 7.21266C9.59484 7.41739 9.47693 7.78028 9.58456 8.11154L10.5046 10.9433C10.7453 11.684 9.89754 12.2999 9.26744 11.8421L6.85864 10.092C6.57685 9.88731 6.19528 9.88731 5.9135 10.092L3.50469 11.8421C2.8746 12.2999 2.02681 11.684 2.26749 10.9433L3.18757 8.11154C3.2952 7.78028 3.17729 7.41739 2.89551 7.21266L0.486697 5.46256C-0.143395 5.00477 0.180428 4.00814 0.959265 4.00814H3.93672C4.28502 4.00814 4.59372 3.78386 4.70135 3.4526L5.62143 0.620877Z"
fill="#C1C0C0"
/>
</svg>
</div>
<a href="#" class="product__title">
Adidas Falcon Shoes for men - 2021 Edition
</a>
<div class="product__price price">$120.50</div>
</li>
<li class="product product--green">
<div class="product__banner">
<img
class="product__img"
src="images/featured-products/image-2.png"
alt=""
/>
<div class="product__plus-icon"></div>
</div>
<div class="product__stars">
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.62143 0.620877C5.86211 -0.119841 6.91003 -0.119842 7.1507 0.620875L8.07078 3.4526C8.17842 3.78386 8.48711 4.00814 8.83542 4.00814H11.8129C12.5917 4.00814 12.9155 5.00477 12.2854 5.46256L9.87663 7.21266C9.59484 7.41739 9.47693 7.78028 9.58456 8.11154L10.5046 10.9433C10.7453 11.684 9.89754 12.2999 9.26744 11.8421L6.85864 10.092C6.57685 9.88731 6.19528 9.88731 5.9135 10.092L3.50469 11.8421C2.8746 12.2999 2.02681 11.684 2.26749 10.9433L3.18757 8.11154C3.2952 7.78028 3.17729 7.41739 2.89551 7.21266L0.486697 5.46256C-0.143395 5.00477 0.180428 4.00814 0.959265 4.00814H3.93672C4.28502 4.00814 4.59372 3.78386 4.70135 3.4526L5.62143 0.620877Z"
fill="#C1C0C0"
/>
</svg>
</div>
<a href="#" class="product__title">
Adidas Falcon Shoes for men - 2021 Edition
</a>
<div class="product__price price">$160.50</div>
</li>
<li class="product product--magenta">
<div class="product__banner">
<img
class="product__img"
src="images/featured-products/image-3.png"
alt=""
/>
<div class="product__plus-icon"></div>
</div>
<div class="product__stars">
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.62143 0.620877C5.86211 -0.119841 6.91003 -0.119842 7.1507 0.620875L8.07078 3.4526C8.17842 3.78386 8.48711 4.00814 8.83542 4.00814H11.8129C12.5917 4.00814 12.9155 5.00477 12.2854 5.46256L9.87663 7.21266C9.59484 7.41739 9.47693 7.78028 9.58456 8.11154L10.5046 10.9433C10.7453 11.684 9.89754 12.2999 9.26744 11.8421L6.85864 10.092C6.57685 9.88731 6.19528 9.88731 5.9135 10.092L3.50469 11.8421C2.8746 12.2999 2.02681 11.684 2.26749 10.9433L3.18757 8.11154C3.2952 7.78028 3.17729 7.41739 2.89551 7.21266L0.486697 5.46256C-0.143395 5.00477 0.180428 4.00814 0.959265 4.00814H3.93672C4.28502 4.00814 4.59372 3.78386 4.70135 3.4526L5.62143 0.620877Z"
fill="#C1C0C0"
/>
</svg>
</div>
<a href="#" class="product__title">
Adidas Falcon Shoes for men - 2021 Edition
</a>
<div class="product__price price">$220.50</div>
</li>
<li class="product product--blue">
<div class="product__banner">
<img
class="product__img"
src="images/featured-products/image-4.png"
alt=""
/>
<div class="product__plus-icon"></div>
</div>
<div class="product__stars">
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.54319 0.620876C5.78386 -0.119841 6.83178 -0.119842 7.07245 0.620875L7.99254 3.4526C8.10017 3.78386 8.40886 4.00814 8.75717 4.00814H11.7346C12.5135 4.00814 12.8373 5.00477 12.2072 5.46256L9.79838 7.21266C9.51659 7.41739 9.39868 7.78028 9.50632 8.11154L10.4264 10.9433C10.6671 11.684 9.81929 12.2999 9.1892 11.8421L6.78039 10.092C6.4986 9.88731 6.11704 9.88731 5.83525 10.092L3.42644 11.8421C2.79635 12.2999 1.94856 11.684 2.18924 10.9433L3.10932 8.11154C3.21695 7.78028 3.09904 7.41739 2.81726 7.21266L0.40845 5.46256C-0.221642 5.00477 0.102181 4.00814 0.881018 4.00814H3.85847C4.20678 4.00814 4.51547 3.78386 4.6231 3.4526L5.54319 0.620876Z"
fill="#FE7831"
/>
</svg>
<svg
width="13"
height="12"
viewBox="0 0 13 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.62143 0.620877C5.86211 -0.119841 6.91003 -0.119842 7.1507 0.620875L8.07078 3.4526C8.17842 3.78386 8.48711 4.00814 8.83542 4.00814H11.8129C12.5917 4.00814 12.9155 5.00477 12.2854 5.46256L9.87663 7.21266C9.59484 7.41739 9.47693 7.78028 9.58456 8.11154L10.5046 10.9433C10.7453 11.684 9.89754 12.2999 9.26744 11.8421L6.85864 10.092C6.57685 9.88731 6.19528 9.88731 5.9135 10.092L3.50469 11.8421C2.8746 12.2999 2.02681 11.684 2.26749 10.9433L3.18757 8.11154C3.2952 7.78028 3.17729 7.41739 2.89551 7.21266L0.486697 5.46256C-0.143395 5.00477 0.180428 4.00814 0.959265 4.00814H3.93672C4.28502 4.00814 4.59372 3.78386 4.70135 3.4526L5.62143 0.620877Z"
fill="#C1C0C0"
/>
</svg>
</div>
<a href="#" class="product__title">
Adidas Falcon Shoes for men - 2021 Edition
</a>
<div class="product__price price">$430.50</div>
</li>
</ul>
<a href="#" class="featured__view-all-mob">
View all
<svg
width="8"
height="14"
viewBox="0 0 8 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 13L7 7L1 1"
stroke="#FF3C78"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
</div>
</section>
<!-- accesories -->
<section class="accesories">
<div class="container">
<div class="accesories__wrapper">
<div class="accesories__football">
<div class="accesories__banner">
<img src="images/football.png" alt="" class="accesories__img" />
<svg
width="170"
height="169"
viewBox="0 0 170 169"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.9">
<g opacity="0.9">
<path
opacity="0.9"
d="M28.7993 97.8993C30.4008 98.9364 30.8622 101.076 29.8255 102.68C28.7888 104.283 26.6483 104.746 25.0436 103.708C23.4401 102.672 22.9795 100.531 24.0162 98.9271C25.0529 97.3236 27.1959 96.8626 28.7993 97.8993Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M41.1917 78.7913C42.7964 79.8287 43.256 81.9688 42.2187 83.5736C41.1821 85.1772 39.04 85.6372 37.4372 84.5995C35.8336 83.5629 35.3732 81.4239 36.4106 79.8191C37.4471 78.2156 39.5881 77.7548 41.1917 78.7913Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M53.483 59.5179C55.0877 60.5552 55.5474 62.6954 54.5108 64.299C53.4734 65.9037 51.3333 66.3634 49.7285 65.326C48.1249 64.2894 47.6653 62.1493 48.7019 60.5457C49.7392 58.9409 51.8794 58.4813 53.483 59.5179Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M65.8754 40.4097C67.4806 41.449 67.9406 43.586 66.9045 45.1915C65.8667 46.7943 63.7258 47.2552 62.121 46.2178C60.5174 45.1812 60.0578 43.0411 61.0944 41.4375C62.1317 39.8327 64.2719 39.3731 65.8754 40.4097Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M78.2302 21.3292C79.8318 22.3662 80.2934 24.506 79.256 26.1107C78.2195 27.7143 76.0785 28.1751 74.4757 27.1373C72.8734 26.1015 72.4106 23.961 73.4479 22.3563C74.4845 20.7527 76.6266 20.2926 78.2302 21.3292Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M45.4628 108.656C47.0676 109.693 47.528 111.832 46.4899 113.438C45.4533 115.041 43.3131 115.501 41.7084 114.464C40.1048 113.427 39.6444 111.288 40.6818 109.683C41.7191 108.079 43.8593 107.619 45.4628 108.656Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M57.8151 89.5736C59.4198 90.6109 59.8802 92.7499 58.8429 94.3546C57.8055 95.9594 55.6654 96.419 54.0606 95.3817C52.457 94.3451 51.9974 92.2049 53.034 90.6014C54.0713 88.9966 56.2115 88.537 57.8151 89.5736Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M70.1064 70.3001C71.71 71.3367 72.1716 73.4764 71.1343 75.0812C70.0977 76.6848 67.9555 77.1448 66.352 76.1082C64.7504 75.0712 64.2888 72.9315 65.3261 71.3267C66.3627 69.7232 68.5049 69.2631 70.1064 70.3001Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M82.5002 51.1927C84.105 52.23 84.5646 54.3702 83.5273 55.975C82.4907 57.5785 80.3486 58.0386 78.7458 57.0008C77.1422 55.9642 76.6818 53.8253 77.7192 52.2205C78.7557 50.6169 80.8967 50.1561 82.5002 51.1927Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M94.8938 32.0853C96.4986 33.1226 96.959 35.2616 95.9208 36.8676C94.8843 38.4711 92.7441 38.9307 91.1393 37.8934C89.5358 36.8568 89.0754 34.7179 90.1127 33.1131C91.1493 31.5095 93.2902 31.0487 94.8938 32.0853Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M62.0861 119.438C63.6908 120.475 64.1512 122.614 63.1139 124.219C62.0773 125.822 59.9364 126.283 58.3316 125.246C56.728 124.209 56.2684 122.069 57.305 120.466C58.3423 118.861 60.4845 118.401 62.0861 119.438Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M74.4796 100.331C76.083 101.37 76.5426 103.508 75.5075 105.113C74.4712 106.717 72.3292 107.177 70.7262 106.14C69.1224 105.103 68.6612 102.963 69.6987 101.36C70.7337 99.7551 72.8758 99.2947 74.4796 100.331Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M86.7701 81.0562C88.3749 82.0935 88.8345 84.2337 87.7983 85.8392C86.7606 87.442 84.6216 87.9024 83.0156 86.8643C81.4133 85.8285 80.9517 83.6888 81.9894 82.086C83.0256 80.4804 85.1665 80.0196 86.7701 81.0562Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M99.1649 61.9495C100.77 62.9869 101.23 65.1258 100.192 66.7318C99.1562 68.3342 97.0152 68.795 95.4105 67.7577C93.8069 66.7211 93.3473 64.5809 94.3838 62.9773C95.4212 61.3726 97.5614 60.913 99.1649 61.9495Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M111.56 42.8416C113.161 43.8788 113.623 46.0186 112.586 47.622C111.549 49.2255 109.408 49.6874 107.804 48.6506C106.201 47.6139 105.74 45.4729 106.777 43.8695C107.813 42.266 109.954 41.8054 111.56 42.8416Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M78.7511 130.195C80.3559 131.232 80.8155 133.372 79.7781 134.977C78.7416 136.58 76.5994 137.041 74.9966 136.003C73.3931 134.966 72.9327 132.827 73.97 131.222C75.0066 129.619 77.1463 129.157 78.7511 130.195Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M91.1436 111.085C92.7488 112.125 93.2088 114.262 92.1727 115.867C91.1341 117.471 88.9951 117.932 87.3892 116.894C85.7856 115.857 85.3252 113.718 86.3626 112.113C87.3991 110.51 89.5401 110.049 91.1436 111.085Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M103.435 91.813C105.04 92.8504 105.5 94.9893 104.464 96.5949C103.426 98.1977 101.285 98.6585 99.6805 97.6211C98.0769 96.5846 97.6173 94.4444 98.6539 92.8408C99.6912 91.2361 101.833 90.776 103.435 91.813Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M115.831 72.7062C117.434 73.7439 117.894 75.8829 116.857 77.4877C115.82 79.0912 113.679 79.5521 112.077 78.5143C110.471 77.4781 110.011 75.338 111.048 73.7344C112.085 72.1296 114.226 71.6688 115.831 72.7062Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M128.182 53.6234C129.787 54.6607 130.247 56.8009 129.209 58.4056C128.173 60.0092 126.03 60.4693 124.428 59.4315C122.824 58.3949 122.364 56.2559 123.401 54.6512C124.438 53.0476 126.577 52.586 128.182 53.6234Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M95.4155 140.951C97.0197 141.989 97.4805 144.128 96.4442 145.732C95.4067 147.335 93.2659 147.796 91.6621 146.76C90.0583 145.724 89.5979 143.582 90.6342 141.978C91.6704 140.374 93.8125 139.914 95.4155 140.951Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M107.768 121.868C109.37 122.907 109.831 125.045 108.795 126.651C107.758 128.252 105.617 128.715 104.013 127.677C102.409 126.64 101.948 124.5 102.985 122.896C104.022 121.293 106.165 120.832 107.768 121.868Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M120.061 102.596C121.662 103.633 122.124 105.773 121.086 107.377C120.05 108.981 117.908 109.441 116.306 108.404C114.703 107.367 114.241 105.228 115.278 103.623C116.315 102.019 118.457 101.559 120.061 102.596Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M132.452 83.4868C134.057 84.5262 134.517 86.6632 133.48 88.2699C132.443 89.8727 130.304 90.3331 128.698 89.295C127.095 88.2592 126.634 86.1194 127.671 84.5147C128.708 82.9099 130.848 82.4503 132.452 83.4868Z"
fill="white"
/>
</g>
<g opacity="0.9">
<path
opacity="0.9"
d="M144.846 64.3794C146.451 65.4187 146.911 67.5557 145.875 69.1613C144.837 70.7641 142.696 71.2249 141.091 70.1875C139.489 69.1517 139.028 67.0108 140.065 65.4072C141.102 63.8025 143.244 63.3424 144.846 64.3794Z"
fill="white"
/>
</g>
</g>
</svg>
</div>
<div class="accesories__content accesories__content--bgGreen">
<p class="accesories__name">Accesories</p>
<h2 class="accesories__title big-title">Football</h2>
<p class="accesories__caption">
We receive new sportwear every day. Just take your pick.
</p>
<a href="#" class="accesories__link btn btn--darkBlue"
>Shop Now</a
>
</div>
</div>
<div class="accesories__volleyball">
<div class="accesories__banner">
<img src="images/volley.png" alt="" class="accesories__img" />
<svg
width="170"