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();