E-Commerce Website Template HTML CSS

1986 lebdev

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moderno - Premium Home Decor</title>
    <style>
        /* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            color: #333;
            line-height: 1.6;
        }

a {
            text-decoration: none;
            color: inherit;
        }

ul {
            list-style: none;
        }

img {
            max-width: 100%;
            display: block;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header styles */
        header {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-size: 28px;
            font-weight: 700;
            color: #2a2a2a;
        }

.logo span {
            color: #4CAF50;
        }

nav ul {
            display: flex;
            gap: 40px;
        }

nav ul li a {
            font-weight: 500;
            transition: color 0.3s;
        }

nav ul li a:hover {
            color: #4CAF50;
        }

.header-icons {
            display: flex;
            gap: 20px;
        }

.icon {
            font-size: 22px;
            cursor: pointer;
            transition: color 0.3s;
        }

.icon:hover {
            color: #4CAF50;
        }

.nav-toggle {
            display: none;
            font-size: 24px;
            cursor: pointer;
        }

/* Hero section */
        .hero {
            height: 600px;
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/api/placeholder/1200/600') center/cover no-repeat;
            color: #fff;
            display: flex;
            align-items: center;
        }

.hero-content {
            max-width: 600px;
        }

.hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            line-height: 1.2;
        }

.hero p {
            font-size: 18px;
            margin-bottom: 30px;
        }

.btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: #4CAF50;
            color: #fff;
            border-radius: 4px;
            font-weight: 500;
            transition: background-color 0.3s;
            cursor: pointer;
        }

.btn:hover {
            background-color: #3e8e41;
        }

.btn-outline {
            background-color: transparent;
            border: 2px solid #fff;
            margin-left: 15px;
        }

.btn-outline:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

/* Featured categories */
        .featured-categories {
            padding: 80px 0;
        }

.section-title {
            text-align: center;
            margin-bottom: 50px;
        }

.section-title h2 {
            font-size: 36px;
            margin-bottom: 10px;
        }

.section-title p {
            color: #777;
            max-width: 600px;
            margin: 0 auto;
        }

.categories-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

.category-card {
            position: relative;
            height: 300px;
            overflow: hidden;
            border-radius: 8px;
            transition: transform 0.3s;
        }

.category-card:hover {
            transform: translateY(-10px);
        }

.category-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

.category-card:hover img {
            transform: scale(1.05);
        }

.category-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: #fff;
        }

.category-content h3 {
            margin-bottom: 5px;
            font-size: 22px;
        }

/* Featured products */
        .featured-products {
            padding: 80px 0;
            background-color: #f9f9f9;
        }

.products-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

.product-card {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }

.product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

.product-img {
            height: 250px;
            position: relative;
        }

.product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.product-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background-color: #4CAF50;
            color: #fff;
            padding: 5px 10px;
            border-radius: 3px;
            font-size: 14px;
        }

.product-actions {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

.action-icon {
            background-color: #fff;
            color: #333;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }

.action-icon:hover {
            background-color: #4CAF50;
            color: #fff;
        }

.product-info {
            padding: 20px;
        }

.product-category {
            color: #777;
            font-size: 14px;
            margin-bottom: 5px;
        }

.product-title {
            font-size: 18px;
            margin-bottom: 10px;
        }

.product-rating {
            display: flex;
            margin-bottom: 10px;
            color: #ffc107;
        }

.product-price {
            display: flex;
            align-items: center;
            gap: 10px;
        }

.current-price {
            font-size: 20px;
            font-weight: 700;
            color: #4CAF50;
        }

.old-price {
            font-size: 16px;
            text-decoration: line-through;
            color: #777;
        }

.add-to-cart {
            width: 100%;
            margin-top: 15px;
            text-align: center;
        }

/* Special offer */
        .special-offer {
            padding: 100px 0;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/api/placeholder/1200/600') center/cover fixed no-repeat;
            color: #fff;
            text-align: center;
        }

.special-offer h2 {
            font-size: 42px;
            margin-bottom: 20px;
        }

.special-offer p {
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto 30px;
        }

.countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
        }

.countdown-item {
            width: 100px;
            height: 100px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

.countdown-number {
            font-size: 36px;
            font-weight: 700;
            line-height: 1;
        }

.countdown-label {
            font-size: 14px;
            margin-top: 5px;
        }

/* Newsletter */
        .newsletter {
            padding: 80px 0;
            text-align: center;
        }

.newsletter-form {
            max-width: 500px;
            margin: 30px auto 0;
            display: flex;
        }

.newsletter-input {
            flex: 1;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            font-size: 16px;
        }

.newsletter-btn {
            padding: 0 25px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

.newsletter-btn:hover {
            background-color: #3e8e41;
        }

/* Footer */
        footer {
            background-color: #2a2a2a;
            color: #fff;
            padding: 80px 0 20px;
        }

.footer-content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            margin-bottom: 50px;
        }

.footer-col h3 {
            font-size: 20px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

.footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background-color: #4CAF50;
        }

.footer-col p {
            color: #aaa;
            margin-bottom: 20px;
        }

.footer-col ul li {
            margin-bottom: 10px;
        }

.footer-col ul li a {
            color: #aaa;
            transition: color 0.3s;
        }

.footer-col ul li a:hover {
            color: #4CAF50;
        }

.footer-contact li {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            color: #aaa;
        }

.social-icons {
            display: flex;
            gap: 15px;
        }

.social-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #333;
            border-radius: 50%;
            transition: background-color 0.3s;
        }

.social-icon:hover {
            background-color: #4CAF50;
        }

.footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid #444;
            color: #aaa;
        }

/* Media queries */
        @media (max-width: 992px) {
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }

.categories-grid {
                grid-template-columns: repeat(2, 1fr);
            }

.footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }

@media (max-width: 768px) {
            nav ul {
                display: none;
            }

.nav-toggle {
                display: block;
            }

.hero h1 {
                font-size: 36px;
            }

.countdown-item {
                width: 70px;
                height: 70px;
            }

.countdown-number {
                font-size: 28px;
            }
        }

@media (max-width: 576px) {
            .products-grid,
            .categories-grid {
                grid-template-columns: 1fr;
            }

.footer-content {
                grid-template-columns: 1fr;
            }

.btn {
                display: block;
                width: 100%;
                margin-bottom: 10px;
            }

.btn-outline {
                margin-left: 0;
            }

.hero-content {
                text-align: center;
            }
        }

/* Mobile menu */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: -300px;
            width: 300px;
            height: 100vh;
            background-color: #fff;
            z-index: 2000;
            transition: left 0.3s;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            padding: 40px 20px;
        }

.mobile-menu.active {
            left: 0;
        }

.close-menu {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 24px;
            cursor: pointer;
        }

.mobile-menu ul li {
            margin-bottom: 20px;
        }

.mobile-menu ul li a {
            display: block;
            padding: 10px 0;
            font-size: 18px;
            border-bottom: 1px solid #eee;
        }

.overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1500;
            display: none;
        }

.overlay.active {
            display: block;
        }

/* Cart popup */
        .cart-popup {
            position: fixed;
            top: 0;
            right: -400px;
            width: 400px;
            height: 100vh;
            background-color: #fff;
            z-index: 2000;
            transition: right 0.3s;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        }

.cart-popup.active {
            right: 0;
        }

.cart-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.cart-items {
            padding: 20px;
            max-height: calc(100vh - 200px);
            overflow-y: auto;
        }

.cart-item {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

.cart-item-img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            overflow: hidden;
        }

.cart-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.cart-item-details {
            flex: 1;
        }

.cart-item-title {
            font-weight: 500;
            margin-bottom: 5px;
        }

.cart-item-price {
            color: #4CAF50;
            font-weight: 500;
            margin-bottom: 10px;
        }

.cart-item-quantity {
            display: flex;
            align-items: center;
            gap: 10px;
        }

.quantity-btn {
            width: 25px;
            height: 25px;
            border: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 3px;
            transition: background-color 0.3s;
        }

.quantity-btn:hover {
            background-color: #f5f5f5;
        }

.cart-item-remove {
            color: #f44336;
            cursor: pointer;
            transition: color 0.3s;
        }

.cart-item-remove:hover {
            color: #d32f2f;
        }

.cart-footer {
            padding: 20px;
            border-top: 1px solid #eee;
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: #fff;
        }

.cart-total {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-weight: 500;
        }

.cart-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

.btn-view-cart {
            background-color: transparent;
            border: 1px solid #4CAF50;
            color: #4CAF50;
        }

.btn-view-cart:hover {
            background-color: #f5f5f5;
        }

/* Animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

.fade-in {
            animation: fadeIn 1s;
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container header-container">
            <a href="#" class="logo">Moderno<span>.</span></a>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Categories</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <div class="header-icons">
                <div class="icon search-icon"></div>
                <div class="icon account-icon"></div>
                <div class="icon cart-icon" id="cartToggle"></div>
                <div class="nav-toggle" id="navToggle"></div>
            </div>
        </div>
    </header>

<div class="mobile-menu" id="mobileMenu">
        <div class="close-menu" id="closeMenu">✕</div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Categories</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

<div class="overlay" id="overlay"></div>

<div class="cart-popup" id="cartPopup">
        <div class="cart-header">
            <h3>Your Cart (3)</h3>
            <div class="close-menu" id="closeCart">✕</div>
        </div>
        <div class="cart-items">
            <div class="cart-item">
                <div class="cart-item-img">
                    <img src="/api/placeholder/80/80" alt="Product">
                </div>
                <div class="cart-item-details">
                    <div class="cart-item-title">Modern Coffee Table</div>
                    <div class="cart-item-price">$149.99</div>
                    <div class="cart-item-quantity">
                        <div class="quantity-btn">-</div>
                        <span>1</span>
                        <div class="quantity-btn">+</div>
                    </div>
                </div>
                <div class="cart-item-remove">✕</div>
            </div>
            <div class="cart-item">
                <div class="cart-item-img">
                    <img src="/api/placeholder/80/80" alt="Product">
                </div>
                <div class="cart-item-details">
                    <div class="cart-item-title">Scandinavian Sofa</div>
                    <div class="cart-item-price">$599.99</div>
                    <div class="cart-item-quantity">
                        <div class="quantity-btn">-</div>
                        <span>1</span>
                        <div class="quantity-btn">+</div>
                    </div>
                </div>
                <div class="cart-item-remove">✕</div>
            </div>
            <div class="cart-item">
                <div class="cart-item-img">
                    <img src="/api/placeholder/80/80" alt="Product">
                </div>
                <div class="cart-item-details">
                    <div class="cart-item-title">Pendant Lamp</div>
                    <div class="cart-item-price">$79.99</div>
                    <div class="cart-item-quantity">
                        <div class="quantity-btn">-</div>
                        <span>2</span>
                        <div class="quantity-btn">+</div>
                    </div>
                </div>
                <div class="cart-item-remove">✕</div>
            </div>
        </div>
        <div class="cart-footer">
            <div class="cart-total">
                <span>Total:</span>
                <span>$909.96</span>
            </div>
            <div class="cart-buttons">
                <a href="#" class="btn btn-view-cart">View Cart</a>
                <a href="#" class="btn">Checkout</a>
            </div>
        </div>
    </div>

<section class="hero">
        <div class="container">
            <div class="hero-content fade-in">
                <h1>Elevate Your Living Space</h1>
                <p>Discover unique and stylish furniture pieces that transform your home into a sanctuary of comfort and elegance.</p>
                <a href="#" class="btn">Shop Now</a>
                <a href="#" class="btn btn-outline">Learn More</a>
            </div>
        </div>
    </section>

<section class="featured-categories">
        <div class="container">
            <div class="section-title">
                <h2>Shop by Category</h2>
                <p>Browse our curated collection of premium home decor and furniture categories.</p>
            </div>
            <div class="categories-grid">
                <a href="#" class="category-card">
                    <img src="/api/placeholder/400/300" alt="Living Room">
                    <div class="category-content">
                        <h3>Living Room</h3>
                        <p>42 Products</p>
                    </div>
                </a>
                <a href="#" class="category-card">
                    <img src="/api/placeholder/400/300" alt="Bedroom">
                    <div class="category-content">
                        <h3>Bedroom</h3>
                        <p>38 Products</p>
                    </div>
                </a>
                <a href="#" class="category-card">
                    <img src="/api/placeholder/400/300" alt="Kitchen & Dining">
                    <div class="category-content">
                        <h3>Kitchen & Dining</h3>
                        <p>29 Products</p>
                    </div>
                </a>
            </div>
        </div>
    </section>

<section class="featured-products">
        <div class="container">
            <div class="section-title">
                <h2>Featured Products</h2>
                <p>Our most popular products based on customer favorites and current trends.</p>
            </div>
            <div class="products-grid">
                <div class="product-card">
                    <div class="product-img">
                        <img src="/api/placeholder/300/250" alt="Product">
                        <div class="product-badge">New</div>
                        <div class="product-actions">
                            <div class="action-icon">❤</div>
                            <div class="action-icon"></div>
                        </div>
                    </div>
                    <div class="product-info">
                        <div class="product-category">Living Room</div>
                        <h3 class="product-title">Modern Coffee Table</h3>
                        <div class="product-rating">★★★★★</div>
                        <div class="product-price">
                            <span class="current-price">$149.99</span>
                            <span class="old-price">$199.99</span>
                        </div>
                        <a href="#" class="btn add-to-cart">Add to Cart</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">
                        <img src="/api/placeholder/300/250" alt="Product">
                        <div class="product-badge">Sale</div>
                        <div class="product-actions">
                            <div class="action-icon">❤</div>
                            <div class="action-icon"></div>
                        </div>
                    </div>
                    <div class="product-info">
                        <div class="product-category">Living Room</div>
                        <h3 class="product-title">Scandinavian Sofa</h3>
                        <div class="product-rating">★★★★☆</div>
                        <div class="product-price">
                            <span class="current-price">$599.99</span>
                            <span class="old-price">$749.99</span>
                        </div>
                        <a href="#" class="btn add-to-cart">Add to Cart</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">
                        <img src="/api/placeholder/300/250" alt="Product">
                        <div class="product-actions">
                            <div class="action-icon">❤</div>
                            <div class="action-icon"></div>
                        </div>
                    </div>
                    <div class="product-info">
                        <div class="product-category">Lighting</div>
                        <h3 class="product-title">Pendant Lamp</h3>
                        <div class="product-rating">★★★★☆</div>
                        <div class="product-price">
                            <span class="current-price">$79.99</span>
                        </div>
                        <a href="#" class="btn add-to-cart">Add to Cart</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">
                        <img src="/api/placeholder/300/250" alt="Product">
                        <div class="product-badge">Hot</div>
                        <div class="product-actions">
                            <div class="action-icon">❤</div>
                            <div class="action-icon"></div>
                        </div>
                    </div>
                    <div class="product-info">
                        <div class="product-category">Bedroom</div>
                        <h3 class="product-title">Minimalist Bed Frame</h3>
                        <div class="product-rating">★★★★★</div>
                        <div class="product-price">
                            <span class="current-price">$399.99</span>
                            <span class="old-price">$499.99</span>
                        </div>
                        <a href="#" class="btn add-to-cart">Add to Cart</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="special-offer">
        <div class="container">
            <h2>Special Offer</h2>
            <p>Get 25% off on all furniture this week only. Don't miss out on these incredible savings!</p>
            <div class="countdown">
                <div class="countdown-item">
                    <div class="countdown-number" id="days">2</div>
                    <div class="countdown-label">Days</div>
                </div>
                <div class="countdown-item">
                    <div class="countdown-number" id="hours">14</div>
                    <div class="countdown-label">Hours</div>
                </div>
                <div class="countdown-item">
                    <div class="countdown-number" id="minutes">36</div>
                    <div class="countdown-label">Minutes</div>
                </div>
                <div class="countdown-item">
                    <div class="countdown-number" id="seconds">52</div>
                    <div class="countdown-label">Seconds</div>
                </div>
            </div>
            <a href="#" class="btn">Shop the Sale</a>
        </div>
    </section>

<section class="newsletter">
        <div class="container">
            <div class="section-title">
                <h2>

E-Commerce Website Template HTML CSS

Recommended

HTML Parallax Effect with SVG Beams and Noise

HTML Restaurant Menu Template

CSS Smooth Toggle Switch Code Example

HTML

CSS

JS

Recommended

HTML Parallax Effect with SVG Beams and Noise

HTML Restaurant Menu Template

CSS Smooth Toggle Switch Code Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS