<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Complete E-Commerce Website</title>
<style>
/* Basic styles for layout */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
header .logo {
font-size: 24px;
font-weight: bold;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
margin: 10px;
}
/* Product grid styling */
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.product-card {
background-color: #fff;
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
.product-card img {
width: 100%;
height: auto;
}
/* Animations */
.animated-section {
animation: fadeIn 1s ease-in-out;
}
.animated-btn {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.animated-btn:hover {
background-color: #555;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Cart styling */
#cart-items {
margin-top: 20px;
}
.cart-item {
margin-bottom: 10px;
}
</style>
</head>
<body>
<!– Header and Navigation –>
<header>
<div class=”logo”>KitchenStore</div>
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#products”>Products</a></li>
<li><a href=”#contact”>Contact Us</a></li>
<li><a href=”#login”>Login</a></li>
<li><a href=”#cart”>Cart</a></li>
</ul>
</nav>
</header>
<!– Home Section –>
<section id=”home” class=”animated-section”>
<h1>Welcome to KitchenStore</h1>
<p>Your one-stop shop for all kitchen essentials!</p>
<a href=”#products” class=”btn animated-btn”>Shop Now</a>
</section>
<!– Products Section –>
<section id=”products” class=”animated-section”>
<h2>Our Products</h2>
<div class=”product-grid”>
<!– List of 50 Product Cards –>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Stainless Steel Cookware Set”>
<h3>Stainless Steel Cookware Set</h3>
<p>NPR 4500</p>
<button class=”add-to-cart” data-product-id=”1″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Non-Stick Frying Pan”>
<h3>Non-Stick Frying Pan</h3>
<p>NPR 1200</p>
<button class=”add-to-cart” data-product-id=”2″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Glass Measuring Cup”>
<h3>Glass Measuring Cup</h3>
<p>NPR 800</p>
<button class=”add-to-cart” data-product-id=”3″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Ceramic Mixing Bowl Set”>
<h3>Ceramic Mixing Bowl Set</h3>
<p>NPR 2500</p>
<button class=”add-to-cart” data-product-id=”4″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Wooden Cutting Board”>
<h3>Wooden Cutting Board</h3>
<p>NPR 1000</p>
<button class=”add-to-cart” data-product-id=”5″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Electric Kettle”>
<h3>Electric Kettle</h3>
<p>NPR 1500</p>
<button class=”add-to-cart” data-product-id=”6″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Cast Iron Skillet”>
<h3>Cast Iron Skillet</h3>
<p>NPR 3000</p>
<button class=”add-to-cart” data-product-id=”7″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Stainless Steel Knife Set”>
<h3>Stainless Steel Knife Set</h3>
<p>NPR 4000</p>
<button class=”add-to-cart” data-product-id=”8″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Blender”>
<h3>Blender</h3>
<p>NPR 3500</p>
<button class=”add-to-cart” data-product-id=”9″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Electric Rice Cooker”>
<h3>Electric Rice Cooker</h3>
<p>NPR 2800</p>
<button class=”add-to-cart” data-product-id=”10″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Stainless Steel Tongs”>
<h3>Stainless Steel Tongs</h3>
<p>NPR 500</p>
<button class=”add-to-cart” data-product-id=”11″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Digital Kitchen Scale”>
<h3>Digital Kitchen Scale</h3>
<p>NPR 1500</p>
<button class=”add-to-cart” data-product-id=”12″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Garlic Press”>
<h3>Garlic Press</h3>
<p>NPR 600</p>
<button class=”add-to-cart” data-product-id=”13″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Stainless Steel Colander”>
<h3>Stainless Steel Colander</h3>
<p>NPR 900</p>
<button class=”add-to-cart” data-product-id=”14″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Glass Storage Jar Set”>
<h3>Glass Storage Jar Set</h3>
<p>NPR 2200</p>
<button class=”add-to-cart” data-product-id=”15″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Microwave Oven”>
<h3>Microwave Oven</h3>
<p>NPR 9000</p>
<button class=”add-to-cart” data-product-id=”16″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Spice Rack”>
<h3>Spice Rack</h3>
<p>NPR 2500</p>
<button class=”add-to-cart” data-product-id=”17″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Slow Cooker”>
<h3>Slow Cooker</h3>
<p>NPR 4000</p>
<button class=”add-to-cart” data-product-id=”18″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Utensil Organizer”>
<h3>Utensil Organizer</h3>
<p>NPR 1500</p>
<button class=”add-to-cart” data-product-id=”19″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Electric Griddle”>
<h3>Electric Griddle</h3>
<p>NPR 3200</p>
<button class=”add-to-cart” data-product-id=”20″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Silicone Baking Mat”>
<h3>Silicone Baking Mat</h3>
<p>NPR 700</p>
<button class=”add-to-cart” data-product-id=”21″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Potato Masher”>
<h3>Potato Masher</h3>
<p>NPR 400</p>
<button class=”add-to-cart” data-product-id=”22″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Electric Hand Mixer”>
<h3>Electric Hand Mixer</h3>
<p>NPR 2500</p>
<button class=”add-to-cart” data-product-id=”23″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Glass Baking Dish Set”>
<h3>Glass Baking Dish Set</h3>
<p>NPR 1800</p>
<button class=”add-to-cart” data-product-id=”24″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Ceramic Teapot”>
<h3>Ceramic Teapot</h3>
<p>NPR 1200</p>
<button class=”add-to-cart” data-product-id=”25″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Whisk”>
<h3>Whisk</h3>
<p>NPR 300</p>
<button class=”add-to-cart” data-product-id=”26″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Coffee Maker”>
<h3>Coffee Maker</h3>
<p>NPR 6000</p>
<button class=”add-to-cart” data-product-id=”27″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Pizza Cutter”>
<h3>Pizza Cutter</h3>
<p>NPR 500</p>
<button class=”add-to-cart” data-product-id=”28″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Salad Spinner”>
<h3>Salad Spinner</h3>
<p>NPR 1000</p>
<button class=”add-to-cart” data-product-id=”29″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Electric Wok”>
<h3>Electric Wok</h3>
<p>NPR 3500</p>
<button class=”add-to-cart” data-product-id=”30″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Silicone Spatula Set”>
<h3>Silicone Spatula Set</h3>
<p>NPR 800</p>
<button class=”add-to-cart” data-product-id=”31″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Kitchen Shears”>
<h3>Kitchen Shears</h3>
<p>NPR 600</p>
<button class=”add-to-cart” data-product-id=”32″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Glass Measuring Spoons”>
<h3>Glass Measuring Spoons</h3>
<p>NPR 700</p>
<button class=”add-to-cart” data-product-id=”33″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Oil Dispenser”>
<h3>Oil Dispenser</h3>
<p>NPR 400</p>
<button class=”add-to-cart” data-product-id=”34″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Electric Deep Fryer”>
<h3>Electric Deep Fryer</h3>
<p>NPR 5000</p>
<button class=”add-to-cart” data-product-id=”35″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Microwave-Safe Bowl Set”>
<h3>Microwave-Safe Bowl Set</h3>
<p>NPR 2000</p>
<button class=”add-to-cart” data-product-id=”36″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Grill Pan”>
<h3>Grill Pan</h3>
<p>NPR 2500</p>
<button class=”add-to-cart” data-product-id=”37″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Rolling Pin”>
<h3>Rolling Pin</h3>
<p>NPR 400</p>
<button class=”add-to-cart” data-product-id=”38″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Stainless Steel Grater”>
<h3>Stainless Steel Grater</h3>
<p>NPR 600</p>
<button class=”add-to-cart” data-product-id=”39″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Rice Strainer”>
<h3>Rice Strainer</h3>
<p>NPR 300</p>
<button class=”add-to-cart” data-product-id=”40″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Kitchen Apron”>
<h3>Kitchen Apron</h3>
<p>NPR 700</p>
<button class=”add-to-cart” data-product-id=”41″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Oven Mitts”>
<h3>Oven Mitts</h3>
<p>NPR 500</p>
<button class=”add-to-cart” data-product-id=”42″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Stainless Steel Strainer”>
<h3>Stainless Steel Strainer</h3>
<p>NPR 300</p>
<button class=”add-to-cart” data-product-id=”43″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Juicer”>
<h3>Juicer</h3>
<p>NPR 4500</p>
<button class=”add-to-cart” data-product-id=”44″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Steamer Pot”>
<h3>Steamer Pot</h3>
<p>NPR 3500</p>
<button class=”add-to-cart” data-product-id=”45″>Add to Cart</button>
</div>
<div class=”product-card”>
<img src=”https://via.placeholder.com/150″ alt=”Cutting Board Set”>
<h3>Cutting Board Set</h3>
<p>NPR 1500</p>
<button class=”add-to-cart” data-product-id=”46″>Add to Cart</button>
</div>
</div>
</section>
<!– Add more sections like above for different categories (Cart, Checkout, etc.) –>
<!– The rest of the JavaScript and other necessary code will go here. –>
<script>
// JavaScript code for the e-commerce website functionality
const cart = [];
function updateCart() {
const cartItems = document.getElementById(‘cart-items’);
cartItems.innerHTML = ”; // Clear existing items
let total = 0;
cart.forEach((item, index) => {
const product = products.find(p => p.id === item.id);
total += product.price * item.quantity;
const li = document.createElement(‘li’);
li.textContent = `${product.name} (NPR ${product.price}) x ${item.quantity}`;
cartItems.appendChild(li);
});
document.getElementById(‘total’).textContent = `Total: NPR ${total}`;
}
function addToCart(productId) {
const productInCart = cart.find(item => item.id === productId);
if (productInCart) {
productInCart.quantity += 1;
} else {
cart.push({ id: productId, quantity: 1 });
}
updateCart();
}
const products = [
{ id: 1, name: ‘Stainless Steel Pan’, price: 1500 },
{ id: 2, name: ‘Non-Stick Frying Pan’, price: 1800 },
{ id: 3, name: ‘Pressure Cooker’, price: 3000 },
{ id: 4, name: ‘Blender’, price: 2500 },
{ id: 5, name: ‘Knife Set’, price: 2000 },
{ id: 6, name: ‘Microwave Oven’, price: 12000 },
{ id: 7, name: ‘Toaster’, price: 3500 },
{ id: 8, name: ‘Rice Cooker’, price: 5000 },
{ id: 9, name: ‘Electric Kettle’, price: 2200 },
{ id: 10, name: ‘Cutting Board’, price: 800 },
{ id: 11, name: ‘Cooking Utensils Set’, price: 2500 },
{ id: 12, name: ‘Dish Rack’, price: 1200 },
{ id: 13, name: ‘Measuring Cups’, price: 600 },
{ id: 14, name: ‘Mixing Bowl Set’, price: 2000 },
{ id: 15, name: ‘Food Processor’, price: 8000 },
{ id: 16, name: ‘Stand Mixer’, price: 10000 },
{ id: 17, name: ‘Spice Rack’, price: 1800 },
{ id: 18, name: ‘Slow Cooker’, price: 4000 },
{ id: 19, name: ‘Utensil Organizer’, price: 1500 },
{ id: 20, name: ‘Electric Griddle’, price: 3200 },
{ id: 21, name: ‘Silicone Baking Mat’, price: 700 },
{ id: 22, name: ‘Potato Masher’, price: 400 },
{ id: 23, name: ‘Electric Hand Mixer’, price: 2500 },
{ id: 24, name: ‘Glass Baking Dish Set’, price: 1800 },
{ id: 25, name: ‘Ceramic Teapot’, price: 1200 },
{ id: 26, name: ‘Whisk’, price: 300 },
{ id: 27, name: ‘Coffee Maker’, price: 6000 },
{ id: 28, name: ‘Pizza Cutter’, price: 500 },
{ id: 29, name: ‘Salad Spinner’, price: 1000 },
{ id: 30, name: ‘Electric Wok’, price: 3500 },
{ id: 31, name: ‘Silicone Spatula Set’, price: 800 },
{ id: 32, name: ‘Kitchen Shears’, price: 600 },
{ id: 33, name: ‘Glass Measuring Spoons’, price: 700 },
{ id: 34, name: ‘Oil Dispenser’, price: 400 },
{ id: 35, name: ‘Electric Deep Fryer’, price: 5000 },
{ id: 36, name: ‘Microwave-Safe Bowl Set’, price: 2000 },
{ id: 37, name: ‘Grill Pan’, price: 2500 },
{ id: 38, name: ‘Rolling Pin’, price: 400 },
{ id: 39, name: ‘Stainless Steel Grater’, price: 600 },
{ id: 40, name: ‘Rice Strainer’, price: 300 },
{ id: 41, name: ‘Kitchen Apron’, price: 700 },
{ id: 42, name: ‘Oven Mitts’, price: 500 },
{ id: 43, name: ‘Stainless Steel Strainer’, price: 300 },
{ id: 44, name: ‘Juicer’, price: 4500 },
{ id: 45, name: ‘Steamer Pot’, price: 3500 },
{ id: 46, name: ‘Cutting Board Set’, price: 1500 }
];
document.querySelectorAll(‘.add-to-cart’).forEach(button => {
button.addEventListener(‘click’, () => {
const productId = parseInt(button.getAttribute(‘data-product-id’));
addToCart(productId);
});
});
</script>
</body>
</html>