|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Nico Dress - White & Teal Tssxnb</title> |
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
background-color: #f4f4f4; |
|
padding-top: 100px; |
|
} |
|
|
|
header { |
|
position: fixed; |
|
top: 0; |
|
width: 100%; |
|
background-color: #2980b9; |
|
color: white; |
|
padding: 10px 0; |
|
text-align: center; |
|
z-index: 1000; |
|
} |
|
|
|
.top-1-navbar { |
|
background-color: #2980b9; |
|
color: white; |
|
padding: 10px 0; |
|
text-align: center; |
|
z-index: 999; |
|
} |
|
|
|
.top-1-navbar .nav { |
|
display: flex; |
|
justify-content: center; |
|
gap: 20px; |
|
} |
|
|
|
.top-1-navbar .nav-item { |
|
cursor: pointer; |
|
padding: 10px 15px; |
|
transition: background-color 0.3s ease; |
|
} |
|
|
|
.top-1-navbar .nav-item:hover { |
|
background-color: #2574a9; |
|
} |
|
|
|
.top-2-navbar { |
|
background-color: #f4f4f1; |
|
color: rgb(26, 2, 2); |
|
padding: 10px 0; |
|
display: flex; |
|
justify-content: center; |
|
gap: 20px; |
|
z-index: 998; |
|
} |
|
|
|
.top-2-navbar .nav-item { |
|
cursor: pointer; |
|
padding: 10px 15px; |
|
transition: background-color 0.3s ease; |
|
} |
|
|
|
.top-2-navbar .nav-item:hover { |
|
background-color: #f08080; |
|
} |
|
|
|
section { |
|
background-color: white; |
|
padding: 20px; |
|
margin-bottom: 20px; |
|
border-radius: 8px; |
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
h1 { |
|
font-size: 24px; |
|
margin-bottom: 10px; |
|
} |
|
|
|
img.product-image { |
|
max-width: 100%; |
|
height: auto; |
|
border-radius: 8px; |
|
margin-bottom: 20px; |
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
ul.size-list { |
|
list-style: none; |
|
padding: 0; |
|
display: flex; |
|
gap: 10px; |
|
margin-bottom: 20px; |
|
} |
|
|
|
ul.size-list li { |
|
cursor: pointer; |
|
padding: 10px 15px; |
|
background-color: #f0f0f0; |
|
border-radius: 5px; |
|
transition: background-color 0.3s ease; |
|
} |
|
|
|
ul.size-list li:hover { |
|
background-color: #e0e0e0; |
|
} |
|
|
|
table.size-chart { |
|
width: 100%; |
|
margin-top: 20px; |
|
border-collapse: collapse; |
|
} |
|
|
|
table.size-chart th, |
|
table.size-chart td { |
|
padding: 10px; |
|
text-align: center; |
|
border: 1px solid #ddd; |
|
} |
|
|
|
.variant-images { |
|
display: flex; |
|
gap: 10px; |
|
margin-top: 20px; |
|
} |
|
|
|
.variant-images img { |
|
max-width: 50px; |
|
height: auto; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
transition: transform 0.3s ease; |
|
} |
|
|
|
.variant-images img:hover { |
|
transform: scale(1.1); |
|
} |
|
|
|
.exclusive-collection { |
|
background-color: #f08080; |
|
color: white; |
|
padding: 10px; |
|
border-radius: 5px; |
|
text-align: center; |
|
width: fit-content; |
|
margin-top: 10px; |
|
} |
|
|
|
footer { |
|
text-align: center; |
|
padding: 10px; |
|
background-color: #f0f0f0; |
|
margin-top: 20px; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<header> |
|
<h1>Nico Dress - White & Teal Tssxnb</h1> |
|
</header> |
|
|
|
|
|
<div class="top-1-navbar"> |
|
<div class="container"> |
|
<div class="nav"> |
|
<div class="nav-item">Home</div> |
|
<div class="nav-item">Women</div> |
|
<div class="nav-item">Men</div> |
|
<div class="nav-item">Jewellery</div> |
|
<div class="nav-item">The Gift Shop</div> |
|
<div class="nav-item">New Arrivals</div> |
|
<div class="nav-item">Voyager</div> |
|
<div class="nav-item">Our Story</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="top-2-navbar"> |
|
<div class="container"> |
|
<div class="nav"> |
|
<div class="nav-item">Express Delivery</div> |
|
<div class="nav-item">India</div> |
|
<div class="nav-item">Search</div> |
|
<div class="nav-item">For You</div> |
|
<div class="nav-item">Sign In</div> |
|
<div class="nav-item">My Bag</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="container"> |
|
<section> |
|
<div class="row"> |
|
<div class="col-md-6"> |
|
|
|
<img src="1.jpeg" alt="Nico Dress - White & Teal Tssxnb" class="product-image" id="main-product-image"> |
|
<div class="variant-images"> |
|
<img src="1.jpeg" alt="Variant 1" class="variant-image" onclick="changeImage(this)"> |
|
<img src="2.jpeg" alt="Variant 2" class="variant-image" onclick="changeImage(this)"> |
|
<img src="3.jpeg" alt="Variant 3" class="variant-image" onclick="changeImage(this)"> |
|
</div> |
|
<div class="exclusive-collection">Exclusive Collection: Gray-Black</div> |
|
</div> |
|
<div class="col-md-6"> |
|
|
|
<p>Material: 100% Organic Cotton</p> |
|
<p>Color: <span id="product-color">Black</span></p> |
|
<p>Please select a size</p> |
|
<ul class="size-list" id="size-list"> |
|
<li onclick="selectSize(this)">XS</li> |
|
<li onclick="selectSize(this)">S</li> |
|
<li onclick="selectSize(this)">M</li> |
|
<li onclick="selectSize(this)">L</li> |
|
<li onclick="selectSize(this)">XL</li> |
|
<li onclick="selectSize(this)">2XL</li> |
|
<li onclick="selectSize(this)">3XL</li> |
|
</ul> |
|
<p>Influencer Lock</p> |
|
<p>Free shipping on orders above ₹ 1,000</p> |
|
<p>Cash on Delivery (COD) available</p> |
|
<p>Return within 15 days of order delivery. See T&Cs</p> |
|
<p><a href="https://global.nicobar.com" target="_blank">Visit global.nicobar.com</a></p> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<section> |
|
|
|
<h2>SIZE & FIT <a href="#" onclick="openSizeChart()">[Size Chart]</a></h2> |
|
<div id="sizeChartModal" class="modal"> |
|
<div class="modal-content"> |
|
<span class="close" onclick="closeSizeChartModal()">×</span> |
|
<h2>SIZE CHART</h2> |
|
<table class="size-chart"> |
|
<thead> |
|
<tr> |
|
<th>Size</th> |
|
<th>Total Length</th> |
|
<th>Chest</th> |
|
<th>Waist</th> |
|
<th>Shoulder</th> |
|
<th>Sleeve Length</th> |
|
<th>Biceps</th> |
|
<th>Armhole</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr> |
|
<td>XS</td> |
|
<td>54.25</td> |
|
<td>33</td> |
|
<td>26</td> |
|
<td>14.5</td> |
|
<td>23.5</td> |
|
<td>12.8</td> |
|
<td>6.9</td> |
|
</tr> |
|
<tr> |
|
<td>S</td> |
|
<td>54.75</td> |
|
<td>35</td> |
|
<td>28</td> |
|
<td>15</td> |
|
<td>23.8</td> |
|
<td>13.8</td> |
|
<td>7.4</td> |
|
</tr> |
|
|
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<section> |
|
|
|
<h2>CARE INSTRUCTIONS</h2> |
|
<p>Gentle machine wash cold with similar colors.</p> |
|
<p>Tumble dry low.</p> |
|
<p>Warm iron.</p> |
|
<p>Do not iron directly on the foil print.</p> |
|
<p>Organic Cotton</p> |
|
<p>Organic cotton is grown without using pesticides, and from non GMO (genetically modified) seeds.</p> |
|
<p><a href="#">KNOW MORE</a></p> |
|
</section> |
|
</div> |
|
|
|
<footer class="footer"> |
|
<p>Copyright 2024 Nicobar. All rights reserved.</p> |
|
<p>Terms & Conditions | Privacy Policy</p> |
|
</footer> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script> |
|
|
|
<script> |
|
|
|
function changeImage(image) { |
|
var mainImage = document.getElementById('main-product-image'); |
|
mainImage.src = image.src; |
|
document.getElementById('product-color').innerText = image.alt; |
|
} |
|
|
|
function selectSize(sizeElement) { |
|
var sizeList = document.getElementById('size-list').getElementsByTagName('li'); |
|
|
|
for (var i = 0; i < sizeList.length; i++) { |
|
sizeList[i].classList.remove('active'); |
|
} |
|
|
|
sizeElement.classList.add('active'); |
|
} |
|
|
|
|
|
function openSizeChart() { |
|
var modal = document.getElementById('sizeChartModal'); |
|
modal.style.display = 'block'; |
|
} |
|
|
|
function closeSizeChartModal() { |
|
var modal = document.getElementById('sizeChartModal'); |
|
modal.style.display = 'none'; |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
|
|