写一个简单的HTML5的电商网站
时间: 2023-05-23 15:07:12 浏览: 53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Online Store</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>My Online Store</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<section id="hero">
<div class="container">
<h2>Welcome to My Online Store!</h2>
<p>Find the best deals on our products!</p>
</div>
</section>
<section id="products">
<div class="container">
<h3>Our Products</h3>
<div class="product-row">
<div class="product-col">
<img src="product1.jpg" alt="Product 1">
<h4>Product 1</h4>
<p>Description of product 1</p>
<p class="price">$100</p>
<a href="#" class="btn">Buy Now</a>
</div>
<div class="product-col">
<img src="product2.jpg" alt="Product 2">
<h4>Product 2</h4>
<p>Description of product 2</p>
<p class="price">$75</p>
<a href="#" class="btn">Buy Now</a>
</div>
<div class="product-col">
<img src="product3.jpg" alt="Product 3">
<h4>Product 3</h4>
<p>Description of product 3</p>
<p class="price">$50</p>
<a href="#" class="btn">Buy Now</a>
</div>
</div>
</div>
</section>
<section id="about-us">
<div class="container">
<h3>About Us</h3>
<p>We are a leading online store providing high-quality products at affordable prices. Our goal is to satisfy our customers by providing the best service and products possible.</p>
</div>
</section>
<section id="contact-us">
<div class="container">
<h3>Contact Us</h3>
<form action="submit-form.php" method="POST">
<input type="text" placeholder="Name" name="name">
<input type="email" placeholder="Email" name="email">
<textarea placeholder="Message" rows="5" name="message"></textarea>
<button type="submit" class="btn">Submit</button>
</form>
</div>
</section>
<footer>
<div class="container">
<p>© 2021 My Online Store. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>