0% found this document useful (0 votes)
5 views2 pages

Shop Page

The document is an HTML template for an online shop featuring a header, a product grid with four product cards, each displaying images, titles, prices, and a button to view details. Each product card includes a slideshow of images and is identified by a unique product ID. The document also links to a CSS stylesheet for styling and a JavaScript file for functionality.

Uploaded by

chickdiamond6
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
0% found this document useful (0 votes)
5 views2 pages

Shop Page

The document is an HTML template for an online shop featuring a header, a product grid with four product cards, each displaying images, titles, prices, and a button to view details. Each product card includes a slideshow of images and is identified by a unique product ID. The document also links to a CSS stylesheet for styling and a JavaScript file for functionality.

Uploaded by

chickdiamond6
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/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Shop</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to Our Shop!</h1>
</header>

<main class="product-grid">
<div class="product-card" data-product-id="1">
<div class="product-images-slideshow">
<img src="https://via.placeholder.com/300x200?
text=Product+1+Image+1" alt="Product 1 Image 1" class="slideshow-image active">
<img src="https://via.placeholder.com/300x200?
text=Product+1+Image+2" alt="Product 1 Image 2" class="slideshow-image">
<img src="https://via.placeholder.com/300x200?
text=Product+1+Image+3" alt="Product 1 Image 3" class="slideshow-image">
</div>
<h2 class="product-title">Amazing Product 1</h2>
<p class="product-price">$19.99</p>
<button class="view-details-btn" data-product-id="1">View
Details</button>
</div>

<div class="product-card" data-product-id="2">


<div class="product-images-slideshow">
<img src="https://via.placeholder.com/300x200?
text=Product+2+Image+1" alt="Product 2 Image 1" class="slideshow-image active">
<img src="https://via.placeholder.com/300x200?
text=Product+2+Image+2" alt="Product 2 Image 2" class="slideshow-image">
<img src="https://via.placeholder.com/300x200?
text=Product+2+Image+3" alt="Product 2 Image 3" class="slideshow-image">
</div>
<h2 class="product-title">Fantastic Gadget 2</h2>
<p class="product-price">$49.50</p>
<button class="view-details-btn" data-product-id="2">View
Details</button>
</div>

<div class="product-card" data-product-id="3">


<div class="product-images-slideshow">
<img src="https://via.placeholder.com/300x200?
text=Product+3+Image+1" alt="Product 3 Image 1" class="slideshow-image active">
<img src="https://via.placeholder.com/300x200?
text=Product+3+Image+2" alt="Product 3 Image 2" class="slideshow-image">
<img src="https://via.placeholder.com/300x200?
text=Product+3+Image+3" alt="Product 3 Image 3" class="slideshow-image">
</div>
<h2 class="product-title">Stylish Item 3</h2>
<p class="product-price">$25.00</p>
<button class="view-details-btn" data-product-id="3">View
Details</button>
</div>
<div class="product-card" data-product-id="4">
<div class="product-images-slideshow">
<img src="https://via.placeholder.com/300x200?
text=Product+4+Image+1" alt="Product 4 Image 1" class="slideshow-image active">
<img src="https://via.placeholder.com/300x200?
text=Product+4+Image+2" alt="Product 4 Image 2" class="slideshow-image">
<img src="https://via.placeholder.com/300x200?
text=Product+4+Image+3" alt="Product 4 Image 3" class="slideshow-image">
</div>
<h2 class="product-title">Cool Product 4</h2>
<p class="product-price">$30.00</p>
<button class="view-details-btn" data-product-id="4">View
Details</button>
</div>
</main>

<script src="script.js"></script>
</body>
</html>

You might also like