Hugging Face's logo

Spaces:
srinuksv
/
Project
Running

App Files Community
srinuksv commited on
Commit
fe6e1a0
•
1 Parent(s): 8f6ee32

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +669 -18
index.html CHANGED
@@ -1,19 +1,670 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nico Dress - White & Teal Tssxnb</title>
7
+ <!-- Bootstrap CSS -->
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <!-- Custom CSS -->
10
+ <style>
11
+ body {
12
+ font-family: Arial, sans-serif;
13
+ background-color: #f4f4f4;
14
+ padding-top: 100px; /* Offset for fixed navbars */
15
+ }
16
+
17
+ header {
18
+ position: fixed;
19
+ top: 0;
20
+ width: 100%;
21
+ background-color: #2980b9;
22
+ color: white;
23
+ padding: 10px 0;
24
+ text-align: center;
25
+ z-index: 1000;
26
+ }
27
+
28
+ .top-1-navbar {
29
+ background-color: #2980b9;
30
+ color: white;
31
+ padding: 10px 0;
32
+ text-align: center;
33
+ z-index: 999;
34
+ }
35
+
36
+ .top-1-navbar .nav {
37
+ display: flex;
38
+ justify-content: center;
39
+ gap: 20px;
40
+ }
41
+
42
+ .top-1-navbar .nav-item {
43
+ cursor: pointer;
44
+ padding: 10px 15px;
45
+ transition: background-color 0.3s ease;
46
+ }
47
+
48
+ .top-1-navbar .nav-item:hover {
49
+ background-color: #2574a9;
50
+ }
51
+
52
+ .top-2-navbar {
53
+ background-color: #f4f4f1;
54
+ color: rgb(26, 2, 2);
55
+ padding: 10px 0;
56
+ display: flex;
57
+ justify-content: center;
58
+ gap: 20px;
59
+ z-index: 998;
60
+ }
61
+
62
+ .top-2-navbar .nav-item {
63
+ cursor: pointer;
64
+ padding: 10px 15px;
65
+ transition: background-color 0.3s ease;
66
+ }
67
+
68
+ .top-2-navbar .nav-item:hover {
69
+ background-color: #f08080;
70
+ }
71
+
72
+ section {
73
+ background-color: white;
74
+ padding: 20px;
75
+ margin-bottom: 20px;
76
+ border-radius: 8px;
77
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
78
+ }
79
+
80
+ h1 {
81
+ font-size: 24px;
82
+ margin-bottom: 10px;
83
+ }
84
+
85
+ img.product-image {
86
+ max-width: 100%;
87
+ height: auto;
88
+ border-radius: 8px;
89
+ margin-bottom: 20px;
90
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
91
+ }
92
+
93
+ ul.size-list {
94
+ list-style: none;
95
+ padding: 0;
96
+ display: flex;
97
+ gap: 10px;
98
+ margin-bottom: 20px;
99
+ }
100
+
101
+ ul.size-list li {
102
+ cursor: pointer;
103
+ padding: 10px 15px;
104
+ background-color: #f0f0f0;
105
+ border-radius: 5px;
106
+ transition: background-color 0.3s ease;
107
+ }
108
+
109
+ ul.size-list li:hover {
110
+ background-color: #e0e0e0;
111
+ }
112
+
113
+ table.size-chart {
114
+ width: 100%;
115
+ margin-top: 20px;
116
+ border-collapse: collapse;
117
+ }
118
+
119
+ table.size-chart th,
120
+ table.size-chart td {
121
+ padding: 10px;
122
+ text-align: center;
123
+ border: 1px solid #ddd;
124
+ }
125
+
126
+ .variant-images {
127
+ display: flex;
128
+ gap: 10px;
129
+ margin-top: 20px;
130
+ }
131
+
132
+ .variant-images img {
133
+ max-width: 50px;
134
+ height: auto;
135
+ border-radius: 5px;
136
+ cursor: pointer;
137
+ transition: transform 0.3s ease;
138
+ }
139
+
140
+ .variant-images img:hover {
141
+ transform: scale(1.1);
142
+ }
143
+
144
+ .exclusive-collection {
145
+ background-color: #f08080;
146
+ color: white;
147
+ padding: 10px;
148
+ border-radius: 5px;
149
+ text-align: center;
150
+ width: fit-content;
151
+ margin-top: 10px;
152
+ }
153
+
154
+ footer {
155
+ text-align: center;
156
+ padding: 10px;
157
+ background-color: #f0f0f0;
158
+ margin-top: 20px;
159
+ }
160
+
161
+ </style>
162
+ </head>
163
+ <body>
164
+
165
+ <header>
166
+ <h1>Nico Dress - White & Teal Tssxnb</h1>
167
+ </header>
168
+
169
+ <!-- Top 1 Navbar -->
170
+ <div class="top-1-navbar">
171
+ <div class="container">
172
+ <div class="nav">
173
+ <div class="nav-item">Home</div>
174
+ <div class="nav-item">Women</div>
175
+ <div class="nav-item">Men</div>
176
+ <div class="nav-item">Jewellery</div>
177
+ <div class="nav-item">The Gift Shop</div>
178
+ <div class="nav-item">New Arrivals</div>
179
+ <div class="nav-item">Voyager</div>
180
+ <div class="nav-item">Our Story</div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Top 2 Navbar -->
186
+ <div class="top-2-navbar">
187
+ <div class="container">
188
+ <div class="nav">
189
+ <div class="nav-item">Express Delivery</div>
190
+ <div class="nav-item">India</div>
191
+ <div class="nav-item">Search</div>
192
+ <div class="nav-item">For You</div>
193
+ <div class="nav-item">Sign In</div>
194
+ <div class="nav-item">My Bag</div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="container">
200
+ <section>
201
+ <div class="row">
202
+ <div class="col-md-6">
203
+ <!-- Product Image and Variant Images -->
204
+ <img src="1.jpeg" alt="Nico Dress - White & Teal Tssxnb" class="product-image" id="main-product-image">
205
+ <div class="variant-images">
206
+ <img src="1.jpeg" alt="Variant 1" class="variant-image" onclick="changeImage(this)">
207
+ <img src="2.jpeg" alt="Variant 2" class="variant-image" onclick="changeImage(this)">
208
+ <img src="3.jpeg" alt="Variant 3" class="variant-image" onclick="changeImage(this)">
209
+ </div>
210
+ <div class="exclusive-collection">Exclusive Collection: Gray-Black</div>
211
+ </div>
212
+ <div class="col-md-6">
213
+ <!-- Product Details -->
214
+ <p>Material: 100% Organic Cotton</p>
215
+ <p>Color: <span id="product-color">Black</span></p>
216
+ <p>Please select a size</p>
217
+ <ul class="size-list" id="size-list">
218
+ <li onclick="selectSize(this)">XS</li>
219
+ <li onclick="selectSize(this)">S</li>
220
+ <li onclick="selectSize(this)">M</li>
221
+ <li onclick="selectSize(this)">L</li>
222
+ <li onclick="selectSize(this)">XL</li>
223
+ <li onclick="selectSize(this)">2XL</li>
224
+ <li onclick="selectSize(this)">3XL</li>
225
+ </ul>
226
+ <p>Influencer Lock</p>
227
+ <p>Free shipping on orders above ₹ 1,000</p>
228
+ <p>Cash on Delivery (COD) available</p>
229
+ <p>Return within 15 days of order delivery. See T&Cs</p>
230
+ <p><a href="https://global.nicobar.com" target="_blank">Visit global.nicobar.com</a></p>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <section>
236
+ <!-- Size & Fit Table -->
237
+ <h2>SIZE & FIT <a href="#" onclick="openSizeChart()">[Size Chart]</a></h2>
238
+ <div id="sizeChartModal" class="modal">
239
+ <div class="modal-content">
240
+ <span class="close" onclick="closeSizeChartModal()">&times;</span>
241
+ <h2>SIZE CHART</h2>
242
+ <table class="size-chart">
243
+ <thead>
244
+ <tr>
245
+ <th>Size</th>
246
+ <th>Total Length</th>
247
+ <th>Chest</th>
248
+ <th>Waist</th>
249
+ <th>Shoulder</th>
250
+ <th>Sleeve Length</th>
251
+ <th>Biceps</th>
252
+ <th>Armhole</th>
253
+ </tr>
254
+ </thead>
255
+ <tbody>
256
+ <tr>
257
+ <td>XS</td>
258
+ <td>54.25</td>
259
+ <td>33</td>
260
+ <td>26</td>
261
+ <td>14.5</td>
262
+ <td>23.5</td>
263
+ <td>12.8</td>
264
+ <td>6.9</td>
265
+ </tr>
266
+ <tr>
267
+ <td>S</td>
268
+ <td>54.75</td>
269
+ <td>35</td>
270
+ <td>28</td>
271
+ <td>15</td>
272
+ <td>23.8</td>
273
+ <td>13.8</td>
274
+ <td>7.4</td>
275
+ </tr>
276
+ <!-- Add more size options as needed -->
277
+ </tbody>
278
+ </table>
279
+ </div>
280
+ </div>
281
+ </section>
282
+
283
+ <section>
284
+ <!-- Care Instructions -->
285
+ <h2>CARE INSTRUCTIONS</h2>
286
+ <p>Gentle machine wash cold with similar colors.</p>
287
+ <p>Tumble dry low.</p>
288
+ <p>Warm iron.</p>
289
+ <p>Do not iron directly on the foil print.</p>
290
+ <p>Organic Cotton</p>
291
+ <p>Organic cotton is grown without using pesticides, and from non GMO (genetically modified) seeds.</p>
292
+ <p><a href="#">KNOW MORE</a></p>
293
+ </section>
294
+ </div>
295
+
296
+ <footer class="footer">
297
+ <p>Copyright 2024 Nicobar. All rights reserved.</p>
298
+ <p>Terms & Conditions | Privacy Policy</p>
299
+ </footer>
300
+
301
+ <!-- Bootstrap JS Bundle (including Popper) -->
302
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
303
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
304
+
305
+ <script>
306
+ // JavaScript for changing product images and selecting sizes
307
+ function changeImage(image) {
308
+ var mainImage = document.getElementById('main-product-image');
309
+ mainImage.src = image.src;
310
+ document.getElementById('product-color').innerText = image.alt; // Update color display
311
+ }
312
+
313
+ function selectSize(sizeElement) {
314
+ var sizeList = document.getElementById('size-list').getElementsByTagName('li');
315
+ // Remove active class from all size options
316
+ for (var i = 0; i < sizeList.length; i++) {
317
+ sizeList[i].classList.remove('active');
318
+ }
319
+ // Add active class to the clicked size option
320
+ sizeElement.classList.add('active');
321
+ }
322
+
323
+ // Popup functions
324
+ function openSizeChart() {
325
+ var modal = document.getElementById('sizeChartModal');
326
+ modal.style.display = 'block';
327
+ }
328
+
329
+ function closeSizeChartModal() {
330
+ var modal = document.getElementById('sizeChartModal');
331
+ modal.style.display = 'none';
332
+ }
333
+ </script>
334
+ </body>
335
+ </html>
336
+ <!DOCTYPE html>
337
+ <html lang="en">
338
+ <head>
339
+ <meta charset="UTF-8">
340
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
341
+ <title>Nico Dress - White & Teal Tssxnb</title>
342
+ <!-- Bootstrap CSS -->
343
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
344
+ <!-- Custom CSS -->
345
+ <style>
346
+ body {
347
+ font-family: Arial, sans-serif;
348
+ background-color: #f4f4f4;
349
+ padding-top: 100px; /* Offset for fixed navbars */
350
+ }
351
+
352
+ header {
353
+ position: fixed;
354
+ top: 0;
355
+ width: 100%;
356
+ background-color: #2980b9;
357
+ color: white;
358
+ padding: 10px 0;
359
+ text-align: center;
360
+ z-index: 1000;
361
+ }
362
+
363
+ .top-1-navbar {
364
+ background-color: #2980b9;
365
+ color: white;
366
+ padding: 10px 0;
367
+ text-align: center;
368
+ z-index: 999;
369
+ }
370
+
371
+ .top-1-navbar .nav {
372
+ display: flex;
373
+ justify-content: center;
374
+ gap: 20px;
375
+ }
376
+
377
+ .top-1-navbar .nav-item {
378
+ cursor: pointer;
379
+ padding: 10px 15px;
380
+ transition: background-color 0.3s ease;
381
+ }
382
+
383
+ .top-1-navbar .nav-item:hover {
384
+ background-color: #2574a9;
385
+ }
386
+
387
+ .top-2-navbar {
388
+ background-color: #f4f4f1;
389
+ color: rgb(26, 2, 2);
390
+ padding: 10px 0;
391
+ display: flex;
392
+ justify-content: center;
393
+ gap: 20px;
394
+ z-index: 998;
395
+ }
396
+
397
+ .top-2-navbar .nav-item {
398
+ cursor: pointer;
399
+ padding: 10px 15px;
400
+ transition: background-color 0.3s ease;
401
+ }
402
+
403
+ .top-2-navbar .nav-item:hover {
404
+ background-color: #f08080;
405
+ }
406
+
407
+ section {
408
+ background-color: white;
409
+ padding: 20px;
410
+ margin-bottom: 20px;
411
+ border-radius: 8px;
412
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
413
+ }
414
+
415
+ h1 {
416
+ font-size: 24px;
417
+ margin-bottom: 10px;
418
+ }
419
+
420
+ img.product-image {
421
+ max-width: 100%;
422
+ height: auto;
423
+ border-radius: 8px;
424
+ margin-bottom: 20px;
425
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
426
+ }
427
+
428
+ ul.size-list {
429
+ list-style: none;
430
+ padding: 0;
431
+ display: flex;
432
+ gap: 10px;
433
+ margin-bottom: 20px;
434
+ }
435
+
436
+ ul.size-list li {
437
+ cursor: pointer;
438
+ padding: 10px 15px;
439
+ background-color: #f0f0f0;
440
+ border-radius: 5px;
441
+ transition: background-color 0.3s ease;
442
+ }
443
+
444
+ ul.size-list li:hover {
445
+ background-color: #e0e0e0;
446
+ }
447
+
448
+ table.size-chart {
449
+ width: 100%;
450
+ margin-top: 20px;
451
+ border-collapse: collapse;
452
+ }
453
+
454
+ table.size-chart th,
455
+ table.size-chart td {
456
+ padding: 10px;
457
+ text-align: center;
458
+ border: 1px solid #ddd;
459
+ }
460
+
461
+ .variant-images {
462
+ display: flex;
463
+ gap: 10px;
464
+ margin-top: 20px;
465
+ }
466
+
467
+ .variant-images img {
468
+ max-width: 50px;
469
+ height: auto;
470
+ border-radius: 5px;
471
+ cursor: pointer;
472
+ transition: transform 0.3s ease;
473
+ }
474
+
475
+ .variant-images img:hover {
476
+ transform: scale(1.1);
477
+ }
478
+
479
+ .exclusive-collection {
480
+ background-color: #f08080;
481
+ color: white;
482
+ padding: 10px;
483
+ border-radius: 5px;
484
+ text-align: center;
485
+ width: fit-content;
486
+ margin-top: 10px;
487
+ }
488
+
489
+ footer {
490
+ text-align: center;
491
+ padding: 10px;
492
+ background-color: #f0f0f0;
493
+ margin-top: 20px;
494
+ }
495
+
496
+ </style>
497
+ </head>
498
+ <body>
499
+
500
+ <header>
501
+ <h1>Nico Dress - White & Teal Tssxnb</h1>
502
+ </header>
503
+
504
+ <!-- Top 1 Navbar -->
505
+ <div class="top-1-navbar">
506
+ <div class="container">
507
+ <div class="nav">
508
+ <div class="nav-item">Home</div>
509
+ <div class="nav-item">Women</div>
510
+ <div class="nav-item">Men</div>
511
+ <div class="nav-item">Jewellery</div>
512
+ <div class="nav-item">The Gift Shop</div>
513
+ <div class="nav-item">New Arrivals</div>
514
+ <div class="nav-item">Voyager</div>
515
+ <div class="nav-item">Our Story</div>
516
+ </div>
517
+ </div>
518
+ </div>
519
+
520
+ <!-- Top 2 Navbar -->
521
+ <div class="top-2-navbar">
522
+ <div class="container">
523
+ <div class="nav">
524
+ <div class="nav-item">Express Delivery</div>
525
+ <div class="nav-item">India</div>
526
+ <div class="nav-item">Search</div>
527
+ <div class="nav-item">For You</div>
528
+ <div class="nav-item">Sign In</div>
529
+ <div class="nav-item">My Bag</div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="container">
535
+ <section>
536
+ <div class="row">
537
+ <div class="col-md-6">
538
+ <!-- Product Image and Variant Images -->
539
+ <img src="1.jpeg" alt="Nico Dress - White & Teal Tssxnb" class="product-image" id="main-product-image">
540
+ <div class="variant-images">
541
+ <img src="1.jpeg" alt="Variant 1" class="variant-image" onclick="changeImage(this)">
542
+ <img src="2.jpeg" alt="Variant 2" class="variant-image" onclick="changeImage(this)">
543
+ <img src="3.jpeg" alt="Variant 3" class="variant-image" onclick="changeImage(this)">
544
+ </div>
545
+ <div class="exclusive-collection">Exclusive Collection: Gray-Black</div>
546
+ </div>
547
+ <div class="col-md-6">
548
+ <!-- Product Details -->
549
+ <p>Material: 100% Organic Cotton</p>
550
+ <p>Color: <span id="product-color">Black</span></p>
551
+ <p>Please select a size</p>
552
+ <ul class="size-list" id="size-list">
553
+ <li onclick="selectSize(this)">XS</li>
554
+ <li onclick="selectSize(this)">S</li>
555
+ <li onclick="selectSize(this)">M</li>
556
+ <li onclick="selectSize(this)">L</li>
557
+ <li onclick="selectSize(this)">XL</li>
558
+ <li onclick="selectSize(this)">2XL</li>
559
+ <li onclick="selectSize(this)">3XL</li>
560
+ </ul>
561
+ <p>Influencer Lock</p>
562
+ <p>Free shipping on orders above ₹ 1,000</p>
563
+ <p>Cash on Delivery (COD) available</p>
564
+ <p>Return within 15 days of order delivery. See T&Cs</p>
565
+ <p><a href="#" target="_blank">Visit global.nicobar.com</a></p>
566
+ </div>
567
+ </div>
568
+ </section>
569
+
570
+ <section>
571
+ <!-- Size & Fit Table -->
572
+ <h2>SIZE & FIT <a href="#" onclick="openSizeChart()">[Size Chart]</a></h2>
573
+ <div id="sizeChartModal" class="modal">
574
+ <div class="modal-content">
575
+ <span class="close" onclick="closeSizeChartModal()">&times;</span>
576
+ <h2>SIZE CHART</h2>
577
+ <table class="size-chart">
578
+ <thead>
579
+ <tr>
580
+ <th>Size</th>
581
+ <th>Total Length</th>
582
+ <th>Chest</th>
583
+ <th>Waist</th>
584
+ <th>Shoulder</th>
585
+ <th>Sleeve Length</th>
586
+ <th>Biceps</th>
587
+ <th>Armhole</th>
588
+ </tr>
589
+ </thead>
590
+ <tbody>
591
+ <tr>
592
+ <td>XS</td>
593
+ <td>54.25</td>
594
+ <td>33</td>
595
+ <td>26</td>
596
+ <td>14.5</td>
597
+ <td>23.5</td>
598
+ <td>12.8</td>
599
+ <td>6.9</td>
600
+ </tr>
601
+ <tr>
602
+ <td>S</td>
603
+ <td>54.75</td>
604
+ <td>35</td>
605
+ <td>28</td>
606
+ <td>15</td>
607
+ <td>23.8</td>
608
+ <td>13.8</td>
609
+ <td>7.4</td>
610
+ </tr>
611
+ <!-- Add more size options as needed -->
612
+ </tbody>
613
+ </table>
614
+ </div>
615
+ </div>
616
+ </section>
617
+
618
+ <section>
619
+ <!-- Care Instructions -->
620
+ <h2>CARE INSTRUCTIONS</h2>
621
+ <p>Gentle machine wash cold with similar colors.</p>
622
+ <p>Tumble dry low.</p>
623
+ <p>Warm iron.</p>
624
+ <p>Do not iron directly on the foil print.</p>
625
+ <p>Organic Cotton</p>
626
+ <p>Organic cotton is grown without using pesticides, and from non GMO (genetically modified) seeds.</p>
627
+ <p><a href="#">KNOW MORE</a></p>
628
+ </section>
629
+ </div>
630
+
631
+ <footer class="footer">
632
+ <p>Copyright 2024 Nicobar. All rights reserved.</p>
633
+ <p>Terms & Conditions | Privacy Policy</p>
634
+ </footer>
635
+
636
+ <!-- Bootstrap JS Bundle (including Popper) -->
637
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
638
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
639
+
640
+ <script>
641
+ // JavaScript for changing product images and selecting sizes
642
+ function changeImage(image) {
643
+ var mainImage = document.getElementById('main-product-image');
644
+ mainImage.src = image.src;
645
+ document.getElementById('product-color').innerText = image.alt; // Update color display
646
+ }
647
+
648
+ function selectSize(sizeElement) {
649
+ var sizeList = document.getElementById('size-list').getElementsByTagName('li');
650
+ // Remove active class from all size options
651
+ for (var i = 0; i < sizeList.length; i++) {
652
+ sizeList[i].classList.remove('active');
653
+ }
654
+ // Add active class to the clicked size option
655
+ sizeElement.classList.add('active');
656
+ }
657
+
658
+ // Popup functions
659
+ function openSizeChart() {
660
+ var modal = document.getElementById('sizeChartModal');
661
+ modal.style.display = 'block';
662
+ }
663
+
664
+ function closeSizeChartModal() {
665
+ var modal = document.getElementById('sizeChartModal');
666
+ modal.style.display = 'none';
667
+ }
668
+ </script>
669
+ </body>
670
  </html>