Modern Furniture Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LUXE Living | Premium Furniture</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    
    <header id="header">
        <a href="#" class="logo">LUXE<span>Living</span></a>
        <nav id="nav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#products">Products</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#gallery">Gallery</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
        <div class="cart-icon">
            <i class="fas fa-shopping-cart"></i>
        </div>
        <div class="menu-toggle" id="menuToggle">
            <i class="fas fa-bars"></i>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Elevate Your Living Space</h1>
            <p>Discover premium furniture that combines timeless design with exceptional comfort. Crafted for those who appreciate the finer details in life.</p>
            <div class="hero-buttons">
                <a href="#products" class="btn">Shop Now</a>
                <a href="#about" class="btn btn-outline">Learn More</a>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="about-img">
            <img src="https://images.unsplash.com/photo-1600210492493-0946911123ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="About Us">
            <p style="font-size: 12px; margin-top: 5px; color: #777;">Photo by <a href="https://unsplash.com/@spacejoy" target="_blank">Spacejoy</a> on Unsplash</p>
        </div>
        <div class="about-content">
            <span class="section-subtitle">Our Story</span>
            <h2 class="section-title">Crafting Comfort Since 1995</h2>
            <p>Founded with a passion for quality craftsmanship, LUXE Living has been transforming homes with exquisite furniture pieces for over two decades. Our journey began in a small workshop with a simple vision: to create furniture that stands the test of time.</p>
            <p>Today, we combine traditional techniques with modern design to bring you pieces that are as functional as they are beautiful. Each item in our collection is carefully selected or crafted to ensure it meets our high standards of quality and design.</p>
            <a href="#" class="btn">Read More</a>
        </div>
    </section>

<section class="featured" id="products">
        <div class="section-header">
            <span class="section-subtitle">Our Collection</span>
            <h2 class="section-title">Featured Products</h2>
            <p>Discover our curated selection of premium furniture pieces</p>
        </div>
        <div class="products-grid">
            <div class="product-card">
                <div class="product-img">
                    <img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Modern Sofa">
                    <p style="font-size: 12px; position: absolute; bottom: 5px; left: 5px; color: white; background: rgba(0,0,0,0.5); padding: 2px 5px;">Photo by <a href="https://unsplash.com/@nathanfertig" target="_blank" style="color: white;">Nathan Fertig</a></p>
                </div>
                <div class="product-info">
                    <span class="product-category">Living Room</span>
                    <h3 class="product-title">Modern Velvet Sofa</h3>
                    <div class="product-price">$1,299</div>
                    <div class="product-meta">
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img">
                    <img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1972&q=80" alt="Dining Table">
                    <p style="font-size: 12px; position: absolute; bottom: 5px; left: 5px; color: white; background: rgba(0,0,0,0.5); padding: 2px 5px;">Photo by <a href="https://unsplash.com/@sidekix" target="_blank" style="color: white;">Sidekix Media</a></p>
                </div>
                <div class="product-info">
                    <span class="product-category">Dining Room</span>
                    <h3 class="product-title">Oak Dining Table</h3>
                    <div class="product-price">$899</div>
                    <div class="product-meta">
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img">
                    <img src="https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80" alt="Bedroom Set">
                    <p style="font-size: 12px; position: absolute; bottom: 5px; left: 5px; color: white; background: rgba(0,0,0,0.5); padding: 2px 5px;">Photo by <a href="https://unsplash.com/@kinga_cichocka" target="_blank" style="color: white;">Kinga Cichocka</a></p>
                </div>
                <div class="product-info">
                    <span class="product-category">Bedroom</span>
                    <h3 class="product-title">Luxury King Bed</h3>
                    <div class="product-price">$1,599</div>
                    <div class="product-meta">
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
            </div>
            <div class="product-card">
                <div class="product-img">
                    <img src="https://images.unsplash.com/photo-1592078615290-033ee584e267?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Bookshelf">
                    <p style="font-size: 12px; position: absolute; bottom: 5px; left: 5px; color: white; background: rgba(0,0,0,0.5); padding: 2px 5px;">Photo by <a href="https://unsplash.com/@huyphan2602" target="_blank" style="color: white;">Huy Phan</a></p>
                </div>
                <div class="product-info">
                    <span class="product-category">Home Office</span>
                    <h3 class="product-title">Minimalist Bookshelf</h3>
                    <div class="product-price">$499</div>
                    <div class="product-meta">
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                        <button class="add-to-cart">Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="section-header">
            <span class="section-subtitle">Happy Customers</span>
            <h2 class="section-title">What Our Clients Say</h2>
        </div>
        <div class="testimonials-container">
            <div class="testimonial-card">
                <p class="testimonial-text">"The quality of the furniture exceeded my expectations. The delivery was prompt and the assembly was straightforward. My living room has never looked better!"</p>
                <div class="testimonial-author">
                    <div class="author-img">
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1888&q=80" alt="Sarah Johnson">
                    </div>
                    <div class="author-info">
                        <h4>Sarah Johnson</h4>
                        <p>Interior Designer</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <p class="testimonial-text">"I've purchased several pieces from LUXE Living over the years and each one has been exceptional. Their customer service is outstanding and the furniture stands up to daily family use."</p>
                <div class="testimonial-author">
                    <div class="author-img">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Michael Chen">
                    </div>
                    <div class="author-info">
                        <h4>Michael Chen</h4>
                        <p>Homeowner</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <p class="testimonial-text">"The custom dining table we ordered was worth every penny. The craftsmanship is impeccable and it's become the centerpiece of our home. Highly recommend their custom services!"</p>
                <div class="testimonial-author">
                    <div class="author-img">
                        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1961&q=80" alt="Emily Rodriguez">
                    </div>
                    <div class="author-info">
                        <h4>Emily Rodriguez</h4>
                        <p>Restaurant Owner</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="section-header">
            <span class="section-subtitle">What We Offer</span>
            <h2 class="section-title">Our Services</h2>
        </div>
        <div class="services-grid">
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-truck"></i>
                </div>
                <h3 class="service-title">Free Delivery</h3>
                <p class="service-desc">Enjoy free standard delivery on all orders over $500. Our careful delivery team will bring your furniture right to your door.</p>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-couch"></i>
                </div>
                <h3 class="service-title">Custom Furniture</h3>
                <p class="service-desc">Work with our designers to create custom pieces tailored to your space, style, and functional needs.</p>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3 class="service-title">5-Year Warranty</h3>
                <p class="service-desc">All our furniture comes with a comprehensive 5-year warranty against manufacturing defects.</p>
            </div>
        </div>
    </section>

<section class="newsletter">
        <h2 class="section-title">Join Our Newsletter</h2>
        <p>Subscribe to receive updates on new arrivals, special offers, and design inspiration straight to your inbox.</p>
        <form class="newsletter-form">
            <input type="email" placeholder="Your email address" required>
            <button type="submit">Subscribe</button>
        </form>
    </section>

<section class="gallery" id="gallery">
        <div class="section-header">
            <span class="section-subtitle">Design Inspiration</span>
            <h2 class="section-title">Our Work in Homes</h2>
        </div>
        <div class="gallery-grid">
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80" alt="Living Room">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
                <p style="font-size: 12px; position: absolute; bottom: 5px; left: 5px; color: white; background: rgba(0,0,0,0.5); padding: 2px 5px;">Photo by <a href="https://unsplash.com/@sidekix" target="_blank" style="color: white;">Sidekix Media</a></p>
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1600121848594-d8644e57abab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Dining Room">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
                <p style="font-size: 12px; position: absolute; bottom: 5px; left: 5px; color: white; background: rgba(0,0,0,0.5); padding: 2px 5px;">Photo by <a href="https://unsplash.com/@nathanfertig" target="_blank" style="color: white;">Nathan Fertig</a></p>
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1600566752227-8f3b0a0a0a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bedroom">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
                <p style="font-size: 12px; position: absolute; bottom: 5px; left: 5px; color: white; background: rgba(0,0,0,0.5); padding: 2px 5px;">Photo by <a href="https://unsplash.com/@sidekix" target="_blank" style="color: white;">Sidekix Media</a></p>
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2003&q=80" alt="Office">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
                <p style="font-size: 12px; position: absolute; bottom: 5px; left: 5px; color: white; background: rgba(0,0,0,0.5); padding: 2px 5px;">Photo by <a href="https://unsplash.com/@spacejoy" target="_blank" style="color: white;">Spacejoy</a></p>
            </div>
        </div>
    </section>

<footer id="contact">
        <div class="footer-grid">
            <div class="footer-col">
                <h3>LUXE Living</h3>
                <p>Transforming houses into homes with premium furniture that combines style, comfort, and durability.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-pinterest-p"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
            <div class="footer-col">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Customer Service</h3>
                <ul class="footer-links">
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">FAQs</a></li>
                    <li><a href="#">Shipping Policy</a></li>
                    <li><a href="#">Returns & Exchanges</a></li>
                    <li><a href="#">Warranty</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Contact Info</h3>
                <p><i class="fas fa-map-marker-alt"></i> 123 Design Street, Furniture City, FC 12345</p>
                <p><i class="fas fa-phone"></i> (123) 456-7890</p>
                <p><i class="fas fa-envelope"></i> info@luxeliving.com</p>
                <p><i class="fas fa-clock"></i> Mon-Sat: 9:00 AM - 6:00 PM</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 LUXE Living. All Rights Reserved. | Designed with <i class="fas fa-heart"></i> by <a href="#" target="_blank">Your Agency</a></p>
        </div>
    </footer>

CSS

:root {
            --primary: #3a3845;
            --secondary: #f7ccac;
            --accent: #c69b7b;
            --light: #f5f5f5;
            --dark: #1a1a1a;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Raleway', sans-serif;
            color: var(--dark);
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
        }
        
        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            transition: all 0.5s ease;
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        }
        
        header.scrolled {
            padding: 15px 5%;
            background-color: rgba(255, 255, 255, 0.98);
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
        }
        
        .logo span {
            color: var(--accent);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 40px;
        }
        
        nav ul li a {
            text-decoration: none;
            color: var(--primary);
            font-weight: 600;
            font-size: 16px;
            transition: color 0.3s;
            position: relative;
        }
        
        nav ul li a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--accent);
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }
        
        nav ul li a:hover:after {
            width: 100%;
        }
        
        nav ul li a:hover {
            color: var(--accent);
        }
        
        .cart-icon {
            font-size: 20px;
            cursor: pointer;
            transition: transform 0.3s;
        }
        
        .cart-icon:hover {
            transform: scale(1.1);
        }
        
        .menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 24px;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            padding: 0 10%;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            z-index: 0;
        }
        
        .hero-content {
            max-width: 600px;
            z-index: 1;
            transform: translateY(50px);
            opacity: 0;
            animation: fadeInUp 1s forwards 0.5s;
        }
        
        .hero h1 {
            font-size: 60px;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero p {
            font-size: 18px;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--accent);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s;
            border: 2px solid var(--accent);
        }
        
        .btn:hover {
            background-color: transparent;
            color: var(--accent);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .btn-outline {
            background-color: transparent;
            color: white;
            border: 2px solid white;
            margin-left: 15px;
        }
        
        .btn-outline:hover {
            background-color: white;
            color: var(--primary);
        }
        
        /* About Section */
        .about {
            padding: 100px 10%;
            display: flex;
            align-items: center;
            background-color: var(--light);
        }
        
        .about-img {
            flex: 1;
            padding-right: 50px;
            transform: translateX(-50px);
            opacity: 0;
            transition: all 1s;
        }
        
        .about-img.in-view {
            transform: translateX(0);
            opacity: 1;
        }
        
        .about-img img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
        }
        
        .about-content {
            flex: 1;
            transform: translateX(50px);
            opacity: 0;
            transition: all 1s;
        }
        
        .about-content.in-view {
            transform: translateX(0);
            opacity: 1;
        }
        
        .section-title {
            font-size: 36px;
            margin-bottom: 20px;
            color: var(--primary);
        }
        
        .section-subtitle {
            color: var(--accent);
            font-size: 18px;
            margin-bottom: 15px;
            display: block;
        }
        
        .about-content p {
            margin-bottom: 20px;
            line-height: 1.8;
            color: #555;
        }
        
        /* Featured Products */
        .featured {
            padding: 100px 10%;
            background-color: white;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 60px;
            transform: translateY(30px);
            opacity: 0;
            transition: all 0.8s;
        }
        
        .section-header.in-view {
            transform: translateY(0);
            opacity: 1;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .product-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
            transform: translateY(50px);
            opacity: 0;
        }
        
        .product-card.in-view {
            transform: translateY(0);
            opacity: 1;
        }
        
        .product-card:nth-child(1) { transition-delay: 0.1s; }
        .product-card:nth-child(2) { transition-delay: 0.2s; }
        .product-card:nth-child(3) { transition-delay: 0.3s; }
        .product-card:nth-child(4) { transition-delay: 0.4s; }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        .product-img {
            height: 250px;
            overflow: hidden;
        }
        
        .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .product-card:hover .product-img img {
            transform: scale(1.1);
        }
        
        .product-info {
            padding: 20px;
        }
        
        .product-category {
            color: var(--accent);
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .product-title {
            font-size: 20px;
            margin-bottom: 10px;
            color: var(--primary);
        }
        
        .product-price {
            font-weight: 700;
            color: var(--primary);
            font-size: 18px;
            margin-bottom: 15px;
        }
        
        .product-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .add-to-cart {
            background-color: var(--accent);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .add-to-cart:hover {
            background-color: var(--primary);
        }
        
        .product-rating {
            color: #ffc107;
        }
        
        /* Testimonials */
        .testimonials {
            padding: 100px 10%;
            background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: white;
            text-align: center;
        }
        
        .testimonials .section-title {
            color: white;
        }
        
        .testimonials-container {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 30px;
            padding: 30px 0;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        
        .testimonials-container::-webkit-scrollbar {
            display: none;
        }
        
        .testimonial-card {
            min-width: 350px;
            scroll-snap-align: start;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 10px;
            text-align: left;
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.8s;
        }
        
        .testimonial-card.in-view {
            transform: scale(1);
            opacity: 1;
        }
        
        .testimonial-text {
            font-style: italic;
            margin-bottom: 20px;
            line-height: 1.8;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
        }
        
        .author-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
        }
        
        .author-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .author-info h4 {
            margin-bottom: 5px;
        }
        
        .author-info p {
            font-size: 14px;
            color: #ccc;
        }
        
        /* Services */
        .services {
            padding: 100px 10%;
            background-color: var(--light);
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .service-card {
            background-color: white;
            padding: 40px 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            transform: translateY(50px);
            opacity: 0;
        }
        
        .service-card.in-view {
            transform: translateY(0);
            opacity: 1;
        }
        
        .service-card:nth-child(1) { transition-delay: 0.1s; }
        .service-card:nth-child(2) { transition-delay: 0.2s; }
        .service-card:nth-child(3) { transition-delay: 0.3s; }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .service-icon {
            font-size: 50px;
            color: var(--accent);
            margin-bottom: 20px;
        }
        
        .service-title {
            font-size: 22px;
            margin-bottom: 15px;
            color: var(--primary);
        }
        
        .service-desc {
            color: #666;
            line-height: 1.8;
        }
        
        /* Newsletter */
        .newsletter {
            padding: 80px 10%;
            background-color: var(--primary);
            color: white;
            text-align: center;
        }
        
        .newsletter .section-title {
            color: white;
        }
        
        .newsletter p {
            max-width: 600px;
            margin: 0 auto 30px;
            line-height: 1.8;
        }
        
        .newsletter-form {
            display: flex;
            max-width: 500px;
            margin: 0 auto;
        }
        
        .newsletter-form input {
            flex: 1;
            padding: 15px 20px;
            border: none;
            border-radius: 30px 0 0 30px;
            font-size: 16px;
        }
        
        .newsletter-form button {
            padding: 15px 30px;
            background-color: var(--accent);
            color: white;
            border: none;
            border-radius: 0 30px 30px 0;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .newsletter-form button:hover {
            background-color: var(--secondary);
        }
        
        /* Gallery */
        .gallery {
            padding: 100px 10%;
        }
        
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .gallery-item {
            height: 250px;
            overflow: hidden;
            border-radius: 10px;
            position: relative;
            transform: scale(0.95);
            opacity: 0;
            transition: all 0.8s;
        }
        
        .gallery-item.in-view {
            transform: scale(1);
            opacity: 1;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        
        .gallery-overlay i {
            color: white;
            font-size: 30px;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark);
            color: white;
            padding: 80px 10% 30px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 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;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 2px;
            background-color: var(--accent);
        }
        
        .footer-col p {
            margin-bottom: 15px;
            line-height: 1.8;
            color: #bbb;
        }
        
        .footer-links li {
            margin-bottom: 10px;
            list-style: none;
        }
        
        .footer-links a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: var(--accent);
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            transition: all 0.3s;
        }
        
        .social-links a:hover {
            background-color: var(--accent);
            transform: translateY(-5px);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #bbb;
            font-size: 14px;
        }
        
        .footer-bottom a {
            color: var(--accent);
            text-decoration: none;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 48px;
            }
            
            .about {
                flex-direction: column;
            }
            
            .about-img {
                padding-right: 0;
                margin-bottom: 40px;
            }
        }
        
        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }
            
            nav {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 80%;
                height: calc(100vh - 80px);
                background-color: white;
                flex-direction: column;
                align-items: center;
                padding: 40px 0;
                transition: all 0.5s;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            }
            
            nav.active {
                left: 0;
            }
            
            nav ul {
                flex-direction: column;
                width: 100%;
            }
            
            nav ul li {
                margin: 0;
                text-align: center;
            }
            
            nav ul li a {
                display: block;
                padding: 15px 0;
            }
            
            .hero h1 {
                font-size: 36px;
            }
            
            .hero p {
                font-size: 16px;
            }
            
            .btn {
                padding: 10px 20px;
            }
            
            .section-title {
                font-size: 30px;
            }
            
            .newsletter-form {
                flex-direction: column;
            }
            
            .newsletter-form input {
                border-radius: 30px;
                margin-bottom: 10px;
            }
            
            .newsletter-form button {
                border-radius: 30px;
            }
        }

JavaScript

// Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// Mobile menu toggle
        const menuToggle = document.getElementById('menuToggle');
        const nav = document.getElementById('nav');

menuToggle.addEventListener('click', function() {
            nav.classList.toggle('active');
            menuToggle.innerHTML = nav.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });

// Close mobile menu when clicking a link
        const navLinks = document.querySelectorAll('nav ul li a');
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                nav.classList.remove('active');
                menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });

// Scroll animation
        const observerOptions = {
            threshold: 0.1
        };

document.querySelectorAll('.about-img, .about-content, .section-header, .product-card, .testimonial-card, .service-card, .gallery-item').forEach(el => {
            observer.observe(el);
        });

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

Modern Furniture Template Preview

Download Options