Premium Real Estate Website 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>Luxury Estates | Premium Real Estate</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;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
   
</head>
<body>
    
    <header id="header">
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo"><i class="fas fa-home"></i>Luxury Estates</a>
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#properties">Properties</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <div class="nav-actions">
                    <a href="#" class="btn btn-secondary">Sign In</a>
                    <div class="menu-toggle">
                        <i class="fas fa-bars"></i>
                    </div>
                </div>
            </nav>
        </div>
    </header>

<section id="home" class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Find Your Dream Home With Us</h1>
                <p>Discover exclusive properties in prime locations. We make finding your perfect home a seamless experience with personalized service and expert guidance.</p>
                <div class="hero-btns">
                    <a href="#properties" class="btn">Browse Properties</a>
                    <a href="#contact" class="btn btn-secondary">Contact Agent</a>
                </div>
                <div class="hero-stats">
                    <div class="stat-item">
                        <span class="stat-number">500+</span>
                        <span class="stat-text">Properties Sold</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">25+</span>
                        <span class="stat-text">Years Experience</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">98%</span>
                        <span class="stat-text">Client Satisfaction</span>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="container">
            <div class="search-bar">
                <div class="search-field">
                    <label for="location">Location</label>
                    <select id="location">
                        <option>Any Location</option>
                        <option>Manhattan</option>
                        <option>Brooklyn</option>
                        <option>Queens</option>
                        <option>Bronx</option>
                    </select>
                </div>
                <div class="search-field">
                    <label for="property-type">Property Type</label>
                    <select id="property-type">
                        <option>Any Type</option>
                        <option>Apartment</option>
                        <option>House</option>
                        <option>Condominium</option>
                        <option>Villa</option>
                    </select>
                </div>
                <div class="search-field">
                    <label for="price-range">Price Range</label>
                    <select id="price-range">
                        <option>Any Price</option>
                        <option>$100,000 - $300,000</option>
                        <option>$300,000 - $500,000</option>
                        <option>$500,000 - $1,000,000</option>
                        <option>$1,000,000+</option>
                    </select>
                </div>
                <div class="search-field">
                    <label for="bedrooms">Bedrooms</label>
                    <select id="bedrooms">
                        <option>Any</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4+</option>
                    </select>
                </div>
                <button class="search-btn">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </section>

<section id="properties" class="featured-properties">
        <div class="container">
            <div class="section-title">
                <h2>Featured Properties</h2>
                <p>Handpicked selections of our most exclusive listings</p>
            </div>
            <div class="properties-grid">
                <div class="property-card">
                    <div class="property-image">
                        <img src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Modern Apartment">
                        <div class="property-badge">For Sale</div>
                    </div>
                    <div class="property-content">
                        <div class="property-price">$1,250,000</div>
                        <h3>Modern Luxury Apartment</h3>
                        <div class="property-address">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>123 Park Avenue, Manhattan, NY</span>
                        </div>
                        <div class="property-features">
                            <div class="feature">
                                <i class="fas fa-bed"></i>
                                <span>3 Beds</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-bath"></i>
                                <span>2 Baths</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-ruler-combined"></i>
                                <span>1,850 Sq Ft</span>
                            </div>
                        </div>
                     
                    </div>
                </div>
                
                <div class="property-card">
                    <div class="property-image">
                        <img src="https://images.unsplash.com/photo-1513584684374-8bab748fbf90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2065&q=80" alt="Luxury Villa">
                        <div class="property-badge">For Rent</div>
                    </div>
                    <div class="property-content">
                        <div class="property-price">$8,500/mo</div>
                        <h3>Luxury Waterfront Villa</h3>
                        <div class="property-address">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>45 Ocean Drive, Miami, FL</span>
                        </div>
                        <div class="property-features">
                            <div class="feature">
                                <i class="fas fa-bed"></i>
                                <span>4 Beds</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-bath"></i>
                                <span>3.5 Baths</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-ruler-combined"></i>
                                <span>3,200 Sq Ft</span>
                            </div>
                        </div>
                   
                    </div>
                </div>
                
                <div class="property-card">
                    <div class="property-image">
                        <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2053&q=80" alt="Penthouse">
                        <div class="property-badge">For Sale</div>
                    </div>
                    <div class="property-content">
                        <div class="property-price">$3,750,000</div>
                        <h3>Penthouse with City Views</h3>
                        <div class="property-address">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>88 Skyline Blvd, Chicago, IL</span>
                        </div>
                        <div class="property-features">
                            <div class="feature">
                                <i class="fas fa-bed"></i>
                                <span>5 Beds</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-bath"></i>
                                <span>4 Baths</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-ruler-combined"></i>
                                <span>4,500 Sq Ft</span>
                            </div>
                        </div>
                   
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="services">
        <div class="container">
            <div class="section-title">
                <h2>Our Services</h2>
                <p>Comprehensive real estate solutions tailored to your needs</p>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3>Property Sales</h3>
                    <p>Expert guidance through the entire home buying or selling process with market insights and negotiation skills.</p>
                    <a href="#" class="btn btn-secondary">Learn More</a>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-key"></i>
                    </div>
                    <h3>Property Rental</h3>
                    <p>Find your perfect rental property or list your property with our dedicated rental management team.</p>
                    <a href="#" class="btn btn-secondary">Learn More</a>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3>Property Valuation</h3>
                    <p>Accurate market valuations to help you make informed decisions about your property investments.</p>
                    <a href="#" class="btn btn-secondary">Learn More</a>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <h3>Consultation</h3>
                    <p>Personalized advice on real estate investments, market trends, and property management strategies.</p>
                    <a href="#" class="btn btn-secondary">Learn More</a>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="about">
        <div class="container">
            <div class="section-title">
                <h2>About Luxury Estates</h2>
                <p>Your trusted partner in luxury real estate for over two decades</p>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <h3>We Transform Real Estate Dreams Into Reality</h3>
                    <p>Founded in 1998, Luxury Estates has established itself as a premier real estate agency specializing in luxury properties in prime locations. Our team of experienced agents brings deep market knowledge and a personalized approach to every client relationship.</p>
                    <p>We believe that finding or selling a home is more than just a transaction - it's a life-changing experience. That's why we're dedicated to providing exceptional service tailored to your unique needs and aspirations.</p>
                    <div class="about-features">
                        <div class="about-feature">
                            <i class="fas fa-check-circle"></i>
                            <div>
                                <h4>Expert Market Knowledge</h4>
                                <p>Deep understanding of local markets and pricing trends</p>
                            </div>
                        </div>
                        <div class="about-feature">
                            <i class="fas fa-check-circle"></i>
                            <div>
                                <h4>Personalized Service</h4>
                                <p>Tailored approach to meet your specific real estate goals</p>
                            </div>
                        </div>
                        <div class="about-feature">
                            <i class="fas fa-check-circle"></i>
                            <div>
                                <h4>Extensive Network</h4>
                                <p>Access to exclusive listings and qualified buyers</p>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="btn">Learn More About Us</a>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1973&q=80" alt="About Us">
                </div>
            </div>
        </div>
    </section>

<section class="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Client Testimonials</h2>
                <p>What our clients say about their experience with us</p>
            </div>
            <div class="testimonials-slider">
                <div class="testimonial-item">
                    <p class="testimonial-text">Luxury Estates made our dream of owning a waterfront property come true. Their attention to detail and negotiation skills saved us over $100,000 on our purchase. We couldn't be happier with our new home!</p>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Jennifer Lopez">
                        </div>
                        <div class="author-info">
                            <h4>Jennifer Lopez</h4>
                            <p>Homeowner in Miami</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="neighborhoods" class="neighborhoods">
        <div class="container">
            <div class="section-title">
                <h2>Featured Neighborhoods</h2>
                <p>Discover the most sought-after locations in the city</p>
            </div>
            <div class="neighborhoods-grid">
                <div class="neighborhood-card">
                    <img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Manhattan">
                    <div class="neighborhood-overlay">
                        <h3>Manhattan</h3>
                        <p>Upscale urban living with world-class amenities</p>
                    </div>
                </div>
                <div class="neighborhood-card">
                    <img src="https://images.unsplash.com/photo-1514565131-fce0801e5785?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Brooklyn Heights">
                    <div class="neighborhood-overlay">
                        <h3>Brooklyn Heights</h3>
                        <p>Historic charm with stunning city views</p>
                    </div>
                </div>
                <div class="neighborhood-card">
                    <img src="https://images.unsplash.com/photo-1576013551627-0cc20b96c2a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Williamsburg">
                    <div class="neighborhood-overlay">
                        <h3>Williamsburg</h3>
                        <p>Trendy neighborhood with vibrant arts scene</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="agents" class="agents">
        <div class="container">
            <div class="section-title">
                <h2>Meet Our Agents</h2>
                <p>Our team of experienced real estate professionals</p>
            </div>
            <div class="agents-grid">
                <div class="agent-card">
                    <div class="agent-image">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
                    </div>
                    <div class="agent-info">
                        <h3>Michael Chen</h3>
                        <p>Senior Real Estate Agent</p>
                        <p>12 years of experience in luxury properties</p>
                        <div class="agent-contact">
                            <a href="#"><i class="fas fa-phone"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                        </div>
                    </div>
                </div>
                <div class="agent-card">
                    <div class="agent-image">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
                    </div>
                    <div class="agent-info">
                        <h3>Sarah Johnson</h3>
                        <p>Luxury Property Specialist</p>
                        <p>Expert in high-end residential properties</p>
                        <div class="agent-contact">
                            <a href="#"><i class="fas fa-phone"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                        </div>
                    </div>
                </div>
                <div class="agent-card">
                    <div class="agent-image">
                        <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="David Wilson">
                    </div>
                    <div class="agent-info">
                        <h3>David Wilson</h3>
                        <p>Commercial Real Estate</p>
                        <p>Specializing in office and retail spaces</p>
                        <div class="agent-contact">
                            <a href="#"><i class="fas fa-phone"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="cta">
        <div class="container">
            <h2>Ready to Find Your Dream Home?</h2>
            <p>Contact us today to schedule a consultation with one of our expert agents. We're here to help you every step of the way.</p>
            <a href="#" class="btn">Get In Touch</a>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Luxury Estates</h3>
                    <p>Your premier partner for luxury real estate. We transform property dreams into reality with expertise and personalized service.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#properties">Properties</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#neighborhoods">Neighborhoods</a></li>
                        <li><a href="#agents">Agents</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Properties</h3>
                    <ul class="footer-links">
                        <li><a href="#">For Sale</a></li>
                        <li><a href="#">For Rent</a></li>
                        <li><a href="#">Luxury Homes</a></li>
                        <li><a href="#">Commercial Properties</a></li>
                        <li><a href="#">Recently Sold</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Contact Info</h3>
                    <ul class="footer-links">
                        <li><i class="fas fa-map-marker-alt"></i> 123 Park Avenue, New York, NY</li>
                        <li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
                        <li><i class="fas fa-envelope"></i> info@luxuryestates.com</li>
                        <li><i class="fas fa-clock"></i> Mon-Fri: 9AM - 6PM</li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 Luxury Estates. All Rights Reserved. | Designed with <i class="fas fa-heart"></i> for premium real estate</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary: #1a365d;
            --secondary: #c5a47e;
            --accent: #e53e3e;
            --light: #f8fafc;
            --dark: #1e293b;
            --gray: #64748b;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--dark);
            background-color: var(--light);
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4, h5 {
            font-family: 'Playfair Display', serif;
            margin-bottom: 1rem;
            line-height: 1.2;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        section {
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--primary);
            display: inline-block;
            position: relative;
        }
        
        .section-title h2:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: var(--secondary);
        }
        
        .btn {
            display: inline-block;
            padding: 14px 32px;
            background: var(--primary);
            color: white;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            font-size: 1rem;
            letter-spacing: 0.5px;
        }
        
        .btn:hover {
            background: var(--secondary);
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }
        
        .btn-secondary {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }
        
        .btn-secondary:hover {
            background: var(--primary);
            color: white;
        }
        
        /* Header Styles */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 0;
            transition: var(--transition);
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
            color: var(--secondary);
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }
        
        .nav-links a:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--secondary);
            transition: var(--transition);
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        .nav-links a:hover:after {
            width: 100%;
        }
        
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .menu-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--primary);
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(rgba(26, 54, 93, 0.7), rgba(26, 54, 93, 0.7)), url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2075&q=80') no-repeat center center/cover;
            color: white;
            position: relative;
        }
        
        .hero-content {
            max-width: 700px;
        }
        
        .hero h1 {
            margin-top: 20px;
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.1;
        }
        
        .hero p {
            font-size: 1rem;
            margin-bottom: 30px;
            max-width: 600px;
            opacity: 0.9;
        }
        
        .hero-btns {
            display: flex;
            gap: 20px;
        }
        
        .hero-stats {
            display: flex;
            margin-top: 50px;
            gap: 40px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--secondary);
            display: block;
        }
        
        .stat-text {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        /* Search Bar */
        .search-bar {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            margin-top: 50px;
            display: grid;
            grid-template-columns: repeat(4, 1fr) auto;
            gap: 15px;
            align-items: end;
        }
        
        .search-field {
            display: flex;
            flex-direction: column;
        }
        
        .search-field label {
            font-size: 0.9rem;
            margin-bottom: 8px;
            color: var(--gray);
            font-weight: 500;
        }
        
        .search-field select,
        .search-field input {
            padding: 12px 15px;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            color: var(--dark);
            background: white;
        }
        
        .search-btn {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px 20px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .search-btn:hover {
            background: var(--secondary);
        }
        
        /* Featured Properties */
        .featured-properties {
            background: white;
        }
        
        .properties-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .property-card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            /* background: white; */
        }
        
        .property-card:hover {
            transform: translateY(-10px);
        }
        
        .property-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
        
        .property-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .property-card:hover .property-image img {
            transform: scale(1.05);
        }
        
        .property-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background: var(--accent);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .property-content {
            padding: 25px;
        }
        
        .property-price {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
        }
        
        .property-address {
            color: var(--gray);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .property-features {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .feature {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .feature i {
            color: var(--secondary);
            margin-bottom: 5px;
            font-size: 1.2rem;
        }
        
        .feature span {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .property-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .property-agent {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .agent-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }
        
        .agent-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .agent-info h4 {
            font-size: 0.9rem;
            margin-bottom: 2px;
        }
        
        .agent-info p {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        /* Services Section */
        .services {
            background: #f8fafc;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .service-card {
            background: white;
            padding: 40px 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
        }
        
        .service-icon {
            width: 80px;
            height: 80px;
            background: rgba(197, 164, 126, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
        }
        
        .service-icon i {
            font-size: 2rem;
            color: var(--secondary);
        }
        
        .service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        
        .service-card p {
            color: var(--gray);
            margin-bottom: 20px;
        }
        
        /* About Section */
        .about {
            background: white;
        }
        
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        
        .about-image {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            position: relative;
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .about-text h3 {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 20px;
        }
        
        .about-text p {
            margin-bottom: 20px;
            color: var(--gray);
        }
        
        .about-features {
            margin-top: 30px;
        }
        
        .about-feature {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }
        
        .about-feature i {
            color: var(--secondary);
            margin-right: 15px;
            font-size: 1.2rem;
            margin-top: 5px;
        }
        
        /* Testimonials Section */
        .testimonials {
            background: linear-gradient(rgba(26, 54, 93, 0.9), rgba(26, 54, 93, 0.9)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1973&q=80') no-repeat center center/cover;
            color: white;
        }
        
        .testimonials .section-title h2 {
            color: white;
        }
        
        .testimonials .section-title h2:after {
            background: var(--secondary);
        }
        
        .testimonials-slider {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .testimonial-item {
            text-align: center;
            padding: 0 20px;
        }
        
        .testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            margin-bottom: 30px;
            position: relative;
            line-height: 1.8;
        }
        
        .testimonial-text:before,
        .testimonial-text:after {
            content: '"';
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.3);
            position: absolute;
        }
        
        .testimonial-text:before {
            top: -20px;
            left: -10px;
        }
        
        .testimonial-text:after {
            bottom: -40px;
            right: -10px;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        
        .author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--secondary);
        }
        
        .author-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .author-info h4 {
            margin-bottom: 5px;
            font-size: 1.2rem;
        }
        
        .author-info p {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        /* Neighborhoods Section */
        .neighborhoods {
            background: white;
        }
        
        .neighborhoods-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .neighborhood-card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            position: relative;
            height: 300px;
        }
        
        .neighborhood-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .neighborhood-card:hover img {
            transform: scale(1.05);
        }
        
        .neighborhood-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 25px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            color: white;
        }
        
        .neighborhood-overlay h3 {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }
        
        .neighborhood-overlay p {
            opacity: 0.9;
            font-size: 0.9rem;
        }
        
        /* Agents Section */
        .agents {
            background: #f8fafc;
        }
        
        .agents-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .agent-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
        }
        
        .agent-card:hover {
            transform: translateY(-10px);
        }
        
        .agent-image {
            height: 250px;
            overflow: hidden;
        }
        
        .agent-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .agent-card:hover .agent-image img {
            transform: scale(1.05);
        }
        
        .agent-info {
            padding: 25px;
        }
        
        .agent-info h3 {
            font-size: 1.3rem;
            margin-bottom: 5px;
        }
        
        .agent-info p {
            color: var(--gray);
            margin-bottom: 15px;
        }
        
        .agent-contact {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        
        .agent-contact a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            transition: var(--transition);
        }
        
        .agent-contact a:hover {
            background: var(--primary);
            color: white;
        }
        
        /* CTA Section */
        .cta {
            background: linear-gradient(rgba(26, 54, 93, 0.9), rgba(26, 54, 93, 0.9)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1973&q=80') no-repeat center center/cover;
            color: white;
            text-align: center;
        }
        
        .cta h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        .cta p {
            max-width: 700px;
            margin: 0 auto 30px;
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        /* Footer */
        footer {
            background: var(--primary);
            color: white;
            padding: 80px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-column h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--secondary);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: var(--transition);
        }
        
        .footer-links a:hover {
            color: var(--secondary);
            padding-left: 5px;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            transition: var(--transition);
        }
        
        .social-links a:hover {
            background: var(--secondary);
            transform: translateY(-5px);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* Responsive Styles */
        @media (max-width: 1200px) {
            .search-bar {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 3rem;
            }
            
            .about-content {
                grid-template-columns: 1fr;
            }
            
            .about-image {
                order: -1;
            }
        }
        
        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }
            
            .nav-links {
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                background: white;
                flex-direction: column;
                align-items: center;
                padding: 20px 0;
                box-shadow: var(--shadow);
                transform: translateY(-100%);
                opacity: 0;
                transition: var(--transition);
            }
            
            .nav-links.active {
                transform: translateY(0);
                opacity: 1;
            }
            
            .nav-links li {
                margin: 15px 0;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero-btns {
                flex-direction: column;
                gap: 15px;
            }
            
            .hero-stats {
                flex-direction: column;
                gap: 20px;
            }
            
            .search-bar {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .cta h2 {
                font-size: 2rem;
            }
            
            .properties-grid,
            .services-grid,
            .neighborhoods-grid,
            .agents-grid {
                grid-template-columns: 1fr;
            }
        }

JavaScript

// Initialize GSAP and ScrollTrigger
        gsap.registerPlugin(ScrollTrigger);
        
        // Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Mobile menu toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const navLinks = document.querySelector('.nav-links');
        
        menuToggle.addEventListener('click', function() {
            navLinks.classList.toggle('active');
        });
        
        // Hero section animation
        gsap.from('.hero h1', {
            duration: 1,
            y: 50,
            opacity: 0,
            ease: 'power3.out'
        });
        
        gsap.from('.hero p', {
            duration: 1,
            y: 30,
            opacity: 0,
            delay: 0.3,
            ease: 'power3.out'
        });
        
        gsap.from('.hero-btns', {
            duration: 1,
            y: 30,
            opacity: 0,
            delay: 0.6,
            ease: 'power3.out'
        });
        
        gsap.from('.hero-stats', {
            duration: 1,
            y: 30,
            opacity: 0,
            delay: 0.9,
            ease: 'power3.out'
        });
        
        gsap.from('.search-bar', {
            duration: 1,
            y: 50,
            opacity: 0,
            delay: 1.2,
            ease: 'power3.out'
        });
        
        
        // About section animation
        gsap.from('.about-text', {
            scrollTrigger: {
                trigger: '.about',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            x: -50,
            opacity: 0,
            ease: 'power3.out'
        });
        
        gsap.from('.about-image', {
            scrollTrigger: {
                trigger: '.about',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            x: 50,
            opacity: 0,
            ease: 'power3.out'
        });
        
        // CTA animation
        gsap.from('.cta h2', {
            scrollTrigger: {
                trigger: '.cta',
                start: 'top 80%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            y: 30,
            opacity: 0,
            ease: 'power3.out'
        });
        
        gsap.from('.cta p', {
            scrollTrigger: {
                trigger: '.cta',
                start: 'top 80%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            y: 30,
            opacity: 0,
            delay: 0.3,
            ease: 'power3.out'
        });
        
        gsap.from('.cta .btn', {
            scrollTrigger: {
                trigger: '.cta',
                start: 'top 80%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            y: 30,
            opacity: 0,
            delay: 0.6,
            ease: 'power3.out'
        });
        
        // Footer animation
        gsap.from('.footer-column', {
            scrollTrigger: {
                trigger: 'footer',
                start: 'top 90%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            y: 30,
            opacity: 0,
            stagger: 0.2,
            ease: 'power3.out'
        });

Premium Real Estate Website Template Preview

Download Options