E-commerce Website Development

E-commerce Website body { font-family: 'Poppins', sans-serif; background-color: #f5f5f5; } header { background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 1rem; position: sticky; top: 0; z-index: 999; } nav a { color: #6b46c1; font-weight: 600; text-decoration: none; transition: color 0.3s ease; } nav a:hover { color: #805ad5; } .hero { background-image: linear-gradient(to right, #6b46c1, #805ad5); color: #fff; padding: 4rem 2rem; text-align: center; } .hero h1 { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; } .hero p { font-size: 1.25rem; margin-bottom: 2rem; } .btn-primary { background-color: #6b46c1; border-color: #6b46c1; font-weight: 600; transition: background-color 0.3s ease, border-color 0.3s ease; } .btn-primary:hover { background-color: #805ad5; border-color: #805ad5; } .categories, .featured-products { padding: 4rem 2rem; } .categories h2, .featured-products h2 { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; } .category-item, .product-item { background-color: #fff; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 2rem; text-align: center; transition: transform 0.3s ease; } .category-item:hover, .product-item:hover { transform: translateY(-0.5rem); } .category-item img, .product-item img { object-fit: contain; margin-bottom: 1rem; } .category-item img { height: 100px; width: 100px; } .product-item img { height: 200px; width: 100%; } .category-item h3, .product-item h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; } .category-item p, .product-item p { color: #718096; font-size: 0.875rem; } .product-item .price { font-size: 1.25rem; font-weight: 600; color: #6b46c1; } .product-item div p { font-weight: bolder; text-align: left; margin-bottom: 0rem; color: #4F6F52; } footer { background-color: #6b46c1; color: #fff; padding: 2rem; text-align: center; } .slider-container { display: flex; justify-content: space-between; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .slider-container img { width: 50%; } @media (max-width: 768px) { .slider-container { flex-direction: column; } .slider-container img { width: 100%; } nav { flex-direction: column; align-items: flex-start; } nav a { margin-bottom: 0.5rem; } } E-Commerce Website FAQ? Your orders My Cart Logout Welcome to our E-commerce Website Discover the best products and enjoy a seamless shopping experience. Shop Now Shop by Category Men's Wear Explore our wide range of men's fashion. Women's Wear Discover the latest women's fashion trends. Kids Wear Find stylish and comfortable options for your little ones. Featured Products Product 1 Description: Dress 1 Get 15% off $200 Add to Cart © 2024 E-commerce Website. All rights reserved. let cart = JSON.parse(localStorage.getItem('cart')) || []; document.querySelectorAll('.add-to-cart-btn').forEach((btn) => { btn.addEventListener('click', () => { const productCard = btn.closest('.product-item'); const productId = productCard.id; const productName = productCard.querySelector('h3').innerText; const productPrice = productCard.querySelector('.price').innerText; const productImage = productCard.querySelector('img').src; const product = { id: productId, name: productName, price: productPrice, image: productImage }; const exists = cart.find(item => item.id === product.id); if (!exists) { cart.push(product); localStorage.setItem('cart', JSON.stringify(cart)); alert(`${product.name} added to cart!`); updateCartCount(); } else { alert(`${product.name} is already in your cart.`); } }); }); function updateCartCount() { const cartCount = cart.length; let cartLink = document.querySelector('#cartLink'); if (cartLink) { cartLink.innerText = `My Cart (${cartCount})`; } } updateCartCount();