Scribd
Upload
5 views2 pages

!doctype HTML

The document is an HTML template for an online product store titled 'My Product Store'. It includes a header and a grid layout displaying three products with images, names, prices, and 'Add to Cart' buttons. The styling is done using CSS for a clean and modern look.

Uploaded by

tosifsk256
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
5 views2 pages

!doctype HTML

The document is an HTML template for an online product store titled 'My Product Store'. It includes a header and a grid layout displaying three products with images, names, prices, and 'Add to Cart' buttons. The styling is done using CSS for a clean and modern look.

Uploaded by

tosifsk256
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>My Product Store</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f9f9f9;
}
header {
background: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 2rem;
}
.product {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 1rem;
text-align: center;
}
.product img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.product h3 {
margin: 0.5rem 0;
}
.product p {
color: green;
font-weight: bold;
}
.product button {
background: #007bff;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
.product button:hover {
background: #0056b3;
}
</style>
</head>
<body>

<header>
<h1>My Product Store</h1>
</header>

<div class="container">
<div class="product">
<img src="https://via.placeholder.com/200" alt="Product 1" />
<h3>Product 1</h3>
<p>₹499</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200" alt="Product 2" />
<h3>Product 2</h3>
<p>₹699</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200" alt="Product 3" />
<h3>Product 3</h3>
<p>₹299</p>
<button>Add to Cart</button>
</div>
</div>

</body>
</html>

You might also like