Untitled
unknown
plain_text
a year ago
2.1 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Online Store</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 1em;
text-align: center;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 2em;
}
.product {
border: 1px solid #ddd;
padding: 1em;
margin: 1em;
width: 300px;
text-align: center;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Online Store</h1>
</header>
<section id="products">
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h2>Product 1</h2>
<p>Description of Product 1.</p>
<p>$19.99</p>
<button onclick="addToCart('Product 1', 19.99)">Add to Cart</button>
</div>
<div class="product">
<img src="product2.jpg" alt="Product 2">
<h2>Product 2</h2>
<p>Description of Product 2.</p>
<p>$29.99</p>
<button onclick="addToCart('Product 2', 29.99)">Add to Cart</button>
</div>
<!-- Add more product divs as needed -->
</section>
<footer>
<p>© 2024 My Online Store</p>
</footer>
<script>
function addToCart(productName, price) {
alert(`Added ${productName} to cart. Total: $${price}`);
// You'd typically handle cart logic, user authentication, etc., here.
}
</script>
</body>
</html>
Editor is loading...
Leave a Comment