-
Notifications
You must be signed in to change notification settings - Fork 0
/
product.html
489 lines (479 loc) · 19.6 KB
/
product.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Grip Up Climbing - Gear Collection - Product:Modern Approach Shoes
</title>
<link rel="stylesheet" href="./universe/reset.css" />
<link rel="stylesheet" href="./universe/universe.css" />
<link rel="stylesheet" href="./product/product.css" />
<link rel="stylesheet" href="./universe/universe-footer.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700&display=swap"
rel="stylesheet"
/>
<script src="./universe/jquery-3.7.1.js"></script>
</head>
<body>
<section class="header">
<header>
<div id="navbar" class="top"></div>
<div class="pagetype">
<div class="title"><h1>Gear Shop</h1></div>
<div class="page-intro">
<div class="up">
<h4>Climber's Choice</h4>
<p class="pbig">
Browse top-tier climbing gear tailored for peak performance. Our
Gear Shop is stocked with exclusive Grip Up brand items and
essential climbing selections.
</p>
</div>
<p class="pbig down">
Every piece is selected for quality, ensuring you climb with
confidence. Shop where style meets function and take your climb
higher.
</p>
</div>
</div>
<div class="pagelink">
<ul>
<li>
<a class="btn-dark h4" href="shop.html#hotpick-link">Hot Picks</a>
</li>
<li>
<a class="btn-dark h4" href="shop.html#gripup-link"
>GRIP UP Collection</a
>
</li>
<li>
<a class="btn-dark h4" href="shop.html#essential-link"
>Climbing Essentials</a
>
</li>
</ul>
</div>
</header>
</section>
<section class="content">
<div class="backtotop">
<a href="#" class="top-wrap">
<div class="pic"><img src="./universe/top.svg" alt="" /></div>
<p>TOP</p>
</a>
</div>
<section class="item">
<div class="breadcrumb h5">
<ul>
<li><a href="shop.html">Gear Shop</a></li>
<li><a href="shop.html#gripup-link">GRIP UP Collections</a></li>
<li><a href="#shoes">Shoes</a></li>
</ul>
</div>
<div class="wrap">
<div class="pic" id="product-pics">
<img
id="showPic"
src="./product/product-1.png"
alt="Modern Approach Shoes"
/>
<div class="scroll scroll-left" id="scrollMinus">
<img src="./product/left.svg" alt="scroll-left" />
</div>
<div class="scroll scroll-right" id="scrollAdd">
<img src="./product/right.svg" alt="scroll-right" />
</div>
</div>
<div class="info">
<p class="hashtag psmall">#BestSell #MustHave</p>
<h4 class="item-name" id="newlaunchShow-link">
GRIP UP<br />Modern Approach Shoes<span> (Men)</span>
</h4>
<p class="review pbig">Review 232 (4.8)</p>
<p class="price h5">NTD 3,400</p>
<div id="pic-small-area"></div>
<p class="intro psmall">
Unveil the pinnacle of modern design and functionality with GRIP
UP's latest approach shoes, engineered for superior traction,
durability, and a snug fit, ideal for climbers who seek both
performance and style.
</p>
<div class="info-bottom">
<div class="choice-color">
<p class="subtitle pbig">Color information</p>
<div class="color-list">
<label>
<input type="radio" name="color" value="Black" />
<div class="box">
<div class="color bk"></div>
</div>
</label>
<label>
<input type="radio" name="color" value="Orange" />
<div class="box">
<div class="color og"></div>
</div>
</label>
<label>
<input type="radio" name="color" value="Gray" />
<div class="box">
<div class="color gy"></div>
</div>
</label>
</div>
</div>
<div class="size-choice">
<div class="subtitle">
<p class="title pbig">Size Information</p>
<button class="pbig alink" id="size-chart-btn">
Size Chart
</button>
</div>
<ul>
<label>
<input type="radio" name="buy-size" value="US 6" />
<li class="size pbig">6</li>
</label>
<label>
<input type="radio" name="buy-size" value="US 6.5" />
<li class="size pbig">6.5</li>
</label>
<label>
<input type="radio" name="buy-size" value="US 7" />
<li class="size pbig">7</li>
</label>
<label>
<input type="radio" name="buy-size" value="US 7.5" />
<li class="size pbig">7.5</li>
</label>
<label>
<input type="radio" name="buy-size" value="US 8" />
<li class="size pbig">8</li>
</label>
<label>
<input type="radio" name="buy-size" value="US 8.5" />
<li class="size pbig">8.5</li>
</label>
<label>
<input type="radio" name="buy-size" value="US 9" />
<li class="size pbig">9</li>
</label>
<label>
<input type="radio" name="buy-size" value="US 9.5" />
<li class="size pbig">9.5</li>
</label>
<label>
<input type="radio" name="buy-size" value="US 10" />
<li class="size pbig">10</li>
</label>
<label>
<input type="radio" name="buy-size" value="US 10.5" />
<li class="size pbig">10.5</li>
</label>
<label>
<input type="radio" name="buy-size" value="US 11" />
<li class="size pbig">11</li>
</label>
</ul>
</div>
<div class="buying">
<div class="number-wrap">
<div class="cal h6" id="minus">-</div>
<input
type="number"
name=""
id="buy-number"
min="1"
value="1"
/>
<div class="cal h6" id="plus">+</div>
</div>
<button type="submit" id="add-btn">
<p class="h6">add to bag</p>
<div class="hover h6"></div>
</button>
<a href="#" class="icon">
<img src="./product/eva_pin-outline.svg" alt="" />
</a>
</div>
</div>
</div>
</div>
<div class="detail">
<div class="wrap2">
<div class="btn-icon" id="productDetail">
<h4 class="title">Product Details</h4>
<img class="qa-icon" src="./FAQ/arrow-up.svg" alt="" />
</div>
<p class="pbig" id="productDetail-toggle">
GRIP UP's new approach shoes are a testament to advanced footwear
technology, blending aesthetics with performance. Crafted for
climbers who demand excellence, these shoes feature a sleek,
contemporary design that doesn't compromise on functionality. The
robust grip offers unmatched stability on uneven terrain, while
the durable materials promise longevity even in harsh conditions.
Comfort hasn't been overlooked, with a tailored fit that cradles
the foot for all-day wear. The clean backdrop emphasizes the
shoe's modern silhouette, making it a statement piece as much as a
technical gear.
</p>
</div>
<div class="wrap" id="detail-middle">
<ul class="feature">
<div class="btn-icon" id="features-btn">
<h4 class="detail-type h4">Features</h4>
<img class="qa-icon" src="./FAQ/arrow-up.svg" alt="" />
</div>
<div id="features-btn-toggle">
<li class="psmall">
<span class="pbig">Ultra-lightweight construction:</span>
These shoes defy gravity with materials that offer durability
without the weight, perfect for climbers who want to move
quickly and effortlessly.
</li>
<li class="psmall">
<span class="pbig">Quick and easy slip-on design:</span> Slip
them on, secure the fit, and you’re ready to go. Ideal for
adventurers who value time and convenience.
</li>
<li class="psmall">
<span class="pbig">Adaptive fit for maximum comfort:</span>
Contouring to your foot's shape, these shoes provide a custom
fit, ensuring comfort that lasts all day.
</li>
<li class="psmall">
<span class="pbig">Exceptional grip on rocky surfaces:</span>
The superior tread design grips onto any terrain, providing
stability and safety on the most challenging climbs.
</li>
<li class="psmall">
<span class="pbig">Abrasion-resistant outer materials:</span>
Tough against terrain, these materials prevent wear and tear,
prolonging the life of your shoes.
</li>
<li class="psmall">
<span class="pbig"
>Enhanced cushioning for extended wear:</span
>
Soft yet supportive, the cushioning system absorbs impact,
keeping your feet comfortable during prolonged use.
</li>
</div>
</ul>
<ul class="tech">
<p class="detail-type h4">Technology</p>
<li class="tech-wrap">
<img src="./product/waterproof.png" alt="waterproof" />
<div class="text">
<p class="pbig">Waterproofing Mastery</p>
<p class="psmall">
Stay dry with advanced fabric that repels water, essential
for unpredictable weather.
</p>
</div>
</li>
<li class="tech-wrap">
<img src="./product/durability.svg" alt="Durability" />
<div class="text">
<p class="pbig">Durability Redefined</p>
<p class="psmall">
Woven with robust fibers to resist tearing, extending your
shoes' lifespan significantly.
</p>
</div>
</li>
</ul>
</div>
<ul class="wrap2">
<div class="btn-icon" id="techSpec-btn">
<h4 class="detail-type h4">Technical Specifications</h4>
<img class="qa-icon" src="./FAQ/arrow-up.svg" alt="" />
</div>
<div id="techSpec-btn-toggle">
<li class="psmall">
Complies with relevant EU and UIAA standards for climbing
equipment, ensuring safety and performance adherence for
climbing enthusiasts.
</li>
<li class="psmall">
<a href="#ManualInstructionDownload" class="alink"
>Manual Instruction (download)</a
>
</li>
</div>
</ul>
<div class="wrap2">
<div class="btn-icon" id="care-btn">
<h4 class="detail-type h4">Caring and Cleaning Instructions</h4>
<img class="qa-icon" src="./FAQ/arrow-up.svg" alt="" />
</div>
<ul class="caring" id="care-btn-toggle">
<p class="psmall">
To maintain the integrity and performance of the GRIP UP
approach shoes:
</p>
<li class="psmall">
Clean with a soft brush and mild soap; avoid harsh chemicals.
</li>
<li class="psmall">
Dry naturally away from direct heat sources.
</li>
<li class="psmall">
Regularly inspect for wear and tear, especially on the sole and
fasteners.
</li>
<li class="psmall">
Use a waterproofing treatment suitable for synthetic fabrics to
preserve water resistance.
</li>
<li class="psmall">
Store in a cool, dry place away from sunlight when not in use.
</li>
<li class="psmall">
Avoid excessive folding or pressure to maintain shape and
structural support.
</li>
</ul>
</div>
</div>
</section>
<section class="related">
<h3 class="section-title">Related<br /> Products</h3>
<div class="wrap">
<div class="scroll scroll-left" id="scroll-left">
<img src="./universe/scroll-left.svg" alt="" />
</div>
<div id="related-list">
<div id="related-roll">
<div class="item-card">
<div class="pic">
<img src="./shop/tshirt.png" alt="Performance Tee" />
<div class="tag h6">SALE</div>
<a href="#moreDetail" class="hover">
<p class="h6">MORE<br />DETAIL</p>
</a>
</div>
<p class="name pbig">Performance Tee</p>
<div class="choice">
<div class="color-list">
<div class="color bk"></div>
<div class="color og"></div>
<div class="color gy"></div>
<div class="color bl"></div>
<div class="color wt"></div>
</div>
<p class="size-list psmall">S - 2XL</p>
</div>
<p class="price pbig">NTD 700</p>
</div>
<div class="item-card">
<div class="pic">
<img src="./shop/beneie.png" alt="Ascend Tech Beanie" />
<div class="tag h6">SALE</div>
<a href="#moreDetail" class="hover">
<p class="h6">MORE<br />DETAIL</p>
</a>
</div>
<p class="name pbig">Ascend Tech Beanie</p>
<div class="choice">
<div class="color-list">
<div class="color bk"></div>
<div class="color og"></div>
<div class="color gy"></div>
<div class="color bl"></div>
</div>
<p class="size-list psmall">S - L</p>
</div>
<p class="price pbig">NTD 1,380</p>
</div>
<div class="item-card">
<div class="pic">
<img src="./shop/socks.png" alt="Climbing Socks" />
<a href="#moreDetail" class="hover">
<p class="h6">MORE<br />DETAIL</p>
</a>
</div>
<p class="name pbig">Climbing Socks</p>
<div class="choice">
<div class="color-list">
<div class="color bk"></div>
<div class="color og"></div>
<div class="color gy"></div>
<div class="color bl"></div>
</div>
<p class="size-list psmall">S - L</p>
</div>
<p class="price pbig">NTD 300</p>
</div>
<div class="item-card">
<div class="pic">
<img src="./shop/shoe2.png" alt="Nika Approach Shoes" />
<div class="tag h6">SALE</div>
<a href="#moreDetail" class="hover">
<p class="h6">MORE<br />DETAIL</p>
</a>
</div>
<p class="name pbig">Nika Approach Shoes</p>
<div class="choice">
<div class="color-list">
<div class="color bk"></div>
</div>
<p class="size-list psmall">US6 - US9</p>
</div>
<p class="price pbig">NTD 3,000</p>
</div>
<div class="item-card">
<div class="pic">
<img src="./shop/scoche.png" alt="Signature Sacoche Bag" />
<a href="#moreDetail" class="hover">
<p class="h6">MORE<br />DETAIL</p>
</a>
</div>
<p class="name pbig">Signature Sacoche Bag</p>
<div class="choice">
<div class="color-list">
<div class="color bk"></div>
<div class="color og"></div>
<div class="color gy"></div>
<div class="color wt"></div>
</div>
<p class="size-list psmall">S - M</p>
</div>
<p class="price pbig">NTD 1,280</p>
</div>
<div class="item-card">
<div class="pic">
<img src="./shop/shorts.png" alt="TechFlex Shorts" />
<div class="tag h6">SALE</div>
<a href="#moreDetail" class="hover">
<p class="h6">MORE<br />DETAIL</p>
</a>
</div>
<p class="name pbig">TechFlex Shorts</p>
<div class="choice">
<div class="color-list">
<div class="color bl"></div>
<div class="color og"></div>
<div class="color gy"></div>
</div>
<p class="size-list psmall">S - 2XL</p>
</div>
<p class="price pbig">NTD 980</p>
</div>
</div>
</div>
<div class="scroll scroll-right" id="scroll-right">
<img src="./universe/scroll-right.svg" alt="" />
</div>
</div>
</section>
</section>
<footer id="footer-container"></footer>
<script src="./product/product.js"></script>
<script src="./universe/footer.js"></script>
</body>
</html>