<!DOCTYPE html>
<html>
<head>
<title>My E-Commerce Website</title>
<style>
/* Add your CSS styles here */
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.product {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
width: 200px;
display: inline-block;
text-align: center;
}
.product img {
max-width: 100%;
}
.cart {
background-color: #f5f5f5;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My E-Commerce Store</h1>
</header>
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h2>Product 1</h2>
<p>Description of Product 1.</p>
<p>Price: $19.99</p>
<button>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>Price: $29.99</p>
<button>Add to Cart</button>
</div>
<div class="cart">
<h2>Shopping Cart</h2>
<ul>
<!-- Cart items will be added here -->
</ul>
<p>Total: $0.00</p>
<button>Checkout</button>
</div>
<script>
// Add JavaScript for handling cart functionality here
// For simplicity, you can use the HTML5 Local Storage to store cart items.
</script>
</body>
</html>