Meta Description" name="description" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AG Shopping - Your Online Store</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
header { background-color: #333; color: white; padding: 1rem; text-align: center; }
nav { margin-top: 10px; }
nav a { color: white; margin: 0 15px; text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.product { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: center; }
.product img { max-width: 100%; height: 200px; object-fit: cover; }
button { background-color: #28a745; color: white; border: none; padding: 10px; cursor: pointer; border-radius: 5px; }
footer { background-color: #333; color: white; text-align: center; padding: 10px; margin-top: 20px; }
</style>
</head>
<body>
<header>
<h1>AG Shopping</h1>
<nav>
<a href="#home">Home</a>
<a href="#products">Products</a>
<a href="#contact">Contact</a>
</nav>
</header>
<div class="container">
<section id="home">
<h2>Welcome to AG Shopping!</h2>
<p>Discover amazing products at great prices. Shop now!</p>
</section>
<section id="products">
<h2>Featured Products</h2>
<div class="products">
<div class="product">
<img src="https://via.placeholder.com/250x200?text=Product+1" alt="Product 1">
<h3>Product 1</h3>
<p>$19.99</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x200?text=Product+2" alt="Product 2">
<h3>Product 2</h3>
<p>$29.99</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x200?text=Product+3" alt="Product 3">
<h3>Product 3</h3>
<p>$39.99</p>
<button>Add to Cart</button>
</div>
<!-- Add more products as needed -->
</div>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: info@agshopping.com</p>
</section>
</div>
<footer>
<p>© 2023 AG Shopping. All rights reserved.</p>
</footer>
<script>
// Basic JavaScript for cart (expand as needed)
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', () => {
alert('Added to cart! (This is a demo)');
});
});
</script>
</body>
</html>4
2
3KB
3KB
145.0ms
184.0ms
297.0ms