Repository navigation
Expand file tree
/
Copy pathproducts-grid.html
More file actions
1967 lines (1734 loc) · 95.2 KB
/
Copy pathproducts-grid.html
File metadata and controls
1967 lines (1734 loc) · 95.2 KB
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" dir="">
<head>
<!-- Required Meta Tags Always Come First -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>Shop: Products Grid | Front - Multipurpose Responsive Template</title>
<!-- Favicon -->
<link rel="shortcut icon" href="../favicon.ico">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
<!-- CSS Front Template -->
<link rel="stylesheet" href="../assets/css/theme.min.css">
</head>
<body>
<!-- ========== HEADER ========== -->
<header id="header" class="navbar navbar-expand-lg navbar-end navbar-light">
<!-- Topbar -->
<div class="container navbar-topbar">
<nav class="js-mega-menu navbar-nav-wrap">
<!-- Toggler -->
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="d-flex justify-content-between align-items-center">
<span class="navbar-toggler-text">Topbar</span>
<span class="navbar-toggler-default">
<i class="bi-chevron-down ms-2"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-chevron-up ms-2"></i>
</span>
</span>
</button>
<!-- End Toggler -->
<div id="topbarNavDropdown" class="navbar-nav-wrap-collapse collapse navbar-collapse navbar-topbar-collapse">
<div class="navbar-toggler-wrapper">
<div class="navbar-topbar-toggler d-flex justify-content-between align-items-center">
<span class="navbar-toggler-text small">Topbar</span>
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi-x"></i>
</button>
<!-- End Toggler -->
</div>
</div>
<ul class="navbar-nav">
<li class="nav-item me-auto">
<a class="nav-link" href="../landing-classic-corporate.html"><i class="bi-chevron-left small ms-1"></i> Main demo</a>
</li>
<!-- Demos -->
<li class="hs-has-mega-menu nav-item">
<a id="demosMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Demos</a>
<!-- Mega Menu -->
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="demosMegaMenu" style="min-width: 40rem;">
<!-- Promo -->
<div class="navbar-dropdown-menu-promo">
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="../landing-classic-corporate.html">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6 5.59998L20.9 10.9C21.3 11.3 21.3 11.9 20.9 12.3L17.6 15.6L11.6 9.59998L15.6 5.59998ZM2.3 12.3L7.59999 17.6L11.6 13.6L5.59999 7.59998L2.3 10.9C1.9 11.3 1.9 11.9 2.3 12.3Z" fill="#035A4B"/>
<path opacity="0.3" d="M17.6 15.6L12.3 20.9C11.9 21.3 11.3 21.3 10.9 20.9L7.59998 17.6L13.6 11.6L17.6 15.6ZM10.9 2.3L5.59998 7.6L9.59998 11.6L15.6 5.6L12.3 2.3C11.9 1.9 11.3 1.9 10.9 2.3Z" fill="#035A4B"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Main</span>
<p class="navbar-dropdown-menu-media-desc">Over 60 corporate, agency, portfolio, account and many more pages.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="../demo-real-estate/index.html">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 3C5.67157 3 5 3.67157 5 4.5V6H3.5C2.67157 6 2 6.67157 2 7.5C2 8.32843 2.67157 9 3.5 9H5V19.5C5 20.3284 5.67157 21 6.5 21C7.32843 21 8 20.3284 8 19.5V9H20.5C21.3284 9 22 8.32843 22 7.5C22 6.67157 21.3284 6 20.5 6H8V4.5C8 3.67157 7.32843 3 6.5 3Z" fill="#035A4B"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M20.5 11H10V17.5C10 18.3284 10.6716 19 11.5 19H15.5C17.3546 19 19.0277 18.2233 20.2119 16.9775C20.1436 16.9922 20.0727 17 20 17C19.4477 17 19 16.5523 19 16V13C19 12.4477 19.4477 12 20 12C20.5523 12 21 12.4477 21 13V15.9657C21.6334 14.9626 22 13.7741 22 12.5C22 11.6716 21.3284 11 20.5 11Z" fill="#035A4B"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Real Estate</span>
<p class="navbar-dropdown-menu-media-desc">Find the latest homes for sale, real estate market data.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="../demo-jobs/index.html">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" d="M20 15H4C2.9 15 2 14.1 2 13V7C2 6.4 2.4 6 3 6H21C21.6 6 22 6.4 22 7V13C22 14.1 21.1 15 20 15ZM13 12H11C10.5 12 10 12.4 10 13V16C10 16.5 10.4 17 11 17H13C13.6 17 14 16.6 14 16V13C14 12.4 13.6 12 13 12Z" fill="#035A4B"/>
<path d="M14 6V5H10V6H8V5C8 3.9 8.9 3 10 3H14C15.1 3 16 3.9 16 5V6H14ZM20 15H14V16C14 16.6 13.5 17 13 17H11C10.5 17 10 16.6 10 16V15H4C3.6 15 3.3 14.9 3 14.7V18C3 19.1 3.9 20 5 20H19C20.1 20 21 19.1 21 18V14.7C20.7 14.9 20.4 15 20 15Z" fill="#035A4B"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Jobs <span class="badge bg-success rounded-pill ms-1">Hot</span></span>
<p class="navbar-dropdown-menu-media-desc">Search millions of jobs online to find the next step in your career.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
</div>
<!-- End Promo -->
<!-- Promo -->
<div class="navbar-dropdown-menu-promo">
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="../demo-course/index.html">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 19H4C2.9 19 2 18.1 2 17H22C22 18.1 21.1 19 20 19Z" fill="#035A4B"/>
<path opacity="0.3" d="M20 5H4C3.4 5 3 5.4 3 6V17H21V6C21 5.4 20.6 5 20 5Z" fill="#035A4B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9167 6.83334H9.91666C9.18899 6.83334 8.66666 7.37744 8.66666 8.08334V13.9167C8.66666 14.6226 9.18899 15.1667 9.91666 15.1667H14.9167C15.1841 15.1667 15.3333 15.0112 15.3333 14.75V14.3333H10.3333C10.1032 14.3333 9.91665 14.1468 9.91665 13.9167C9.91665 13.6866 10.1032 13.5 10.3333 13.5H15.3333V7.25001C15.3333 6.9888 15.1841 6.83334 14.9167 6.83334Z" fill="#035A4B"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="8" height="10">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9167 6.83334H9.91666C9.18899 6.83334 8.66666 7.37744 8.66666 8.08334V13.9167C8.66666 14.6226 9.18899 15.1667 9.91666 15.1667H14.9167C15.1841 15.1667 15.3333 15.0112 15.3333 14.75V14.3333H10.3333C10.1032 14.3333 9.91665 14.1468 9.91665 13.9167C9.91665 13.6866 10.1032 13.5 10.3333 13.5H15.3333V7.25001C15.3333 6.9888 15.1841 6.83334 14.9167 6.83334Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
</g>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Course <span class="badge bg-success rounded-pill ms-1">Hot</span></span>
<p class="navbar-dropdown-menu-media-desc">Learn on your schedule. An online learning and teaching demo.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link active" href="../demo-shop/index.html">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" d="M20 22H4C3.4 22 3 21.6 3 21V2H21V21C21 21.6 20.6 22 20 22Z" fill="#035A4B"/>
<path d="M12 14C9.2 14 7 11.8 7 9V5C7 4.4 7.4 4 8 4C8.6 4 9 4.4 9 5V9C9 10.7 10.3 12 12 12C13.7 12 15 10.7 15 9V5C15 4.4 15.4 4 16 4C16.6 4 17 4.4 17 5V9C17 11.8 14.8 14 12 14Z" fill="#035A4B"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">E-Commerce</span>
<p class="navbar-dropdown-menu-media-desc">Choose an online store & get your business online today!</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="../demo-app-marketplace/index.html">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" d="M18 10V20C18 20.6 18.4 21 19 21C19.6 21 20 20.6 20 20V10H18Z" fill="#035A4B"/>
<path opacity="0.3" d="M11 10V17H6V10H4V20C4 20.6 4.4 21 5 21H12C12.6 21 13 20.6 13 20V10H11Z" fill="#035A4B"/>
<path opacity="0.3" d="M10 10C10 11.1 9.1 12 8 12C6.9 12 6 11.1 6 10H10Z" fill="#035A4B"/>
<path opacity="0.3" d="M18 10C18 11.1 17.1 12 16 12C14.9 12 14 11.1 14 10H18Z" fill="#035A4B"/>
<path opacity="0.3" d="M14 4H10V10H14V4Z" fill="#035A4B"/>
<path opacity="0.3" d="M17 4H20L22 10H18L17 4Z" fill="#035A4B"/>
<path opacity="0.3" d="M7 4H4L2 10H6L7 4Z" fill="#035A4B"/>
<path d="M6 10C6 11.1 5.1 12 4 12C2.9 12 2 11.1 2 10H6ZM10 10C10 11.1 10.9 12 12 12C13.1 12 14 11.1 14 10H10ZM18 10C18 11.1 18.9 12 20 12C21.1 12 22 11.1 22 10H18ZM19 2H5C4.4 2 4 2.4 4 3V4H20V3C20 2.4 19.6 2 19 2ZM12 17C12 16.4 11.6 16 11 16H6C5.4 16 5 16.4 5 17C5 17.6 5.4 18 6 18H11C11.6 18 12 17.6 12 17Z" fill="#035A4B"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">App Marketplace</span>
<p class="navbar-dropdown-menu-media-desc">Find apps and integrates seamlessly with popular apps.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
</div>
<!-- End Promo -->
<!-- Promo -->
<div class="navbar-dropdown-menu-promo">
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="../demo-help-desk/index.html">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.1671 18.1421C22.4827 18.4577 23.0222 18.2331 23.0206 17.7868L23.0039 13.1053V5.52632C23.0039 4.13107 21.8729 3 20.4776 3H8.68815C7.2929 3 6.16183 4.13107 6.16183 5.52632V9H13C14.6568 9 16 10.3431 16 12V15.6316H19.6565L22.1671 18.1421Z" fill="#035A4B"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M1.98508 18V13C1.98508 11.8954 2.88051 11 3.98508 11H11.9851C13.0896 11 13.9851 11.8954 13.9851 13V18C13.9851 19.1046 13.0896 20 11.9851 20H4.10081L2.85695 21.1905C2.53895 21.4949 2.01123 21.2695 2.01123 20.8293V18.3243C1.99402 18.2187 1.98508 18.1104 1.98508 18ZM5.99999 14.5C5.99999 14.2239 6.22385 14 6.49999 14H11.5C11.7761 14 12 14.2239 12 14.5C12 14.7761 11.7761 15 11.5 15H6.49999C6.22385 15 5.99999 14.7761 5.99999 14.5ZM9.49999 16C9.22385 16 8.99999 16.2239 8.99999 16.5C8.99999 16.7761 9.22385 17 9.49999 17H11.5C11.7761 17 12 16.7761 12 16.5C12 16.2239 11.7761 16 11.5 16H9.49999Z" fill="#035A4B"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Help Desk</span>
<p class="navbar-dropdown-menu-media-desc">A customer service demo that helps you balance customer needs.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link" href="https://htmlstream.com/contact-us" target="_blank">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M12 17C16.4183 17 20 13.4183 20 9C20 4.58172 16.4183 1 12 1C7.58172 1 4 4.58172 4 9C4 13.4183 7.58172 17 12 17Z" fill="#035A4B"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M6.53819 9L10.568 19.3624L11.976 18.8149L13.3745 19.3674L17.4703 9H6.53819ZM9.46188 11H14.5298L11.9759 17.4645L9.46188 11Z" fill="#035A4B"/>
<path opacity="0.3" d="M10 22H14V22C14 23.1046 13.1046 24 12 24V24C10.8954 24 10 23.1046 10 22V22Z" fill="#035A4B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18C15.5523 18 16 18.4477 16 19C16 19.5523 15.5523 20 15 20C15.5523 20 16 20.4477 16 21C16 21.5523 15.5523 22 15 22H9C8.44772 22 8 21.5523 8 21C8 20.4477 8.44772 20 9 20C8.44772 20 8 19.5523 8 19C8 18.4477 8.44772 18 9 18C8.44772 18 8 17.5523 8 17Z" fill="#035A4B"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">New demo ideas?</span>
<p class="navbar-dropdown-menu-media-desc">
Send us your suggestions <i class="bi-box-arrow-up-right ms-1"></i>
</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
</div>
<!-- End Promo Item -->
</div>
<!-- End Promo -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Demos -->
<!-- Docs -->
<li class="hs-has-mega-menu nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"maxWidth": "20rem"
}
}'>
<a id="docsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Docs</a>
<!-- Mega Menu -->
<div class="hs-mega-menu hs-position-right dropdown-menu" aria-labelledby="docsMegaMenu" style="min-width: 20rem;">
<!-- Link -->
<a class="navbar-dropdown-menu-media-link" href="../documentation/index.html">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M4.85714 1H11.7364C12.0911 1 12.4343 1.12568 12.7051 1.35474L17.4687 5.38394C17.8057 5.66895 18 6.08788 18 6.5292V19.0833C18 20.8739 17.9796 21 16.1429 21H4.85714C3.02045 21 3 20.8739 3 19.0833V2.91667C3 1.12612 3.02045 1 4.85714 1ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.85714 3H14.7364C15.0911 3 15.4343 3.12568 15.7051 3.35474L20.4687 7.38394C20.8057 7.66895 21 8.08788 21 8.5292V21.0833C21 22.8739 20.9796 23 19.1429 23H6.85714C5.02045 23 5 22.8739 5 21.0833V4.91667C5 3.12612 5.02045 3 6.85714 3ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Documentation <span class="badge bg-primary rounded-pill ms-1">v4.3.1</span></span>
<p class="navbar-dropdown-menu-media-desc">Development guides for building projects with Space</p>
</div>
</div>
</a>
<!-- End Link -->
<div class="dropdown-divider"></div>
<!-- Link -->
<a class="navbar-dropdown-menu-media-link" href="../snippets/index.html">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" d="M21 2H13C12.4 2 12 2.4 12 3V13C12 13.6 12.4 14 13 14H21C21.6 14 22 13.6 22 13V3C22 2.4 21.6 2 21 2ZM15.7 8L14 10.1V5.80005L15.7 8ZM15.1 4H18.9L17 6.40002L15.1 4ZM17 9.59998L18.9 12H15.1L17 9.59998ZM18.3 8L20 5.90002V10.2L18.3 8ZM9 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H9C9.6 22 10 21.6 10 21V3C10 2.4 9.6 2 9 2ZM4.89999 12L4 14.8V9.09998L4.89999 12ZM4.39999 4H7.60001L6 8.80005L4.39999 4ZM6 15.2L7.60001 20H4.39999L6 15.2ZM7.10001 12L8 9.19995V14.9L7.10001 12Z" fill="#035A4B"/>
<path d="M21 18H13C12.4 18 12 17.6 12 17C12 16.4 12.4 16 13 16H21C21.6 16 22 16.4 22 17C22 17.6 21.6 18 21 18ZM19 21C19 20.4 18.6 20 18 20H13C12.4 20 12 20.4 12 21C12 21.6 12.4 22 13 22H18C18.6 22 19 21.6 19 21Z" fill="#035A4B"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Snippets</span>
<p class="navbar-dropdown-menu-media-desc">Move quickly with copy-to-clipboard feature</p>
</div>
</div>
</a>
<!-- End Link -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Docs -->
</ul>
</div>
</nav>
</div>
<!-- End Topbar -->
<div class="container">
<nav class="js-mega-menu navbar-nav-wrap">
<!-- Default Logo -->
<a class="navbar-brand" href="../demo-shop/index.html" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Default Logo -->
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggler -->
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " href="../demo-shop/index.html">Home</a>
</li>
<!-- Dropdown -->
<li class="hs-has-sub-menu nav-item">
<a id="listingsDropdown" class="hs-mega-menu-invoker nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Listings</a>
<div class="hs-sub-menu dropdown-menu" aria-labelledby="listingsDropdown" style="min-width: 14rem;">
<a class="dropdown-item " href="../demo-shop/products-list.html">Listing</a>
<a class="dropdown-item active" href="../demo-shop/products-grid.html">Listing (Grid)</a>
</div>
</li>
<!-- End Dropdown -->
<li class="nav-item">
<a class="nav-link " href="../demo-shop/product-overview.html">Product Overview</a>
</li>
<!-- Pages -->
<li class="hs-has-mega-menu nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "27rem"
}
}'>
<a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " aria-current="page" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
<!-- Mega Menu -->
<div class="hs-mega-menu dropdown-menu" aria-labelledby="pagesMegaMenu" style="min-width: 27rem;">
<div class="navbar-dropdown-menu-inner">
<span class="dropdown-header">Elements</span>
<div class="row">
<div class="col-sm mb-3 mb-sm-0">
<a class="dropdown-item " href="../demo-shop/categories.html">Categories</a>
<a class="dropdown-item " href="../demo-shop/categories-sidebar.html">Categories Sidebar</a>
<a class="dropdown-item " href="../demo-shop/empty-cart.html">Empty Cart</a>
</div>
<!-- End Col -->
<div class="col-sm">
<a class="dropdown-item " href="../demo-shop/cart.html">Cart</a>
<a class="dropdown-item " href="../demo-shop/checkout.html">Checkout</a>
<a class="dropdown-item " href="../demo-shop/order-completed.html">Order Completed</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- Mega Menu Banner -->
<div class="navbar-dropdown-menu-shop-banner">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="navbar-dropdown-menu-shop-banner-img" src="../assets/img/mockups/img4.png" alt="Image Description">
</div>
<div class="flex-grow-1 p-4">
<span class="h4 d-block text-primary">Win T-Shirt</span>
<p>Win one of our Front brand T-shirts.</p>
<a class="btn btn-sm btn-soft-primary btn-transition" href="../index.html">Learn more <i class="bi-chevron-right small"></i></a>
</div>
</div>
</div>
<!-- End Mega Menu Banner -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Pages -->
<li class="nav-item">
<!-- Search -->
<button class="btn btn-ghost-secondary btn-sm btn-icon" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarSearch" aria-controls="offcanvasNavbarSearch">
<i class="bi-search"></i>
</button>
<!-- End Search -->
<!-- Shopping Cart -->
<button type="button" class="btn btn-ghost-secondary btn-sm btn-icon" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarEmptyShoppingCart" aria-controls="offcanvasNavbarEmptyShoppingCart">
<i class="bi-basket"></i>
</button>
<!-- End Shopping Cart -->
<button class="btn btn-primary btn-transition" type="button" data-bs-toggle="modal" data-bs-target="#signupModal">Login</button>
</li>
</ul>
</div>
<!-- End Collapse -->
</nav>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Breadcrumb -->
<div class="bg-light">
<div class="container py-4">
<div class="row">
<div class="col-sm">
<h4 class="mb-0">Products Grid</h4>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="../demo-shop/index.html">Shop</a>
</li>
<li class="breadcrumb-item">
<a href="../demo-shop/products-grid.html">Products</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Grid</li>
</ol>
</nav>
<!-- End Breadcrumb -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Breadcrumb -->
<!-- Card Grid -->
<div class="container content-space-t-1 content-space-t-md-2 content-space-b-2 content-space-b-lg-3">
<div class="row">
<div class="col-lg-3">
<!-- Navbar -->
<div class="navbar-expand-lg mb-5">
<!-- Navbar Toggle -->
<div class="d-grid">
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
<span class="d-flex justify-content-between align-items-center">
<span class="text-dark">Filter</span>
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</span>
</button>
</div>
<!-- End Navbar Toggle -->
<!-- Navbar Collapse -->
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
<div class="w-100">
<!-- Form -->
<form>
<div class="border-bottom pb-4 mb-4">
<h5>Gender</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="menCheckbox" checked>
<label class="form-check-label d-flex" for="menCheckbox">Men <span class="ms-auto">(73)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="womenCheckbox" checked>
<label class="form-check-label d-flex" for="womenCheckbox">Women <span class="ms-auto">(51)</span></label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="border-bottom pb-4 mb-4">
<h5>Brand</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="adidasCheckbox">
<label class="form-check-label d-flex" for="adidasCheckbox">Adidas <span class="ms-auto">(16)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="newBalanceCheckbox">
<label class="form-check-label d-flex" for="newBalanceCheckbox">New Balance <span class="ms-auto">(8)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="nikeCheckbox">
<label class="form-check-label d-flex" for="nikeCheckbox">Nike <span class="ms-auto">(35)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fredPerryCheckbox">
<label class="form-check-label d-flex" for="fredPerryCheckbox">Fred Perry <span class="ms-auto">(5)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="tnfCheckbox">
<label class="form-check-label d-flex" for="tnfCheckbox">The North Face <span class="ms-auto">(1)</span></label>
</div>
<!-- End Checkboxes -->
</div>
<!-- View More - Collapse -->
<div class="collapse" id="collapseBrand">
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="gucciCheckbox">
<label class="form-check-label d-flex" for="gucciCheckbox">Gucci <span class="ms-auto">(5)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="mangoCheckbox">
<label class="form-check-label d-flex" for="mangoCheckbox">Mango <span class="ms-auto">(1)</span></label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<!-- End View More - Collapse -->
<!-- Link -->
<a class="link-sm link-collapse" href="#collapseBrand" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseBrand">
<span class="link-collapse-default">View more</span>
<span class="link-collapse-active">View less</span>
</a>
<!-- End Link -->
</div>
<div class="border-bottom pb-4 mb-4">
<h5>Size</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sizeSCheckbox" checked>
<label class="form-check-label d-flex" for="sizeSCheckbox">S <span class="ms-auto">(27)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sizeMCheckbox">
<label class="form-check-label d-flex" for="sizeMCheckbox">M <span class="ms-auto">(18)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sizeLCheckbox" checked>
<label class="form-check-label d-flex" for="sizeLCheckbox">L <span class="ms-auto">(0)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sizeXLCheckbox">
<label class="form-check-label d-flex" for="sizeXLCheckbox">XL <span class="ms-auto">(1)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sizeXXLCheckbox">
<label class="form-check-label d-flex" for="sizeXXLCheckbox">XXL <span class="ms-auto">(2)</span></label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="border-bottom pb-4 mb-4">
<h5>Category</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="tshirtCheckbox" checked>
<label class="form-check-label d-flex" for="tshirtCheckbox">T-shirt <span class="ms-auto">(73)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="shoesCheckbox">
<label class="form-check-label d-flex" for="shoesCheckbox">Shoes <span class="ms-auto">(0)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="accessoriesCheckbox" checked>
<label class="form-check-label d-flex" for="accessoriesCheckbox">Accessories <span class="ms-auto">(51)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="topsCheckbox" checked>
<label class="form-check-label d-flex" for="topsCheckbox">Tops <span class="ms-auto">(5)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="bottomCheckbox">
<label class="form-check-label d-flex" for="bottomCheckbox">Bottom <span class="ms-auto">(11)</span></label>
</div>
<!-- End Checkboxes -->
</div>
<!-- View More - Collapse -->
<div class="collapse" id="collapseCategory">
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="shortsCheckbox">
<label class="form-check-label d-flex" for="shortsCheckbox">Shorts <span class="ms-auto">(6)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hatsCheckbox">
<label class="form-check-label d-flex" for="hatsCheckbox">Hats <span class="ms-auto">(3)</span></label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="socksCheckbox">
<label class="form-check-label d-flex" for="socksCheckbox">Socks <span class="ms-auto">(8)</span></label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<!-- End View More - Collapse -->
<!-- Link -->
<a class="link-sm link-collapse" href="#collapseCategory" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseCategory">
<span class="link-collapse-default">View more</span>
<span class="link-collapse-active">View less</span>
</a>
<!-- End Link -->
</div>
<div class="border-bottom pb-4 mb-4">
<h5>Rating</h5>
<div class="d-grid gap-2">
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="1starCheckbox">
<label class="form-check-label" for="1starCheckbox">
<span class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
(3)
</span>
</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="2starCheckbox">
<label class="form-check-label" for="2starCheckbox">
<span class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
(10)
</span>
</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="3starCheckbox">
<label class="form-check-label" for="3starCheckbox">
<span class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
(3)
</span>
</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="4starCheckbox">
<label class="form-check-label" for="4starCheckbox">
<span class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
(34)
</span>
</label>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="5starCheckbox">
<label class="form-check-label" for="5starCheckbox">
<span class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
(120)
</span>
</label>
</div>
<!-- End Checkboxes -->
</div>
</div>
<div class="d-grid">
<button type="button" class="btn btn-white btn-transition">Clear all</button>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Navbar Collapse -->
</div>
<!-- End Navbar -->
</div>
<!-- End Col -->
<div class="col-lg-9">
<div class="row align-items-center mb-5">
<div class="col-sm mb-3 mb-sm-0">
<h6 class="mb-0">110 products</h6>
</div>
<div class="col-sm-auto">
<div class="d-sm-flex justify-content-sm-end align-items-center">
<!-- Select -->
<div class="mb-2 mb-sm-0 me-sm-2">
<select class="form-select form-select-sm">
<option value="Relevance" selected>Relevance</option>
<option value="mostRecent">Most recent</option>
</select>
</div>
<!-- End Select -->
<!-- Select -->
<div class="mb-2 mb-sm-0 me-sm-2">
<select class="form-select form-select-sm">
<option value="alphabeticalOrderSelect1" selected>A-to-Z</option>
<option value="alphabeticalOrderSelect2">Z-to-A</option>
</select>
</div>
<!-- End Select -->
<!-- Nav -->
<ul class="nav nav-segment">
<li class="nav-item">
<a class="nav-link active" href="../demo-shop/products-grid.html">
<i class="bi-grid-fill"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../demo-shop/products-list.html">
<i class="bi-list"></i>
</a>
</li>
</ul>
<!-- End Nav -->
</div>
</div>
</div>
<!-- End Row -->
<div class="row row-cols-sm-2 row-cols-md-3 mb-10">
<div class="col mb-4">
<!-- Card -->
<div class="card card-bordered shadow-none text-center h-100">
<div class="card-pinned">
<img class="card-img-top" src="../assets/img/300x180/img3.jpg" alt="Image Description">
<div class="card-pinned-top-start">
<span class="badge bg-success rounded-pill">New arrival</span>
</div>
<div class="card-pinned-top-end">
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
<i class="bi-heart"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="mb-2">
<a class="link-sm link-secondary" href="#">Accessories</a>
</div>
<h4 class="card-title">
<a class="text-dark" href="../demo-shop/product-overview.html">Herschel backpack in dark blue</a>
</h4>
<p class="card-text text-dark">$56.99</p>
</div>
<div class="card-footer pt-0">
<!-- Rating -->
<a class="d-inline-flex align-items-center mb-3" href="#">
<div class="d-flex gap-1 me-2">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
</div>
<span class="small">0</span>
</a>
<!-- End Rating -->
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-4">
<!-- Card -->
<div class="card card-bordered shadow-none text-center h-100">
<div class="card-pinned">
<img class="card-img-top" src="../assets/img/300x180/img1.jpg" alt="Image Description">
<div class="card-pinned-top-end">
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
<i class="bi-heart"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="mb-2">
<a class="link-sm link-secondary" href="#">Clothing</a>
</div>
<h4 class="card-title">
<a class="text-dark" href="../demo-shop/product-overview.html">Front hoodie</a>
</h4>
<p class="card-text text-dark">$91.88</p>
</div>
<div class="card-footer pt-0">
<!-- Rating -->
<a class="d-inline-flex align-items-center mb-3" href="#">
<div class="d-flex gap-1 me-2">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
</div>
<span class="small">40</span>
</a>
<!-- End Rating -->
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col mb-4">
<!-- Card -->
<div class="card card-bordered shadow-none text-center h-100">
<div class="card-pinned">
<img class="card-img-top" src="../assets/img/300x180/img4.jpg" alt="Image Description">
<div class="card-pinned-top-start">
<span class="badge bg-danger rounded-pill">Out of stock</span>