-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
2054 lines (1656 loc) · 89.5 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">
<title>site 2 with html, css and javaScript</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<script src="https://kit.fontawesome.com/b49d9bb7a2.js" crossorigin="anonymous"></script>
</head>
<body id="comeHere">
<!-- scroll to top -->
<a href="#comeHere" class="goToTop"><img src="icons/goToTop/download.svg" alt=""></a>
<!-- upper buy now section -->
<div class="topBuyNow">
<img src="https://public-assets.envato-static.com/assets/logos/envato_market-a5ace93f8482e885ae008eb481b9451d379599dfed24868e52b6b2d66f5cf633.svg"
alt="">
<button>
<a href="">Buy now</a>
</button>
</div>
<!-- red line of offer -->
<div class="offer">
<p>Limited-Time Offers : 1st time Buyer? Use "ONE" Promocode To Instantly Get 50% Off!</p>
</div>
<!-- navigationi bar -->
<div class="navigationBar">
<!-- logo -->
<img src="https://demo.codezeel.com/prestashop/PRS18/PRS180433/img/logo-1640238095.jpg" alt="">
<!-- content -->
<div class="navigationContent">
<a href="" id="sunglasses">Sunglasses<div class="redBackground"></div></a>
<!-- this will apear when hover on sunglasses -->
<div id="allSunglasses">
<div class="aviatorGoggles">
<a href="">
<h4 class="headingOfGlasses">Aviator Goggles</h4>
</a>
<div class="headingOfGlassesUnderline"></div>
<a href="">
<h4>Vincent Chase</h4>
</a>
<a href="">
<h4>Rx Eyewear</h4>
</a>
<a href="">
<h4> Carrera Rim</h4>
</a>
<a href="">
<h4> Abner Combo</h4>
</a>
<a href="">
<h4> Voyage Rimless</h4>
</a>
<a href="">
<h4> Dervin Hexagon</h4>
</a>
</div>
<div class="classicGoggles">
<a href="">
<h4 class="headingOfGlasses">Classic Goggles</h4>
</a>
<div class="headingOfGlassesUnderline"></div>
<a href="">
<h4>Fuzoku Frame</h4>
</a>
<a href="">
<h4>Floyd Lens</h4>
</a>
<a href="">
<h4>Retro Square</h4>
</a>
<a href="">
<h4>Riding Glasses</h4>
</a>
<a href="">
<h4>Vintage Goggles</h4>
</a>
<a href="">
<h4>Clubmaster Rimless</h4>
</a>
</div>
<img src="https://demo.codezeel.com/prestashop/PRS18/PRS180433/img/c/3-0_thumb.jpg" alt="">
</div>
<a href="">wayfarer<div class="redBackground"></div></a>
<a href="">cat eye<div class="redBackground"></div></a>
<a href="">pilot style<div class="redBackground"></div></a>
<a href="">blog<div class="redBackground"></div></a>
<a href="">more<div class="redBackground"></div></a>
</div>
<!-- icons -->
<div class="icons">
<div class="" id="searchContainer">
<input type="text" id="searchBox" class="searchBox" placeholder="Search...">
<span class="material-icons-outlined">search</span>
</div>
<!-- search icon in search box -->
<span class="material-icons-outlined" id="searchIcon">search
</span>
<!-- close icon show after click on search icon -->
<span class="material-icons-outlined" id="cross">
close
</span>
<a href="">
<span class="material-icons-outlined">person_add_alt</span>
</a>
<a href="">
<span class="material-icons-outlined">favorite_border </span>
</a>
<a href="">
<span class="material-icons-outlined"> shopping_bag</span>
</a>
</div>
</div>
<!-- creating slider -->
<div class="slider" id="slider">
<div class="sliderImages" id="girsImage">
<div class="sliderContainerForHeadings">
<h1 class="headingInSlider">New Trending Goggles For Women</h1>
<h3 class="subHeadingInSlider">Up To 50% Off Best Selling At <span class="uniqueColor">$151.00</span>
</h3>
<a href="" class="shopNowInSlider">
<div class="shopNowDivInSlider">SHOP NOW <div class="forBackgroundBlack"></div>
</div>
</a>
</div>
</div>
<div class="sliderImages" id="boyImage">
<div class="sliderContainerForHeadings">
<h1 class="headingInSlider" id="headingInSliderBoy">New Trending Goggles For Men</h1>
<h3 class="subHeadingInSlider" id="subHeadingInSliderBoy">Up To 40% Off Best Selling At <span
class="uniqueColor">$151.00</span>
</h3>
<a href="" class="shopNowInSlider">
<div class="shopNowDivInSlider" id="shopNowDivInSliderBoy">SHOP NOW <div class="forBackgroundBlack">
</div>
</div>
</a>
</div>
</div>
<!-- dots for slide -->
<div class="dots" id="dots">
<input type="radio" class="radioForSlide" id="forWomenSlide" value="women" name="girlOrBoy" checked>
<label for="forWomenSlide" class="dotsForSLide" id="labelForWomenSlide"></label>
<label for="forWomenSlide"></label>
<input type="radio" class="radioForSlide" id="forMenSlide" value="men" name="girlOrBoy">
<label for="forMenSlide" class="dotsForSLide" id="labelForMenSlide"></label>
</div>
<!-- slider arrows -->
<span class="material-icons-outlined arrowsOfSlider" id="leftArrowOfSlider">
keyboard_double_arrow_left
</span>
<span class="material-icons-outlined arrowsOfSlider" id="rightArrowOfSlider">
keyboard_double_arrow_right
</span>
</div>
<!-- sales are here -->
<div class="sales">
<div class="saleUpto" id="saleUpto30">
<div class="divForImageOfSale">
<img src="images/bannersForSale/sub-banner-1.jpg" alt="">
</div>
<p class="subheadingOfDiscount">Sale Up To 30% Discount</p>
<h2>Matt Brown Sunglasses</h2>
<a href="#">SHOP NOW</a>
<div class="underlineOfShopNowinDiscount"></div>
</div>
<div class="saleUpto" id="saleUpto20">
<div class="divForImageOfSale">
<img src="images/bannersForSale/sub-banner-2.jpg" alt="">
</div>
<p class="subheadingOfDiscount">Sale Up To 20% Discount</p>
<h2>Black Polarized Sunglasses</h2>
<a href="#">SHOP NOW</a>
<div class="underlineOfShopNowinDiscount"></div>
</div>
</div>
<!-- another company logos -->
<div class="anotherCompanyLogosDiv">
<span class="material-icons-outlined anotherCompanyLogosArrows" id="leftArrowOfAnotherCompanyLogo">
arrow_back
</span>
<div class="containerForAllAnotherCompanyLogos">
<div class="smallContainerOfAnotherCompanyLogo">
<a href="" class="anotherCompanyLogo"><img src="logos/anotherCompanysLogos/1.jpg" alt=""></a>
</div>
<div class="smallContainerOfAnotherCompanyLogo">
<a href="" class="anotherCompanyLogo"><img src="logos/anotherCompanysLogos/2.jpg" alt=""></a>
</div>
<div class="smallContainerOfAnotherCompanyLogo">
<a href="" class="anotherCompanyLogo"><img src="logos/anotherCompanysLogos/3.jpg" alt=""></a>
</div>
<div class="smallContainerOfAnotherCompanyLogo">
<a href="" class="anotherCompanyLogo"><img src="logos/anotherCompanysLogos/4.jpg" alt=""></a>
</div>
<div class="smallContainerOfAnotherCompanyLogo">
<a href="" class="anotherCompanyLogo"><img src="logos/anotherCompanysLogos/5.jpg" alt=""></a>
</div>
<div class="smallContainerOfAnotherCompanyLogo">
<a href="" class="anotherCompanyLogo"><img src="logos/anotherCompanysLogos/6.jpg" alt=""></a>
</div>
<div class="smallContainerOfAnotherCompanyLogo">
<a href="" class="anotherCompanyLogo"><img src="logos/anotherCompanysLogos/2.jpg" alt=""></a>
</div>
</div>
<span class="material-icons-outlined anotherCompanyLogosArrows" id="rightArrowOfAnotherCompanyLogo">
arrow_forward
</span>
</div>
<!-- new products -->
<div class="headingNewProducts">
<h1>New Products</h1>
<div class="underLineOfNewProductsHeading">
</div>
</div>
<div class="newProducts">
<span class="material-icons-outlined newProductsArrows" id="leftArrowOfNewProducts">
arrow_back
</span>
<div class="biggerContainerForAllNewProducts" id="biggerContainerForAllNewProducts">
<div class="containerForAllNewProducts" id="containerForAllNewProducts">
<div class="smallContainerOfNewProducts">
<div class="imagecontainerOfNewProducts ">
<img src="images/newProducts/googles/g1.jpg" alt="">
<img src="images/newProducts/modal/m1.jpg" class="secondImageForslide " alt="">
<div class="iconsUnderNewProducts settingDelay">
<span class="material-icons-outlined iconOfNewProducts delay1">
favorite_border
</span>
<span class="material-icons-outlined iconOfNewProducts delay2">
content_copy
</span>
<span class="material-icons-outlined iconOfNewProducts delay3">
visibility
</span>
<span class="material-icons-outlined iconOfNewProducts delay4">
shopping_bag
</span>
</div>
<div class="salePriceTag">
<p>-8%</p>
<div class="salePriceTagTriangle"></div>
</div>
<div class="onSale">
<p>On Sale!</p>
</div>
</div>
<div class="ratingStars">
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
</div>
<a href="#" class="ProductType">Roadies rd-202 round protection</a>
<div class="priceOfProduct">
<span class="cutPrice">₹61.00
<div class="cutLine"></div>
</span>
<span class="price">₹56.12</span>
</div>
<div class="circles">
<a href="">
<div class="circle redCircle"></div>
</a>
<a href="">
<div class="circle blueCircle"></div>
</a>
<a href="">
<div class="circle greenCircle"></div>
</a>
</div>
</div>
<div class="smallContainerOfNewProducts">
<div class="imagecontainerOfNewProducts">
<img src="images/newProducts/googles/g2.jpg" alt="">
<img src="images/newProducts/modal/m2.jpg" class="secondImageForslide" alt="">
<div class="iconsUnderNewProducts settingDelay">
<span class="material-icons-outlined iconOfNewProducts delay1">
favorite_border
</span>
<span class="material-icons-outlined iconOfNewProducts delay2">
content_copy
</span>
<span class="material-icons-outlined iconOfNewProducts delay3">
visibility
</span>
<span class="material-icons-outlined iconOfNewProducts delay4">
shopping_bag
</span>
</div>
<div class="salePriceTag">
<p>-₹5.00</p>
<div class="salePriceTagTriangle"></div>
</div>
<div class="onSale">
<p>On Sale!</p>
</div>
</div>
<div class="ratingStars">
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
</div>
<a href="#" class="ProductType">Hippie carnival glasses orange</a>
<div class="priceOfProduct">
<span class="cutPrice">₹52.00
<div class="cutLine"></div>
</span>
<span class="price">₹47.12</span>
</div>
<div class="circles">
<a href="">
<div class="circle blueCircle"></div>
</a>
<a href="">
<div class="circle greenCircle"></div>
</a>
<a href="">
<div class="circle yellowCircle"></div>
</a>
</div>
</div>
<div class="smallContainerOfNewProducts">
<div class="imagecontainerOfNewProducts">
<img src="images/newProducts/googles/g3.jpg" alt="">
<img src="images/newProducts/modal/m3.jpg" class="secondImageForslide" alt="">
<div class="iconsUnderNewProducts settingDelay">
<span class="material-icons-outlined iconOfNewProducts delay1">
favorite_border
</span>
<span class="material-icons-outlined iconOfNewProducts delay2">
content_copy
</span>
<span class="material-icons-outlined iconOfNewProducts delay3">
visibility
</span>
<span class="material-icons-outlined iconOfNewProducts delay4">
shopping_bag
</span>
</div>
<!-- <div class="salePriceTag">
<p>-8%</p>
<div class="salePriceTagTriangle"></div>
</div>
<div class="onSale"><p>On Sale!</p></div> -->
</div>
<div class="ratingStars">
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
</div>
<a href="#" class="ProductType">Iflash unisex wayfarer multi lens</a>
<div class="priceOfProduct">
<!-- <span class="cutPrice">₹61.00
<div class="cutLine"></div>
</span> -->
<span class="price">₹74.12</span>
</div>
<div class="circles">
<a href="">
<div class="circle whiteCircle"></div>
</a>
<a href="">
<div class="circle orangeCircle"></div>
</a>
<a href="">
<div class="circle yellowCircle"></div>
</a>
</div>
</div>
<div class="smallContainerOfNewProducts">
<div class="imagecontainerOfNewProducts">
<img src="images/newProducts/googles/g4.jpg" alt="">
<img src="images/newProducts/modal/m4.jpg" class="secondImageForslide" alt="">
<div class="iconsUnderNewProducts settingDelay">
<span class="material-icons-outlined iconOfNewProducts delay1">
favorite_border
</span>
<span class="material-icons-outlined iconOfNewProducts delay2">
content_copy
</span>
<span class="material-icons-outlined iconOfNewProducts delay3">
visibility
</span>
<span class="material-icons-outlined iconOfNewProducts delay4">
shopping_bag
</span>
</div>
<div class="salePriceTag">
<p>-4%</p>
<div class="salePriceTagTriangle"></div>
</div>
<div class="onSale">
<p>On Sale!</p>
</div>
</div>
<div class="ratingStars">
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
</div>
<a href="#" class="ProductType">Tinted hexagon oversized glass</a>
<div class="priceOfProduct">
<span class="cutPrice">₹66.00
<div class="cutLine"></div>
</span>
<span class="price">₹63.36</span>
</div>
<div class="circles">
<a href="">
<div class="circle orangeCircle"></div>
</a>
<a href="">
<div class="circle blueCircle"></div>
</a>
<a href="">
<div class="circle greenCircle"></div>
</a>
</div>
</div>
<div class="smallContainerOfNewProducts">
<div class="imagecontainerOfNewProducts">
<img src="images/newProducts/googles/g5.jpg" alt="">
<img src="images/newProducts/modal/m5.jpg" class="secondImageForslide" alt="">
<div class="iconsUnderNewProducts settingDelay">
<span class="material-icons-outlined iconOfNewProducts delay1">
favorite_border
</span>
<span class="material-icons-outlined iconOfNewProducts delay2">
content_copy
</span>
<span class="material-icons-outlined iconOfNewProducts delay3">
visibility
</span>
<span class="material-icons-outlined iconOfNewProducts delay4">
shopping_bag
</span>
</div>
<!-- <div class="salePriceTag">
<p>-8%</p>
<div class="salePriceTagTriangle"></div>
</div>
<div class="onSale"><p>On Sale!</p></div> -->
</div>
<div class="ratingStars">
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined">
star
</span>
</div>
<a href="#" class="ProductType">Transparent frame wayfarer lens</a>
<div class="priceOfProduct">
<!-- <span class="cutPrice">₹61.00
<div class="cutLine"></div>
</span> -->
<span class="price">₹45.12</span>
</div>
<div class="circles">
<a href="">
<div class="circle brownCircle"></div>
</a>
<a href="">
<div class="circle whiteCircle"></div>
</a>
<a href="">
<div class="circle redCircle"></div>
</a>
</div>
</div>
<div class="smallContainerOfNewProducts">
<div class="imagecontainerOfNewProducts">
<img src="images/newProducts/googles/g6.jpg" alt="">
<img src="images/newProducts/modal/m6.jpg" class="secondImageForslide" alt="">
<div class="iconsUnderNewProducts settingDelay">
<span class="material-icons-outlined iconOfNewProducts delay1">
favorite_border
</span>
<span class="material-icons-outlined iconOfNewProducts delay2">
content_copy
</span>
<span class="material-icons-outlined iconOfNewProducts delay3">
visibility
</span>
<span class="material-icons-outlined iconOfNewProducts delay4">
shopping_bag
</span>
</div>
<div class="salePriceTag">
<p>-₹5.00</p>
<div class="salePriceTagTriangle"></div>
</div>
<div class="onSale">
<p>On Sale!</p>
</div>
</div>
<div class="ratingStars">
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined">
star
</span>
</div>
<a href="#" class="ProductType">Golden & gray half semi polarized</a>
<div class="priceOfProduct">
<span class="cutPrice">₹72.00
<div class="cutLine"></div>
</span>
<span class="price">₹67.00</span>
</div>
<div class="circles">
<a href="">
<div class="circle whiteCircle"></div>
</a>
<a href="">
<div class="circle redCircle"></div>
</a>
<a href="">
<div class="circle greenCircle"></div>
</a>
</div>
</div>
<div class="smallContainerOfNewProducts">
<div class="imagecontainerOfNewProducts">
<img src="images/newProducts/googles/g7.jpg" alt="">
<img src="images/newProducts/modal/m7.jpg" class="secondImageForslide" alt="">
<div class="iconsUnderNewProducts settingDelay">
<span class="material-icons-outlined iconOfNewProducts delay1">
favorite_border
</span>
<span class="material-icons-outlined iconOfNewProducts delay2">
content_copy
</span>
<span class="material-icons-outlined iconOfNewProducts delay3">
visibility
</span>
<span class="material-icons-outlined iconOfNewProducts delay4">
shopping_bag
</span>
</div>
<!-- <div class="salePriceTag">
<p>-8%</p>
<div class="salePriceTagTriangle"></div>
</div>
<div class="onSale"><p>On Sale!</p></div> -->
</div>
<div class="ratingStars">
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
<span class="material-icons-outlined">
star
</span>
</div>
<a href="#" class="ProductType">Black full rim square polarized</a>
<div class="priceOfProduct">
<!-- <span class="cutPrice">₹61.00
<div class="cutLine"></div>
</span> -->
<span class="price">₹82.12</span>
</div>
<div class="circles">
<a href="">
<div class="circle whiteCircle"></div>
</a>
<a href="">
<div class="circle orangeCircle"></div>
</a>
<a href="">
<div class="circle blueCircle"></div>
</a>
</div>
</div>
<div class="smallContainerOfNewProducts">
<div class="imagecontainerOfNewProducts">
<img src="images/newProducts/googles/g8.jpg" alt="">
<img src="images/newProducts/modal/m8.jpg" class="secondImageForslide" alt="">
<div class="iconsUnderNewProducts settingDelay">
<span class="material-icons-outlined iconOfNewProducts delay1">
favorite_border
</span>
<span class="material-icons-outlined iconOfNewProducts delay2">
content_copy
</span>
<span class="material-icons-outlined iconOfNewProducts delay3">
visibility
</span>
<span class="material-icons-outlined iconOfNewProducts delay4">
shopping_bag
</span>
</div>
<div class="salePriceTag">
<p>-7%</p>
<div class="salePriceTagTriangle"></div>
</div>
<div class="onSale">
<p>On Sale!</p>
</div>
</div>
<div class="ratingStars">
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
<span class="material-icons-outlined yellowStar">
star
</span>
</div>
<a href="#" class="ProductType">Phenomenal round unisex glasses</a>
<div class="priceOfProduct">
<span class="cutPrice">₹51.00
<div class="cutLine"></div>
</span>
<span class="price">₹47.43</span>
</div>
<div class="circles">
<a href="">
<div class="circle brownCircle"></div>
</a>
<a href="">
<div class="circle redCircle"></div>
</a>
<a href="">
<div class="circle yellowCircle"></div>
</a>
</div>
</div>
</div>
</div>
<span class="material-icons-outlined newProductsArrows" id="rightArrowOfNewProducts">
arrow_forward
</span>
</div>
<!-- offer banner -->
<div class="offerBanner">
<h1>Buy One, Get One Free Prescription Lenses*</h1>
<a href="#">SHOP NOW</a>
</div>
<!-- services -->
<div class="services">
<div class="service">
<svg class="svgForService" xmlns="http://www.w3.org/2000/svg" version="1.0" width="45px" height="45px"
viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
<g class="serviceLogo" transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path
d="M2325 5111 c-11 -5 -29 -19 -40 -31 -19 -21 -20 -38 -23 -391 l-3 -369 -250 0 c-268 0 -294 -4 -321 -53 -8 -14 -14 -79 -16 -184 l-4 -162 -174 -3 -174 -3 -27 -28 -28 -27 -3 -169 -3 -169 -119 -4 c-115 -3 -121 -4 -147 -31 l-28 -27 -3 -448 -3 -447 -237 -143 c-130 -79 -244 -148 -253 -155 -20 -16 -39 -51 -39 -74 0 -13 409 -1405 516 -1756 5 -16 3 -17 -13 -8 -11 5 -64 18 -119 27 -238 40 -436 -15 -662 -186 -103 -78 -139 -115 -147 -151 -10 -43 11 -85 50 -103 59 -28 59 -29 209 85 192 145 367 196 528 154 31 -8 101 -34 155 -59 163 -73 251 -96 388 -103 153 -7 235 12 412 98 336 161 434 165 726 28 271 -127 393 -157 561 -139 108 13 184 39 345 119 155 78 232 106 313 116 101 13 243 -22 409 -98 262 -121 513 -115 734 17 59 35 197 141 242 185 58 58 52 135 -12 165 -61 29 -62 29 -216 -96 -96 -78 -173 -122 -254 -143 -67 -17 -169 -19 -235 -5 -69 16 -190 63 -190 75 0 6 117 404 260 885 143 481 260 883 260 893 0 23 -19 58 -39 74 -9 7 -123 76 -253 155 l-237 143 -3 447 -3 448 -28 27 c-26 27 -32 28 -147 31 l-119 4 -3 169 -3 169 -28 27 -27 28 -174 3 -174 3 -4 162 c-2 105 -8 170 -16 184 -27 49 -53 53 -321 53 l-250 0 -3 370 -3 370 -28 27 -27 28 -228 2 c-125 1 -236 -2 -247 -6z m335 -491 l0 -300 -100 0 -100 0 0 300 0 300 100 0 100 0 0 -300z m580 -600 l0 -100 -680 0 -680 0 0 100 0 100 680 0 680 0 0 -100z m420 -400 l0 -100 -1100 0 -1100 0 0 100 0 100 1100 0 1100 0 0 -100z m-1475 -309 c-7 -6 -786 -479 -1017 -618 -5 -2 -8 138 -8 311 l0 316 517 0 c299 0 513 -4 508 -9z m1775 -307 c0 -173 -3 -313 -7 -311 -232 139 -1011 612 -1017 618 -6 5 208 9 507 9 l517 0 0 -316z m-1500 -1158 l0 -1394 -48 18 c-156 59 -356 65 -510 14 -26 -9 -119 -51 -207 -95 -197 -97 -281 -118 -407 -102 -44 6 -84 15 -88 19 -10 11 -553 1834 -548 1840 5 4 1802 1094 1806 1094 1 0 2 -627 2 -1394z m1135 830 c478 -290 871 -528 873 -530 2 -2 -107 -375 -242 -828 -176 -593 -248 -822 -258 -819 -48 13 -177 22 -253 18 -114 -5 -220 -40 -418 -137 -172 -84 -224 -100 -332 -100 -92 1 -142 10 -237 46 l-68 26 0 1445 0 1445 33 -20 c17 -11 423 -257 902 -546z" />
<path
d="M2155 2786 c-66 -29 -72 -119 -11 -168 46 -38 135 -4 150 57 9 36 -17 91 -53 109 -36 19 -47 19 -86 2z" />
<path
d="M1755 2537 c-329 -203 -594 -373 -612 -394 -25 -26 -31 -80 -13 -114 16 -28 68 -52 102 -45 15 3 179 101 364 217 273 172 339 218 351 244 19 40 11 77 -22 111 -38 38 -87 33 -170 -19z" />
<path
d="M2928 2773 c-57 -36 -63 -100 -14 -149 44 -44 83 -45 128 -5 27 24 33 36 33 71 0 35 -6 47 -33 71 -37 33 -74 37 -114 12z" />
<path
d="M3271 2566 c-58 -32 -66 -100 -18 -150 34 -36 634 -409 686 -427 93 -33 163 87 94 160 -22 23 -583 374 -670 420 -28 14 -62 14 -92 -3z" />
</g>
</svg>
<div class="servicetag">
<h4>Worldwide Shipping</h4>
<p>Order Above $100</p>
</div>
</div>
<div class="lineBetweenService"></div>
<div class="service">
<svg class="svgForService" xmlns="http://www.w3.org/2000/svg" version="1.0" width="45px" height="45px"
viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
<g class="serviceLogo" transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path
d="M1215 5109 c-147 -11 -355 -44 -495 -79 -370 -92 -607 -235 -694 -420 l-21 -45 0 -1685 0 -1685 21 -45 c126 -267 583 -453 1234 -501 184 -14 527 -6 585 13 85 28 99 136 25 186 -32 21 -41 23 -110 15 -124 -13 -503 -6 -645 11 -371 46 -628 128 -801 257 -91 67 -98 87 -102 282 l-4 169 39 -25 c224 -141 583 -236 1013 -268 184 -14 527 -6 585 13 85 28 99 136 25 186 -32 21 -41 23 -110 15 -124 -13 -503 -6 -645 11 -371 46 -628 128 -801 257 -91 67 -98 87 -102 282 l-4 169 39 -25 c224 -141 583 -236 1013 -268 184 -14 527 -6 585 13 85 28 99 136 25 186 -32 21 -41 23 -110 15 -124 -13 -503 -6 -645 11 -371 46 -628 128 -801 257 -91 67 -98 87 -102 282 l-4 169 39 -25 c405 -256 1236 -348 1907 -212 422 85 702 237 799 434 l32 66 0 715 0 715 -32 65 c-56 113 -172 213 -338 291 -341 160 -883 237 -1400 198z m665 -225 c354 -40 670 -145 811 -271 107 -97 107 -169 0 -266 -141 -126 -448 -228 -816 -273 -189 -22 -581 -22 -760 0 -354 45 -594 117 -767 232 -91 61 -128 111 -128 174 0 63 37 113 128 174 308 204 926 297 1532 230z m-1524 -827 c148 -74 374 -139 619 -177 619 -95 1351 -6 1719 210 37 22 70 40 72 40 2 0 4 -72 4 -160 0 -185 -3 -194 -79 -263 -141 -126 -448 -228 -816 -273 -188 -22 -581 -22 -760 0 -373 47 -628 128 -801 257 -91 67 -98 87 -102 282 l-4 169 39 -25 c21 -14 71 -41 109 -60z m0 -640 c148 -74 374 -139 619 -177 619 -95 1351 -6 1719 210 37 22 70 40 72 40 2 0 4 -72 4 -160 0 -185 -3 -194 -79 -263 -141 -126 -448 -228 -816 -273 -188 -22 -581 -22 -760 0 -373 47 -628 128 -801 257 -91 67 -98 87 -102 282 l-4 169 39 -25 c21 -14 71 -41 109 -60z" />
<path
d="M3350 2549 c-163 -13 -372 -47 -516 -84 -356 -91 -579 -227 -667 -404 l-32 -66 0 -715 0 -715 32 -65 c88 -178 311 -314 667 -405 638 -163 1472 -107 1946 130 155 78 262 175 314 285 21 45 21 53 21 770 0 717 0 725 -21 770 -74 157 -253 282 -539 375 -334 110 -792 157 -1205 124z m467 -209 c278 -15 513 -58 719 -131 108 -38 149 -58 237 -117 128 -84 161 -172 98 -259 -51 -70 -192 -153 -356 -210 -252 -86 -525 -125 -885 -125 -353 0 -617 35 -867 117 -188 62 -357 166 -398 246 -33 64 -14 121 64 192 166 149 557 262 991 287 186 10 210 10 397 0z m-1429 -789 c82 -57 265 -129 446 -176 567 -145 1294 -119 1797 65 44 16 123 52 176 79 53 28 98 51 101 51 2 0 3 -73 0 -163 -4 -188 -12 -210 -102 -276 -173 -129 -428 -210 -801 -257 -179 -22 -572 -22 -760 0 -368 45 -675 147 -816 273 -76 69 -79 78 -79 263 0 88 3 160 6 160 3 0 18 -8 32 -19z m0 -640 c82 -57 265 -129 446 -176 567 -145 1294 -119 1797 65 44 16 123 52 176 79 53 28 98 51 101 51 2 0 3 -73 0 -163 -4 -188 -12 -210 -102 -276 -173 -129 -428 -210 -801 -257 -179 -22 -572 -22 -760 0 -368 45 -675 147 -816 273 -76 69 -79 78 -79 263 0 88 3 160 6 160 3 0 18 -8 32 -19z" />
</g>
</svg>
<div class="servicetag">
<h4>Easy 30 Day Returns</h4>
<p>Back Returns In 7 Days</p>
</div>
</div>
<div class="lineBetweenService"></div>
<div class="service">
<svg class="svgForService" xmlns="http://www.w3.org/2000/svg" version="1.0" width="45px" height="45px"
viewBox="0 0 4096.000000 4096.000000" preserveAspectRatio="xMidYMid meet">
<g class="serviceLogo" transform="translate(0.000000,4096.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path
d="M21335 36930 c-1985 -83 -3780 -404 -5550 -994 -542 -181 -743 -259 -846 -328 -149 -100 -252 -233 -312 -406 -26 -73 -31 -106 -35 -209 -9 -248 73 -451 252 -620 170 -162 391 -239 615 -213 100 12 139 23 396 118 1400 515 2958 859 4530 1002 639 57 1040 74 1770 74 614 1 822 -6 1325 -40 1527 -102 3062 -401 4465 -868 1107 -368 1965 -739 2930 -1264 1175 -640 2250 -1411 3210 -2303 178 -165 629 -616 780 -779 1873 -2026 3043 -4428 3390 -6960 122 -890 146 -1824 70 -2740 -176 -2114 -883 -4158 -2030 -5865 -397 -591 -791 -1075 -1334 -1638 -177 -185 -308 -343 -393 -477 -99 -154 -204 -374 -252 -525 -14 -44 -279 -964 -590 -2045 -311 -1081 -711 -2471 -889 -3090 l-324 -1125 -2056 -3 -2056 -2 -10 37 c-6 21 -116 450 -245 953 -129 503 -246 946 -261 983 -90 223 -291 400 -530 468 -96 27 390 23 -5850 44 -4652 15 -4445 16 -4580 -30 -222 -75 -409 -260 -486 -480 -11 -31 -125 -467 -255 -968 -129 -502 -242 -936 -250 -965 l-15 -52 -2056 2 -2057 3 -592 2070 c-357 1249 -610 2117 -638 2188 -192 492 -552 940 -992 1235 -136 91 -224 136 -551 287 -2094 966 -4006 2080 -5703 3324 -470 344 -531 397 -611 532 -23 37 -55 110 -72 161 l-32 93 4 3820 c2 2101 6 3823 10 3826 3 4 290 11 636 17 699 11 686 10 840 82 95 44 189 113 243 178 131 159 4080 5435 4112 5495 61 114 84 210 84 352 0 135 -17 231 -68 382 -30 88 -58 159 -198 498 -23 55 -68 156 -101 225 -32 69 -101 220 -152 335 -156 353 -232 509 -637 1319 -365 729 -660 1304 -766 1491 -25 44 -58 103 -72 130 -15 28 -47 89 -73 136 l-47 86 192 7 c1076 39 1881 -59 2752 -335 244 -77 676 -260 1024 -432 175 -87 855 -491 1212 -720 250 -160 480 -340 785 -612 756 -674 1397 -1500 1868 -2405 97 -187 144 -257 231 -337 155 -146 366 -222 576 -210 489 30 834 509 714 993 -20 82 -161 361 -326 649 -285 497 -634 1000 -993 1430 -541 648 -1263 1320 -1840 1711 -350 237 -1309 806 -1625 964 -297 149 -877 395 -1100 468 -683 222 -1339 349 -2165 419 -307 26 -1304 26 -1585 0 -415 -38 -521 -61 -701 -151 -368 -184 -641 -540 -715 -933 -22 -121 -15 -350 15 -483 51 -220 136 -446 280 -737 76 -153 155 -305 176 -338 166 -257 1037 -1995 1360 -2710 37 -82 91 -202 120 -265 100 -220 177 -418 168 -432 -4 -8 -792 -1056 -1751 -2330 l-1743 -2315 -787 -7 c-433 -4 -818 -12 -856 -17 -306 -42 -562 -267 -652 -574 -16 -56 -18 -181 -24 -1695 -4 -899 -8 -2841 -10 -4315 -2 -2661 -2 -2681 19 -2813 83 -540 337 -1030 725 -1399 108 -103 447 -361 871 -664 1237 -884 2521 -1673 3970 -2439 356 -188 1282 -648 1670 -828 192 -90 381 -184 420 -210 152 -101 325 -309 394 -475 16 -40 329 -1125 695 -2412 745 -2618 693 -2456 829 -2601 120 -129 242 -202 407 -246 l85 -23 2760 0 2760 0 85 23 c253 67 441 229 538 465 17 40 143 511 282 1047 138 536 252 975 253 976 2 1 1694 -6 6609 -24 1164 -4 2120 -10 2123 -14 3 -3 116 -439 251 -969 229 -900 248 -971 294 -1066 40 -81 65 -118 131 -187 141 -149 299 -226 503 -247 65 -6 1052 -9 2806 -7 l2705 3 79 22 c229 66 408 211 520 424 46 86 153 455 1952 6704 104 361 119 390 304 580 555 572 887 961 1276 1495 1396 1918 2278 4273 2523 6740 90 901 94 1857 10 2740 -64 686 -168 1311 -316 1910 -436 1763 -1169 3365 -2226 4863 -791 1123 -1776 2185 -2860 3086 -1281 1064 -2665 1921 -4232 2618 -2033 905 -4242 1458 -6545 1638 -498 39 -737 47 -1450 50 -393 2 -805 -1 -915 -5z" />
<path
d="M20240 30119 c-293 -77 -513 -307 -574 -601 -14 -65 -16 -165 -16 -648 l0 -570 -24 0 c-44 0 -369 -58 -476 -85 -365 -91 -696 -220 -965 -375 -881 -506 -1496 -1347 -1689 -2310 -156 -774 17 -1638 462 -2310 356 -537 883 -970 1644 -1351 403 -202 814 -369 1498 -609 827 -291 1214 -443 1550 -612 310 -155 496 -279 673 -448 313 -299 504 -624 589 -1007 20 -86 22 -128 23 -343 0 -217 -3 -257 -22 -345 -112 -503 -420 -936 -887 -1246 -572 -380 -1319 -539 -2296 -490 -696 35 -1565 163 -2156 317 -199 51 -289 61 -402 45 -420 -61 -709 -409 -689 -825 15 -318 220 -598 515 -706 228 -83 903 -229 1408 -304 335 -50 800 -100 1121 -121 l102 -7 3 -567 c4 -633 3 -618 78 -777 106 -222 301 -376 544 -429 116 -26 293 -17 401 19 211 72 363 204 460 401 82 166 79 132 83 831 l3 622 47 7 c77 11 367 82 512 126 1203 366 2117 1168 2525 2218 115 298 186 600 216 930 15 168 7 531 -16 696 -99 728 -417 1373 -945 1919 -585 605 -1212 950 -2620 1439 -884 307 -1267 457 -1645 643 -787 386 -1161 806 -1265 1419 -19 111 -21 154 -17 295 6 183 19 257 77 431 165 496 586 931 1100 1133 189 75 455 136 750 173 206 25 756 25 990 0 562 -61 1063 -181 1602 -383 232 -86 291 -98 447 -92 177 8 320 62 455 174 87 72 147 149 202 259 60 122 84 222 84 352 0 128 -20 222 -70 330 -95 203 -228 325 -458 417 -515 207 -1233 397 -1807 479 l-160 23 -5 619 -6 620 -27 90 c-85 275 -282 466 -551 535 -106 27 -271 27 -376 -1z" />
<path
d="M10068 25770 c-563 -52 -1046 -432 -1222 -961 -60 -181 -71 -252 -71 -464 1 -170 4 -202 28 -303 130 -555 551 -965 1117 -1088 120 -26 419 -27 540 -1 450 96 804 366 1005 766 163 326 194 713 83 1060 -201 635 -823 1051 -1480 991z" />
</g>
</svg>
<div class="servicetag">
<h4>Money Back Guarantee</h4>
<p>Guarantee With In 30 Days</p>
</div>
</div>
<div class="lineBetweenService"></div>
<div class="service">
<svg class="svgForService" xmlns="http://www.w3.org/2000/svg" version="1.0" width="45px" height="45px"
viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
<g class="serviceLogo" transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path
d="M2327 5110 c-493 -52 -923 -219 -1314 -511 -125 -94 -397 -366 -489 -489 -282 -377 -445 -777 -506 -1240 -16 -123 -16 -497 0 -620 61 -463 224 -863 506 -1240 92 -123 364 -395 489 -489 352 -262 737 -425 1172 -493 201 -31 575 -31 785 1 443 67 771 212 1001 440 161 161 228 298 236 486 9 175 -37 309 -152 448 l-56 68 31 39 c90 113 108 244 51 367 -29 61 -58 93 -264 298 -162 161 -246 237 -279 253 -94 46 -203 46 -296 0 -27 -13 -98 -72 -169 -142 l-123 -119 -32 14 c-18 7 -69 38 -113 68 -226 154 -469 407 -601 624 l-43 72 113 115 c130 132 160 177 182 261 13 49 14 73 5 120 -18 107 -49 148 -291 389 -268 269 -293 285 -430 285 -136 0 -178 -26 -381 -232 -129 -132 -171 -182 -197 -233 -98 -198 -73 -458 79 -819 136 -323 363 -646 663 -947 179 -179 275 -260 441 -373 369 -252 726 -397 1000 -408 189 -8 289 23 414 127 l64 54 34 -39 c122 -142 134 -327 31 -488 -158 -244 -521 -421 -988 -483 -187 -24 -496 -22 -676 5 -303 45 -590 148 -844 301 -604 363 -1003 965 -1106 1665 -23 163 -23 467 0 630 136 927 799 1676 1696 1914 803 213 1653 -23 2237 -620 117 -120 186 -204 278 -343 273 -411 406 -911 374 -1406 -10 -162 -18 -212 -55 -383 -16 -73 -24 -129 -20 -150 17 -86 112 -126 190 -78 38 24 47 43 75 156 74 304 89 656 42 972 -84 562 -345 1065 -761 1466 -385 372 -866 609 -1395 688 -151 23 -474 33 -608 19z m-345 -1447 c114 -114 214 -220 222 -237 10 -21 12 -36 5 -55 -6 -14 -75 -91 -153 -171 -160 -161 -174 -185 -156 -264 38 -172 295 -513 550 -730 122 -105 255 -199 362 -255 176 -93 189 -89 393 110 135 131 157 149 186 149 30 0 55 -21 251 -218 275 -275 268 -239 87 -429 -153 -160 -164 -169 -230 -194 -129 -49 -366 4 -664 151 -460 225 -856 583 -1165 1050 -143 217 -270 505 -300 682 -17 96 -9 233 15 283 21 43 201 235 278 297 84 66 81 68 319 -169z" />
</g>
</svg>
<div class="servicetag">
<h4>Easy Online Support</h4>
<p>Any Time Support</p>
</div>
</div>
</div>
<!-- featured products -->
<div class="headingNewProducts">
<h1>Featured Products</h1>
<div class="underLineOfNewProductsHeading">
</div>
</div>
<div class="newProducts">
<span class="material-icons-outlined newProductsArrows" id="leftArrowOfFeaturedProducts">
arrow_back
</span>
<div class="biggerContainerForAllNewProducts" id="biggerContainerForAllNewProducts">
<div class="containerForAllNewProducts" id="containerForAllNewProducts">
<div class="smallContainerOfNewProducts">
<div class="imagecontainerOfNewProducts ">
<img src="images/featuredProducts/googles/g1.jpg" alt="">
<img src="images/featuredProducts/modal/m1.jpg" class="secondImageForslide " alt="">
<div class="iconsUnderNewProducts settingDelay">
<span class="material-icons-outlined iconOfNewProducts delay1">