Spaces:

srinuksv
/

Project

Running

File size: 9,217 Bytes

fe6e1a0

<!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>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      padding-top: 100px; /* Offset for fixed navbars */
    }

    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>

  <!-- Top 1 Navbar -->
  <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>

  <!-- Top 2 Navbar -->
  <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">
          <!-- Product Image and Variant Images -->
          <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">
          <!-- Product Details -->
          <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>
      <!-- Size & Fit Table -->
      <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()">&times;</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>
              <!-- Add more size options as needed -->
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <section>
      <!-- Care Instructions -->
      <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>

  <!-- Bootstrap JS Bundle (including Popper) -->
  <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>
    // JavaScript for changing product images and selecting sizes
    function changeImage(image) {
      var mainImage = document.getElementById('main-product-image');
      mainImage.src = image.src;
      document.getElementById('product-color').innerText = image.alt; // Update color display
    }

    function selectSize(sizeElement) {
      var sizeList = document.getElementById('size-list').getElementsByTagName('li');
      // Remove active class from all size options
      for (var i = 0; i < sizeList.length; i++) {
        sizeList[i].classList.remove('active');
      }
      // Add active class to the clicked size option
      sizeElement.classList.add('active');
    }

    // Popup functions
    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>