<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dress Your Home - Luxury Home Decor</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            color: #2c2c2c;
            overflow-x: hidden;
            background: #fafafa;
        }

        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 20px 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            box-shadow: 0 2px 20px rgba(0,0,0,0.05);
        }

        .logo {
            font-size: 28px;
            font-weight: 600;
            letter-spacing: 2px;
            color: #2c2c2c;
        }

        .nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }

        .nav-links a {
            text-decoration: none;
            color: #2c2c2c;
            font-size: 16px;
            letter-spacing: 1px;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #8b7355;
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.3)), 
                        url('https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=1600') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            position: relative;
        }

        .hero-content {
            animation: fadeInUp 1.2s ease-out;
        }

        .hero h1 {
            font-size: 72px;
            font-weight: 300;
            margin-bottom: 20px;
            letter-spacing: 4px;
        }

        .hero p {
            font-size: 24px;
            margin-bottom: 40px;
            letter-spacing: 2px;
        }

        .btn {
            padding: 15px 40px;
            background: white;
            color: #2c2c2c;
            text-decoration: none;
            font-size: 16px;
            letter-spacing: 2px;
            border: 2px solid white;
            transition: all 0.3s;
            display: inline-block;
        }

        .btn:hover {
            background: transparent;
            color: white;
        }

        /* About Section */
        .about {
            padding: 120px 60px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .about-image {
            height: 600px;
            background: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=800') center/cover;
            animation: fadeIn 1s ease-out;
        }

        .about-content h2 {
            font-size: 48px;
            margin-bottom: 30px;
            font-weight: 300;
            letter-spacing: 3px;
        }

        .about-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #666;
            margin-bottom: 20px;
        }

        /* Collections Section */
        .collections {
            padding: 120px 60px;
            background: white;
        }

        .section-title {
            text-align: center;
            font-size: 48px;
            font-weight: 300;
            letter-spacing: 3px;
            margin-bottom: 80px;
        }

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

        .collection-item {
            position: relative;
            height: 500px;
            overflow: hidden;
            cursor: pointer;
        }

        .collection-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .collection-item:hover img {
            transform: scale(1.1);
        }

        .collection-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            padding: 40px;
            color: white;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.4s ease;
        }

        .collection-item:hover .collection-overlay {
            transform: translateY(0);
            opacity: 1;
        }

        .collection-overlay h3 {
            font-size: 28px;
            margin-bottom: 10px;
            letter-spacing: 2px;
        }

        .collection-overlay p {
            font-size: 16px;
            letter-spacing: 1px;
        }

        /* Featured Products */
        .featured {
            padding: 120px 60px;
            background: #f8f8f8;
        }

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

        .product-card {
            background: white;
            padding: 20px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

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

        .product-image {
            height: 300px;
            background-size: cover;
            background-position: center;
            margin-bottom: 20px;
        }

        .product-card h3 {
            font-size: 20px;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }

        .product-card p {
            color: #8b7355;
            font-size: 18px;
            font-weight: 600;
        }

        /* Testimonials */
        .testimonials {
            padding: 120px 60px;
            background: #2c2c2c;
            color: white;
            text-align: center;
        }

        .testimonials h2 {
            font-size: 48px;
            font-weight: 300;
            letter-spacing: 3px;
            margin-bottom: 80px;
        }

        .testimonial-slider {
            max-width: 800px;
            margin: 0 auto;
        }

        .testimonial {
            font-size: 24px;
            line-height: 1.8;
            font-style: italic;
            margin-bottom: 30px;
        }

        .testimonial-author {
            font-size: 18px;
            letter-spacing: 2px;
            color: #8b7355;
        }

        /* Footer */
        footer {
            background: #1a1a1a;
            color: white;
            padding: 80px 60px 40px;
        }

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

        .footer-section h3 {
            font-size: 20px;
            margin-bottom: 20px;
            letter-spacing: 2px;
        }

        .footer-section ul {
            list-style: none;
        }

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

        .footer-section a {
            color: #999;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-section a:hover {
            color: white;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 40px;
            border-top: 1px solid #333;
            color: #666;
        }

        .social-links {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            border: 1px solid #999;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .social-links a:hover {
            background: white;
            border-color: white;
            color: #1a1a1a;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        /* Responsive */
        @media (max-width: 768px) {
            nav {
                padding: 20px 30px;
            }

            .nav-links {
                gap: 20px;
            }

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

            .about, .collection-grid, .product-grid, .footer-content {
                grid-template-columns: 1fr;
            }

            .section-title, .about-content h2 {
                font-size: 32px;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav>
        <div class="logo">DRESS YOUR HOME</div>
        <ul class="nav-links">
            <li><a href="#home">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#collections">COLLECTIONS</a></li>
            <li><a href="#products">PRODUCTS</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
    </nav>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-content">
            <h1>DRESS YOUR HOME</h1>
            <p>Luxury Home Decor & Interior Design</p>
            <a href="#collections" class="btn">EXPLORE COLLECTIONS</a>
        </div>
    </section>

    <!-- About Section -->
    <section class="about" id="about">
        <div class="about-image"></div>
        <div class="about-content">
            <h2>Crafting Beautiful Spaces</h2>
            <p>At Dress Your Home, we believe that every space tells a story. Our curated collection of luxury home decor combines timeless elegance with contemporary design, bringing sophistication to your living spaces.</p>
            <p>From handcrafted textiles to bespoke furniture, each piece is carefully selected to transform your house into a home that reflects your unique style and personality.</p>
            <a href="#collections" class="btn" style="background: #2c2c2c; color: white; border-color: #2c2c2c;">DISCOVER MORE</a>
        </div>
    </section>

    <!-- Collections Section -->
    <section class="collections" id="collections">
        <h2 class="section-title">Our Collections</h2>
        <div class="collection-grid">
            <div class="collection-item">
                <img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=600" alt="Living Room">
                <div class="collection-overlay">
                    <h3>Living Room</h3>
                    <p>Sophisticated seating & decor</p>
                </div>
            </div>
            <div class="collection-item">
                <img src="https://images.unsplash.com/photo-1540518614846-7eded433c457?w=600" alt="Bedroom">
                <div class="collection-overlay">
                    <h3>Bedroom</h3>
                    <p>Luxurious comfort & style</p>
                </div>
            </div>
            <div class="collection-item">
                <img src="https://images.unsplash.com/photo-1556912173-46c336c7fd55?w=600" alt="Dining">
                <div class="collection-overlay">
                    <h3>Dining</h3>
                    <p>Elegant dining essentials</p>
                </div>
            </div>
            <div class="collection-item">
                <img src="https://images.unsplash.com/photo-1615529182904-14819c35db37?w=600" alt="Textiles">
                <div class="collection-overlay">
                    <h3>Textiles</h3>
                    <p>Premium fabrics & cushions</p>
                </div>
            </div>
            <div class="collection-item">
                <img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=600" alt="Lighting">
                <div class="collection-overlay">
                    <h3>Lighting</h3>
                    <p>Illuminate with elegance</p>
                </div>
            </div>
            <div class="collection-item">
                <img src="https://images.unsplash.com/photo-1600494603989-9650cf6ddd3d?w=600" alt="Accessories">
                <div class="collection-overlay">
                    <h3>Accessories</h3>
                    <p>Finishing touches</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Products -->
    <section class="featured" id="products">
        <h2 class="section-title">Featured Products</h2>
        <div class="product-grid">
            <div class="product-card">
                <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?w=400');"></div>
                <h3>Velvet Cushion Set</h3>
                <p>$129.00</p>
            </div>
            <div class="product-card">
                <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400');"></div>
                <h3>Crystal Table Lamp</h3>
                <p>$289.00</p>
            </div>
            <div class="product-card">
                <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1594026112344-02ae2f682f1b?w=400');"></div>
                <h3>Marble Decorative Vase</h3>
                <p>$179.00</p>
            </div>
            <div class="product-card">
                <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1595515106969-1ce29566ff1c?w=400');"></div>
                <h3>Silk Throw Blanket</h3>
                <p>$349.00</p>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="testimonials">
        <h2>What Our Clients Say</h2>
        <div class="testimonial-slider">
            <div class="testimonial">
                "Dress Your Home transformed our living space into a sanctuary of elegance. The quality and attention to detail are unmatched."
            </div>
            <div class="testimonial-author">— SARAH MITCHELL, NEW YORK</div>
        </div>
    </section>

    <!-- Footer -->
    <footer id="contact">
        <div class="footer-content">
            <div class="footer-section">
                <h3>ABOUT US</h3>
                <p style="color: #999; line-height: 1.8;">Dress Your Home brings luxury and sophistication to your living spaces with our curated collection of premium home decor.</p>
                <div class="social-links">
                    <a href="#">f</a>
                    <a href="#">i</a>
                    <a href="#">p</a>
                </div>
            </div>
            <div class="footer-section">
                <h3>QUICK LINKS</h3>
                <ul>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#collections">Collections</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>SUPPORT</h3>
                <ul>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Shipping Info</a></li>
                    <li><a href="#">Returns</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>CONTACT</h3>
                <ul style="color: #999;">
                    <li>Email: info@dressyourhome.com</li>
                    <li>Phone: +1 (555) 123-4567</li>
                    <li>Address: 123 Design Street</li>
                    <li>New York, NY 10001</li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 Dress Your Home. All Rights Reserved.</p>
        </div>
    </footer>

    <script>
        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });

        // Fade in elements on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        document.querySelectorAll('.collection-item, .product-card').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(el);
        });
    </script>
</body>
</html>