Scribd
Upload
8 views10 pages

Products Code File

product

Uploaded by

Shaikh Maaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views10 pages

Products Code File

product

Uploaded by

Shaikh Maaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Garment Products Grid</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}

.products-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.product-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.product-container:hover {
transform: translateY(-5px);
}

.product {
display: flex;
width: 100%;
gap: 20px;
}

.image-section {
flex-shrink: 0;
width: 50%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.image-carousel {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%; /* Maintain aspect ratio */
overflow: hidden;
border-radius: 10px;
}

.carousel-images img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}

.carousel-images img:not(:first-child) {
opacity: 0;
}

.carousel-controls {
display: none;
justify-content: center;
gap: 10px;
margin-top: 10px;
}

.carousel-controls button {
background-color: #6c757d;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.carousel-controls button:hover {
background-color: #5a6268;
}

.details-section {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
}

.product-title {
margin: 0;
font-size: 24px;
color: #333;
}

.product-price {
margin: 10px 0;
font-size: 20px;
color: #333;
font-weight: bold;
}

.product-description {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
.order-button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
align-self: start;
}

.order-button:hover {
background-color: #0056b3;
}

/* Responsive Design */
@media (min-width: 601px) {
.carousel-controls {
display: flex;
}
}

@media (max-width: 600px) {


.products-grid {
grid-template-columns: 1fr;
}

.product {
flex-direction: column;
}

.image-section, .details-section {
width: 100%;
}

.image-carousel {
padding-bottom: 75%; /* Adjust aspect ratio for smaller screens */
}
}
</style>
</head>
<body>
<div class="products-grid">
<!-- Product 1 -->
<div class="product-container">
<div class="product">
<div class="image-section">
<div class="image-carousel">
<div class="carousel-images">
<img src="main-product.jpg" alt="Product Image 1"
loading="lazy">
<img src="product-1.jpg" alt="Product Image 2"
loading="lazy">
<img src="product-2.jpg" alt="Product Image 3"
loading="lazy">
<img src="product-3.jpg" alt="Product Image 4"
loading="lazy">
</div>
</div>
<div class="carousel-controls">
<button id="prevBtn1">&lt;</button>
<button id="nextBtn1">&gt;</button>
</div>
</div>
<div class="details-section">
<h2 class="product-title">Product Name 1</h2>
<p class="product-price">$49.99</p>
<p class="product-description">This is a short description of
the product 1.</p>
<button class="order-button"
onclick="location.href='https://forms.gle/your-google-form-link'">Order
Now</button>
</div>
</div>
</div>

<!-- Product 2 -->


<div class="product-container">
<div class="product">
<div class="image-section">
<div class="image-carousel">
<div class="carousel-images">
<img src="main-product.jpg" alt="Product Image 1"
loading="lazy">
<img src="product-1.jpg" alt="Product Image 2"
loading="lazy">
<img src="product-2.jpg" alt="Product Image 3"
loading="lazy">
<img src="product-3.jpg" alt="Product Image 4"
loading="lazy">
</div>
</div>
<div class="carousel-controls">
<button id="prevBtn2">&lt;</button>
<button id="nextBtn2">&gt;</button>
</div>
</div>
<div class="details-section">
<h2 class="product-title">Product Name 2</h2>
<p class="product-price">$59.99</p>
<p class="product-description">This is a short description of
the product 2.</p>
<button class="order-button"
onclick="location.href='https://forms.gle/your-google-form-link'">Order
Now</button>
</div>
</div>
</div>

<!-- Repeat similar blocks for other products -->

<!-- Product 3 -->


<div class="product-container">
<div class="product">
<div class="image-section">
<div class="image-carousel">
<div class="carousel-images">
<img src="main-product.jpg" alt="Product Image 1"
loading="lazy">
<img src="product-1.jpg" alt="Product Image 2"
loading="lazy">
<img src="product-2.jpg" alt="Product Image 3"
loading="lazy">
<img src="product-3.jpg" alt="Product Image 4"
loading="lazy">
</div>
</div>
<div class="carousel-controls">
<button id="prevBtn3">&lt;</button>
<button id="nextBtn3">&gt;</button>
</div>
</div>
<div class="details-section">
<h2 class="product-title">Product Name 3</h2>
<p class="product-price">$69.99</p>
<p class="product-description">This is a short description of
the product 3.</p>
<button class="order-button"
onclick="location.href='https://forms.gle/your-google-form-link'">Order
Now</button>
</div>
</div>
</div>

<!-- Product 4 -->


<div class="product-container">
<div class="product">
<div class="image-section">
<div class="image-carousel">
<div class="carousel-images">
<img src="main-product.jpg" alt="Product Image 1"
loading="lazy">
<img src="product-1.jpg" alt="Product Image 2"
loading="lazy">
<img src="product-2.jpg" alt="Product Image 3"
loading="lazy">
<img src="product-3.jpg" alt="Product Image 4"
loading="lazy">
</div>
</div>
<div class="carousel-controls">
<button id="prevBtn4">&lt;</button>
<button id="nextBtn4">&gt;</button>
</div>
</div>
<div class="details-section">
<h2 class="product-title">Product Name 4</h2>
<p class="product-price">$79.99</p>
<p class="product-description">This is a short description of
the product 4.</p>
<button class="order-button"
onclick="location.href='https://forms.gle/your-google-form-link'">Order
Now</button>
</div>
</div>
</div>
<!-- Product 5 -->
<div class="product-container">
<div class="product">
<div class="image-section">
<div class="image-carousel">
<div class="carousel-images">
<img src="main-product.jpg" alt="Product Image 1"
loading="lazy">
<img src="product-1.jpg" alt="Product Image 2"
loading="lazy">
<img src="product-2.jpg" alt="Product Image 3"
loading="lazy">
<img src="product-3.jpg" alt="Product Image 4"
loading="lazy">
</div>
</div>
<div class="carousel-controls">
<button id="prevBtn5">&lt;</button>
<button id="nextBtn5">&gt;</button>
</div>
</div>
<div class="details-section">
<h2 class="product-title">Product Name 5</h2>
<p class="product-price">$89.99</p>
<p class="product-description">This is a short description of
the product 5.</p>
<button class="order-button"
onclick="location.href='https://forms.gle/your-google-form-link'">Order
Now</button>
</div>
</div>
</div>

<!-- Product 6 -->


<div class="product-container">
<div class="product">
<div class="image-section">
<div class="image-carousel">
<div class="carousel-images">
<img src="main-product.jpg" alt="Product Image 1"
loading="lazy">
<img src="product-1.jpg" alt="Product Image 2"
loading="lazy">
<img src="product-2.jpg" alt="Product Image 3"
loading="lazy">
<img src="product-3.jpg" alt="Product Image 4"
loading="lazy">
</div>
</div>
<div class="carousel-controls">
<button id="prevBtn6">&lt;</button>
<button id="nextBtn6">&gt;</button>
</div>
</div>
<div class="details-section">
<h2 class="product-title">Product Name 6</h2>
<p class="product-price">$99.99</p>
<p class="product-description">This is a short description of
the product 6.</p>
<button class="order-button"
onclick="location.href='https://forms.gle/your-google-form-link'">Order
Now</button>
</div>
</div>
</div>

<!-- Product 7 -->


<div class="product-container">
<div class="product">
<div class="image-section">
<div class="image-carousel">
<div class="carousel-images">
<img src="main-product.jpg" alt="Product Image 1"
loading="lazy">
<img src="product-1.jpg" alt="Product Image 2"
loading="lazy">
<img src="product-2.jpg" alt="Product Image 3"
loading="lazy">
<img src="product-3.jpg" alt="Product Image 4"
loading="lazy">
</div>
</div>
<div class="carousel-controls">
<button id="prevBtn7">&lt;</button>
<button id="nextBtn7">&gt;</button>
</div>
</div>
<div class="details-section">
<h2 class="product-title">Product Name 7</h2>
<p class="product-price">$109.99</p>
<p class="product-description">This is a short description of
the product 7.</p>
<button class="order-button"
onclick="location.href='https://forms.gle/your-google-form-link'">Order
Now</button>
</div>
</div>
</div>

<!-- Product 8 -->


<div class="product-container">
<div class="product">
<div class="image-section">
<div class="image-carousel">
<div class="carousel-images">
<img src="main-product.jpg" alt="Product Image 1"
loading="lazy">
<img src="product-1.jpg" alt="Product Image 2"
loading="lazy">
<img src="product-2.jpg" alt="Product Image 3"
loading="lazy">
<img src="product-3.jpg" alt="Product Image 4"
loading="lazy">
</div>
</div>
<div class="carousel-controls">
<button id="prevBtn8">&lt;</button>
<button id="nextBtn8">&gt;</button>
</div>
</div>
<div class="details-section">
<h2 class="product-title">Product Name 8</h2>
<p class="product-price">$119.99</p>
<p class="product-description">This is a short description of
the product 8.</p>
<button class="order-button"
onclick="location.href='https://forms.gle/your-google-form-link'">Order
Now</button>
</div>
</div>
</div>

<!-- Product 9 -->


<div class="product-container">
<div class="product">
<div class="image-section">
<div class="image-carousel">
<div class="carousel-images">
<img src="main-product.jpg" alt="Product Image 1"
loading="lazy">
<img src="product-1.jpg" alt="Product Image 2"
loading="lazy">
<img src="product-2.jpg" alt="Product Image 3"
loading="lazy">
<img src="product-3.jpg" alt="Product Image 4"
loading="lazy">
</div>
</div>
<div class="carousel-controls">
<button id="prevBtn9">&lt;</button>
<button id="nextBtn9">&gt;</button>
</div>
</div>
<div class="details-section">
<h2 class="product-title">Product Name 9</h2>
<p class="product-price">$129.99</p>
<p class="product-description">This is a short description of
the product 9.</p>
<button class="order-button"
onclick="location.href='https://forms.gle/your-google-form-link'">Order
Now</button>
</div>
</div>
</div>

<!-- Product 10 -->


<div class="product-container">
<div class="product">
<div class="image-section">
<div class="image-carousel">
<div class="carousel-images">
<img src="main-product.jpg" alt="Product Image 1"
loading="lazy">
<img src="product-1.jpg" alt="Product Image 2"
loading="lazy">
<img src="product-2.jpg" alt="Product Image 3"
loading="lazy">
<img src="product-3.jpg" alt="Product Image 4"
loading="lazy">
</div>
</div>
<div class="carousel-controls">
<button id="prevBtn10">&lt;</button>
<button id="nextBtn10">&gt;</button>
</div>
</div>
<div class="details-section">
<h2 class="product-title">Product Name 10</h2>
<p class="product-price">$139.99</p>
<p class="product-description">This is a short description of
the product 10.</p>
<button class="order-button"
onclick="location.href='https://forms.gle/your-google-form-link'">Order
Now</button>
</div>
</div>
</div>
</div>

<script>
function setupCarousel(productNumber) {
const carouselImages = document.querySelectorAll(`.product-
container:nth-child(${productNumber}) .carousel-images img`);
const prevBtn = document.getElementById(`prevBtn${productNumber}`);
const nextBtn = document.getElementById(`nextBtn${productNumber}`);
let currentIndex = 0;

function showImage(index) {
carouselImages.forEach((img, i) => {
img.style.opacity = i === index ? 1 : 0;
});
}

nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % carouselImages.length;
showImage(currentIndex);
});

prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + carouselImages.length) %
carouselImages.length;
showImage(currentIndex);
});

// Touch events for mobile


let startX;

document.querySelector(`.product-container:nth-child($
{productNumber}) .image-carousel`).addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
});

document.querySelector(`.product-container:nth-child($
{productNumber}) .image-carousel`).addEventListener('touchend', (e) => {
let endX = e.changedTouches[0].clientX;
if (startX > endX + 50) {
// Swipe left
currentIndex = (currentIndex + 1) % carouselImages.length;
} else if (startX < endX - 50) {
// Swipe right
currentIndex = (currentIndex - 1 + carouselImages.length) %
carouselImages.length;
}
showImage(currentIndex);
});
}

// Initialize carousels for all products


for (let i = 1; i <= 10; i++) {
setupCarousel(i);
}
</script>
</body>
</html>

You might also like