Scribd
Upload
10 views2 pages

Product Listing Page

The document is an HTML template for a product listing page featuring a header and a grid layout for displaying products. Each product item includes an image, title, description, and price. The page is styled with CSS for a clean and modern appearance.

Uploaded by

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

Product Listing Page

The document is an HTML template for a product listing page featuring a header and a grid layout for displaying products. Each product item includes an image, title, description, and price. The page is styled with CSS for a clean and modern appearance.

Uploaded by

xifahah487
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, 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>Product Listing</title>

<style>

body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; }

header { background-color: #333; color: white; text-align: center; padding: 20px; }

.product-list { display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; }

.product-item { background-color: white; margin: 10px; padding: 15px; border-radius:


8px; width: 250px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; }

.product-item img { width: 100%; height: auto; border-radius: 4px; }

.price { font-weight: bold; color: #4CAF50; }

</style>

</head>

<body>

<header>

<h1>Product Listings</h1>

</header>

<div class="product-list">

<div class="product-item">

<img src="https://via.placeholder.com/250" alt="Product 1">

<h3>Product 1</h3>

<p>This is a description of Product 1.</p>

<p class="price">$19.99</p>

</div>

<div class="product-item">
<img src="https://via.placeholder.com/250" alt="Product 2">

<h3>Product 2</h3>

<p>This is a description of Product 2.</p>

<p class="price">$29.99</p>

</div>

<div class="product-item">

<img src="https://via.placeholder.com/250" alt="Product 3">

<h3>Product 3</h3>

<p>This is a description of Product 3.</p>

<p class="price">$39.99</p>

</div>

</div>

</body>

</html>

You might also like