-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathproducts.html
More file actions
137 lines (127 loc) · 5.87 KB
/
Copy pathproducts.html
File metadata and controls
137 lines (127 loc) · 5.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IRONZONE - Products by Category</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/header.css">
<link rel="stylesheet" href="styles/products-page.css">
</head>
<body>
<!-- Header Component -->
<header class="header">
<div class="header__container">
<button class="header__menu-btn" id="menuBtn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
<h1 class="header__logo">IRONZONE</h1>
<!-- Desktop Navigation Menu -->
<nav class="desktop-menu">
<a class="desktop-menu__item" href="index.html">HOME</a>
<a class="desktop-menu__item" href="category.html">CATEGORIES</a>
<a class="desktop-menu__item" href="profile.html">PROFILE</a>
</nav>
<button class="header__cart-btn" id="cartBtn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
</div>
</header>
<!-- Mobile Menu -->
<div class="mobile-menu__overlay" id="menuOverlay"></div>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu__items">
<a class="mobile-menu__item" href="index.html">
<div class="mobile-menu__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
</svg>
</div>
<span>HOME</span>
</a>
<a class="mobile-menu__item" href="category.html">
<div class="mobile-menu__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 3h8v8H3V3m10 0h8v8h-8V3M3 13h8v8H3v-8m10 0h8v8h-8v-8z"></path>
</svg>
</div>
<span>CATEGORIES</span>
</a>
<a class="mobile-menu__item" href="profile.html">
<div class="mobile-menu__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
</svg>
</div>
<span>PROFILE</span>
</a>
<a class="mobile-menu__item" href="cart.html">
<div class="mobile-menu__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</div>
<span>CART</span>
</a>
</div>
</div>
<!-- Products Page -->
<main class="products-page">
<!-- Breadcrumb -->
<div class="breadcrumb">
<a href="index.html" class="breadcrumb__item">Home</a>
<span class="breadcrumb__separator">/</span>
<a href="category.html" class="breadcrumb__item">Categories</a>
<span class="breadcrumb__separator">/</span>
<span class="breadcrumb__item active" id="categoryName">Boxing Gears</span>
</div>
<!-- Page Header with Filters -->
<div class="products-header">
<div class="products-header__top">
<h1 class="products-header__title" id="pageTitle">BOXING GEARS</h1>
<button class="filter-toggle" id="filterToggle">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
</svg>
<span>FILTERS</span>
</button>
</div>
<div class="products-header__info">
<span id="productCount">48 products</span>
<select class="sort-select" id="sortSelect">
<option value="popular">Popular</option>
<option value="latest">Latest</option>
<option value="price-low">Price: Low to High</option>
<option value="price-high">Price: High to Low</option>
<option value="rating">Top Rated</option>
</select>
</div>
</div>
<!-- Category Tabs -->
<div class="category-tabs" id="categoryTabs">
<button class="category-tab active" data-filter="all">All</button>
</div>
<!-- Products Grid -->
<section class="products-grid" id="productsGrid">
<!-- Products will be loaded here -->
</section>
<!-- Load More Button -->
<div class="load-more-container">
<button class="load-more-btn" id="loadMoreBtn">Load More</button>
</div>
</main>
<script src="js/main.js"></script>
<script src="js/products-data.js"></script>
<script src="js/products-page.js"></script>
</body>
</html>