Code:
<!DOCTYPE html>
<html>
<head>
<title>Simple E-commerce</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Simple E-commerce Store</h1>
</header>
<div class="product-list">
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h2>Product 1</h2>
<p>Description of Product 1.</p>
<p>Price: $10.00</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: $20.00</p>
<button>Add to Cart</button>
</div>
</div>
</body>
</html>
Creating an entire e-commerce website is a complex task that requires various technologies and components, and it's beyond the scope of a simple source code snippet. However, I can provide you with a basic outline of the technologies you'll need and a simplified example of a web page with HTML, CSS, and JavaScript to get you started. You would need a backend system, database, and more for a complete e-commerce website.
Here's a simple example of a product listing page:
HTML (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Simple E-commerce</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Simple E-commerce Store</h1>
</header>
<div class="product-list">
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h2>Product 1</h2>
<p>Description of Product 1.</p>
<p>Price: $10.00</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: $20.00</p>
<button>Add to Cart</button>
</div>
</div>
</body>
</html>
CSS (style.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
.product-list {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.product {
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
text-align: center;
max-width: 300px;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
This is a very basic example of an e-commerce product listing page. In a real-world scenario, you would need to implement many additional features, such as a shopping cart, user registration, authentication, and payment processing. Additionally, you would need a backend server and a database to store and manage product data and user information.
For a complete e-commerce website, consider using web development frameworks and technologies like React, Angular, Vue.js for the frontend, and server-side technologies like Node.js, Ruby on Rails, or Django for the backend. You should also consider integrating with payment gateways and implementing security measures to protect user data.
