<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Details</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f9f9f9;
        }
        .product-details-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: auto;
        }
        h2 {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .product-image-placeholder {
    width: 300px;
    height: 300px; /* or whatever height you want */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f0f0f0;
}

.theme-product-details-style-08 [data-zs-product-details-primary-section] .zpcontainer [data-zs-product-primary-details] .theme-product-detail-image-container .theme-product-detail-image .theme-product-detail-image-inner picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1/1
}
        .product-description {
            display: inline-block;
            vertical-align: middle;
            max-width: calc(100% - 170px); /* Adjust based on image placeholder width */
        }
        p {
            line-height: 1;
            color: #555;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="product-details-container">
        <h2>PRODUCT DETAILS</h2>
        <div>
            <div class="product-image-placeholder">
                <!-- Image goes here, e.g., <img src="path/to/your/image.jpg" alt="Product Image"> -->
            </div>
            <div class="product-description">
                <p>Jaffman Ayurvedic Soap is made by using time-tested medicated oils like Tamanu Oil, Tuvaraka Taila, Nimba Taila, Kusumba Taila, Karanja Taila and rational combination of 16 different time tested Ayurvedic Herbs such as Aragvadha, Bakuchi, Khadira, Dadrughna, Dronapushpi, Yestimadhu, Haridra, Manjista, Karanja, Kumari, Tulsi, Bhringaraj, Amalaki, Haritaki, Vibhitaki, Vidanga.</p>
            </div>
        </div>
    </div>
</body>
<meta charset="UTF-8">
  <title>Image Description Upload</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .preview {
      margin-top: 20px;
    }
    img {
max-width: 800px;
height: 800px;
display: block;
margin-top: 10px;
}
    textarea {
      width: 100%;
      margin-top: 10px;
      resize: vertical;
    }
  </style>



  <h2>Upload Image with Description</h2>
  
  <label for="imageUpload">Choose an image:</label><br>
  <input type="file" id="imageUpload" accept="image/*"><br><br>
  
  <label for="description">Enter image description:</label><br>
  <textarea id="description" rows="3" placeholder="Describe the image..."></textarea><br><br>

  <div class="preview" id="previewSection">
    <h3>Preview:</h3>
    <img id="previewImage" src="#" alt="" style="display: none;">
    <p id="previewText"></p>
  </div>

  <script>
    const imageUpload = document.getElementById('imageUpload');
    const previewImage = document.getElementById('previewImage');
    const description = document.getElementById('description');
    const previewText = document.getElementById('previewText');

    imageUpload.addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          previewImage.src = e.target.result;
          previewImage.style.display = 'block';
        };
        reader.readAsDataURL(file);
      }
    });

    description.addEventListener('input', function() {
      previewImage.alt = description.value;
      previewText.textContent = "Alt Text: " + description.value;
    });
  </script>
.theme-product-details-style-08 [data-zs-product-details-primary-section] .zpcontainer [data-zs-product-primary-details] .theme-product-detail-image-container .theme-product-detail-image .theme-product-detail-image-inner picture img{
object-fit:contain;
}
</html>