-
Notifications
You must be signed in to change notification settings - Fork 2
/
manSection.html
236 lines (214 loc) · 15.2 KB
/
manSection.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
<!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>Man's Section </title>
<link rel="stylesheet" href="./css/mens.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="icon" href="https://images.bewakoof.com/lib/icon/app-logo.png" sizes="192x192">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!------------------------------------------------------------------ nav --------------------------------------------------------------->
<div id="mainNav">
<div id="Nav">
<div id="upNav">
<div class="nav-text"><a id="blink">FASHION TREND Get Your Daily Dose Of Amazing Deals</a></div>
</div>
<div id="dnav">
<div class="dinner">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>mobile icon</title>
<g opacity=".92" fill="#000">
<path
d="M17.25 3.5v17H6.75v-17h10.5zm.5-1.5H6.25a1 1 0 00-1 1v18a1 1 0 001 1h11.5a1 1 0 001-1V3a1 1 0 00-1-1z">
</path>
<path d="M13 6h-2a.75.75 0 110-1.5h2A.75.75 0 1113 6zM12 19.48a1 1 0 100-2 1 1 0 000 2z">
</path>
</g>
</svg>
<a href="getapp.html">Get App</a>
</div>
<span>|</span>
<div class="dinner">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>address icon</title>
<g opacity=".92" fill="#000">
<path
d="M12 8a2.01 2.01 0 110 4 2.01 2.01 0 110-4zm0-1.5a4 4 0 00-.68.06 3.5 3.5 0 00.68 6.93 3.5 3.5 0 000-7v.01z">
</path>
<path
d="M12 3.5a6.94 6.94 0 012.22.37 6.53 6.53 0 014.28 6.47 6.6 6.6 0 01-1.78 4.49L12 20.24l-4.7-5.38a6.94 6.94 0 01-1.8-4.65A6.62 6.62 0 0112 3.5zM12 2a8.09 8.09 0 00-8 8.21 8.42 8.42 0 002.15 5.61l5.1 5.83a1.001 1.001 0 001.5 0l5.1-5.83A8.05 8.05 0 0020 10.36a8 8 0 00-5.31-7.91A8.34 8.34 0 0012 2z">
</path>
</g>
</svg>
<a href="">Store & Events</a>
</div>
<span>|</span>
<div class="dinner">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>giftcard icon</title>
<g opacity=".92" fill="#000">
<path d="M16 15.6h2.2a.6.6 0 000-1.2H16a.6.6 0 000 1.2z"></path>
<path
d="M21 4.5H3a1 1 0 00-1 1v13a1 1 0 001 1h18a1 1 0 001-1v-13a1 1 0 00-1-1zM3.5 6h4.9v1.66a2.12 2.12 0 00-.69-.47 1.9 1.9 0 00-.39-.11 1.75 1.75 0 00-.4 0c-.258 0-.513.05-.75.15a2.12 2.12 0 00-.69.47 2.23 2.23 0 000 3c.078.077.166.144.26.2H3.5V6zM8 10.32a4.709 4.709 0 01-1.7-.45 1 1 0 010-1.38.86.86 0 01.61-.25.85.85 0 01.61.25A4.47 4.47 0 018 10.32zM8.4 18H3.5v-5.9H7l-1.42 1.38a.59.59 0 000 .85.6.6 0 00.84 0l2-2L8.4 18zm12.1 0H9.6v-5.65l2 2a.6.6 0 00.974-.656.59.59 0 00-.134-.194l-1.39-1.4h9.45V18zM10 10.32a5.16 5.16 0 01.46-1.83.85.85 0 01.61-.25.86.86 0 01.61.25 1 1 0 010 1.37 4.42 4.42 0 01-1.68.46zm10.48.58h-8.15a1.45 1.45 0 00.23-.19 2 2 0 00.26-.33 2.22 2.22 0 000-2.38 1.64 1.64 0 00-.26-.33 1.579 1.579 0 00-.32-.27 1.9 1.9 0 00-.37-.2 2.13 2.13 0 00-1.57 0 2.23 2.23 0 00-.69.47V6H20.5l-.02 4.9z">
</path>
</g>
</svg>
<a href="">Gift Card</a>
</div>
<span>|</span>
<div class="dinner">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>help icon</title>
<g opacity=".92" fill="#000">
<path
d="M12 4.5c4.1 0 7.5 3.4 7.5 7.5s-3.4 7.5-7.5 7.5-7.5-3.4-7.5-7.5S7.9 4.5 12 4.5zM12 3c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9z">
</path>
<path
d="M12 16.4a.8.8 0 100-1.6.8.8 0 000 1.6zM12 13.6c-.4 0-.7-.3-.8-.8v-1.4c0-.4.3-.8.8-.8.6 0 1.2-.5 1.2-1.1 0-.6-.5-1.2-1.1-1.2-.6 0-1.2.5-1.2 1.1 0 .4-.3.8-.8.8s-.7-.2-.7-.7c0-1.5 1.2-2.6 2.7-2.6 1.5 0 2.6 1.2 2.6 2.7 0 1.2-.8 2.2-1.9 2.5v.8c-.1.4-.4.7-.8.7z">
</path>
</g>
</svg>
<a href="">Help</a>
</div>
</div>
</div>
<div id="lowerNav">
<div id="lower">
<a href="index.html">
<img style="width: 200px; height:75%; margin-left: 135px;margin-top: 8px;" src="Images\FashionTrend.png"
alt="">
</a>
<div id="nav-left">
<div class="left"><a href="./html/womens.html">Women</a></div>
<div class="left"><a href="">Men</a></div>
<div class="left"><a href="">Kids</a></div>
<div class="left"><a href="">Tech</a></div>
</div>
</div>
<div id="nav-rigth">
<img src="data:image/png;base64,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"
alt="">
<input on id="search" placeholder="Search by product">
<div id="acc">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.9 21.5001C19.2866 21.5001 19.6 21.1867 19.6 20.8001C19.6 20.4135 19.2866 20.1001 18.9 20.1001C18.5134 20.1001 18.2 20.4135 18.2 20.8001C18.2 21.1867 18.5134 21.5001 18.9 21.5001Z"
fill="#001325" fill-opacity="0.92"></path>
<path
d="M15.9 21.5001C16.2866 21.5001 16.6 21.1867 16.6 20.8001C16.6 20.4135 16.2866 20.1001 15.9 20.1001C15.5134 20.1001 15.2 20.4135 15.2 20.8001C15.2 21.1867 15.5134 21.5001 15.9 21.5001Z"
fill="#001325" fill-opacity="0.92"></path>
<path
d="M12.9 21.5001C13.2866 21.5001 13.6 21.1867 13.6 20.8001C13.6 20.4135 13.2866 20.1001 12.9 20.1001C12.5134 20.1001 12.2 20.4135 12.2 20.8001C12.2 21.1867 12.5134 21.5001 12.9 21.5001Z"
fill="#001325" fill-opacity="0.92"></path>
<path
d="M12 4C12.7 4 13.3 4.2 13.8 4.7C14.3 5.2 14.5 5.9 14.5 6.6V6.7C14.5 7.4 14.3 8.2 13.8 8.7C12.8 9.7 11.2 9.7 10.2 8.7C9.69998 8.2 9.39998 7.5 9.39998 6.8V6.7C9.29998 5.3 10.3 4.1 11.7 4C11.8 4 11.9 4 12 4ZM12 2.5C9.79998 2.5 7.99998 4.3 7.99998 6.5C7.99998 6.6 7.99998 6.6 7.99998 6.7V6.8C7.89998 9 9.59998 10.9 11.8 11C11.9 11 11.9 11 12 11C13.1 11 14.1 10.6 14.9 9.8C15.7 9 16.1 7.9 16 6.8V6.6C16 5.5 15.6 4.4 14.8 3.6C14.1 2.9 13 2.5 12 2.5Z"
fill="#001325" fill-opacity="0.92"></path>
<path
d="M9.79999 21.5002H5.79999C5.39999 21.5002 4.99999 21.3002 4.69999 21.0002C4.39999 20.7002 4.29999 20.2002 4.39999 19.8002C4.99999 15.4002 8.99999 12.4002 13.4 13.0002C16.2 13.4002 18.6 15.2002 19.7 17.8002C19.8 18.2002 19.6 18.6002 19.2 18.8002C18.8 18.9002 18.4 18.8002 18.3 18.4002C17 15.1002 13.2 13.4002 9.89999 14.7002C7.69999 15.6002 6.09999 17.6002 5.79999 20.0002H9.79999C10.2 20.0002 10.6 20.3002 10.6 20.8002C10.6 21.3002 10.2 21.5002 9.79999 21.5002Z"
fill="#001325" fill-opacity="0.92"></path>
</svg>
<span> <a id="account" href="login.html">Account</a> </span>
</div>
<div id="cart">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.5 7.2H16.2V6.9C16.3 4.5 14.4 2.5 12 2.5C9.6 2.6 7.8 4.5 7.8 6.9V7.2H3.5C2.9 7.2 2.5 7.6 2.5 8.2V16.4C2.5 19.2 4.7 21.4 7.5 21.4H16.5C19.3 21.4 21.5 19.2 21.5 16.4V8.2C21.5 7.7 21.1 7.2 20.5 7.2ZM9.3 6.9C9.3 5.4 10.5 4.1 12 4C13.5 4.1 14.7 5.4 14.7 6.9V7.2H9.3V6.9ZM20 16.5C20 18.4 18.4 20 16.5 20H7.5C5.6 20 4 18.4 4 16.5V8.7H7.8V10.7C7.6 10.9 7.5 11.2 7.5 11.4C7.5 12 8 12.4 8.5 12.4C9 12.4 9.5 11.9 9.5 11.4C9.5 11.1 9.4 10.9 9.2 10.7V8.7H14.6V10.6C14.4 10.8 14.3 11.1 14.3 11.4C14.3 12 14.7 12.5 15.3 12.5C15.9 12.5 16.4 12.1 16.4 11.5C16.4 11.2 16.3 11 16.1 10.8V8.8H20V16.5Z"
fill="black"></path>
</svg>
<span> <a id="ct" href="login.html">Cart</a> </span>
</div style="align-items: center;">
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------- nav end ----------------------------------------------------------->
<!----------------------------nav bottom section----------------------------->
<div id="navlower">
<a href="./index.html">Home</a>
<span> / </span>
<a href="#">Men Clothing</a>
<span> / </span>
<a href="#">Men's Top Wear</a>
</div>
<!----------------------------nav bottom section end ----------------------------->
<div id="topheadingSection">
<!-- left Man clothing ******************************************** -->
<div id="manclothingheading">
<h1> <span id="manclothing"> Men's Clothing </span> <span id="count"></span> </h1>
</div>
</div>
<!-- left Man clothing ******************************************** -->
<div id="parentofCart">
<div id="filterdiv">
<select name="" id="Category">
<option value="category">Category</option>
<option value="Tshirt">Tshirt</option>
<option value="shorts">Shorts</option>
<option value="Hoodie">Hoodie</option>
<option value="Long Kurta">Long Kurta</option>
<option value="Jeans">Jeans</option>
</select>
<hr>
<select onChange="handleSort()"name="" id="Size">
<option value="Price">Price</option>
<option value="HTL">High to Low</option>
<option value="LTH">Low to High</option>
</select>
<hr>
<select name="" id="brand">
<option class="text">Brand</option>
<option>Bewakoof</option>
<option>snitch</option>
<option>xyxx</option>
<option>Dillinger</option>
<option>Rigo</option>
<option>Adro</option>
<option>Tistabene</option>
<option>Bushirt</option>
</select>
<hr>
<select name="" id="Design">
<option class="text">Design</option>
<option>Solid</option>
<option>printed</option>
<option>Graphic print</option>
<option>typography</option>
<option>printed</option>
<option>Aop</option>
<option>Strin</option>
<option>Bushirt</option>
</select>
<hr>
<select name="" id="Sizes">
<option class="text">Sizes</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>
<option>3XL</option>
<option>4XL</option>
</select>
<hr>
</div>
<!-- cart Section -->
<div id="cartdiv">
<!-- appending men data here -->
</div>
<!-- cart Section end here -->
</div>
</body>
</html>
<script src="./script/mens.js"></script>