Premium Real Estate Templates | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LuxeEstate - Premium Real Estate</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <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">
  
</head>
<body>
    
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand playfair" href="#home">LuxeEstate</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#properties">Properties</a></li>
                    <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

<section id="home" class="hero-section">
        <div class="hero-bg"></div>
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title playfair">Luxury Living Redefined</h1>
                <p class="hero-subtitle">Discover extraordinary properties in the world's most prestigious locations</p>
                <div class="hero-cta">
                    <a href="#properties" class="btn-luxury">Explore Properties</a>
                    <a href="#contact" class="btn-outline-luxury">Schedule Viewing</a>
                </div>
            </div>
        </div>
     
    </section>

<section id="properties" class="properties-section">
        <div class="container">
            <div class="fade-in">
                <h2 class="section-title playfair">Featured Properties</h2>
                <p class="section-subtitle">Handpicked luxury homes for the most discerning buyers</p>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="property-card">
                        <div class="property-image">
                         <img src="https://images.unsplash.com/photo-1593696140826-c58b021acf8b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt="">
                            <div class="property-badge">Luxury</div>
                        </div>
                        <div class="property-content">
                            <div class="property-price">$2,850,000</div>
                            <h3 class="property-title">Modern Penthouse Suite</h3>
                            <div class="property-features">
                                <div class="property-feature">
                                    <i class="fas fa-bed"></i>
                                    <span>4 Beds</span>
                                </div>
                                <div class="property-feature">
                                    <i class="fas fa-bath"></i>
                                    <span>3 Baths</span>
                                </div>
                                <div class="property-feature">
                                    <i class="fas fa-ruler-combined"></i>
                                    <span>3,200 sqft</span>
                                </div>
                            </div>
                            <p class="text-muted">Stunning penthouse with panoramic city views, premium finishes, and rooftop terrace.</p>
                            <a href="#" class="btn btn-outline-primary">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="property-card">
                        <div class="property-image">
                       <img src="https://images.unsplash.com/photo-1558036117-15d82a90b9b1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt="">
                            <div class="property-badge">Premium</div>
                        </div>
                        <div class="property-content">
                            <div class="property-price">$4,200,000</div>
                            <h3 class="property-title">Waterfront Villa Estate</h3>
                            <div class="property-features">
                                <div class="property-feature">
                                    <i class="fas fa-bed"></i>
                                    <span>6 Beds</span>
                                </div>
                                <div class="property-feature">
                                    <i class="fas fa-bath"></i>
                                    <span>5 Baths</span>
                                </div>
                                <div class="property-feature">
                                    <i class="fas fa-ruler-combined"></i>
                                    <span>5,800 sqft</span>
                                </div>
                            </div>
                            <p class="text-muted">Exclusive waterfront estate with private beach access, infinity pool, and guest house.</p>
                            <a href="#" class="btn btn-outline-primary">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="property-card">
                        <div class="property-image">
                       <img src="https://images.unsplash.com/photo-1592595896551-12b371d546d5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt="">
                            <div class="property-badge">Exclusive</div>
                        </div>
                        <div class="property-content">
                            <div class="property-price">$1,950,000</div>
                            <h3 class="property-title">Mountain Retreat Lodge</h3>
                            <div class="property-features">
                                <div class="property-feature">
                                    <i class="fas fa-bed"></i>
                                    <span>5 Beds</span>
                                </div>
                                <div class="property-feature">
                                    <i class="fas fa-bath"></i>
                                    <span>4 Baths</span>
                                </div>
                                <div class="property-feature">
                                    <i class="fas fa-ruler-combined"></i>
                                    <span>4,500 sqft</span>
                                </div>
                            </div>
                            <p class="text-muted">Secluded mountain lodge with breathtaking views, stone fireplace, and ski-in access.</p>
                            <a href="#" class="btn btn-outline-primary">View Details</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="about-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 fade-in">
                    <div class="about-image">
                    <img src="https://images.unsplash.com/flagged/photo-1564767609342-620cb19b2357?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt="">
                    </div>
                </div>
                <div class="col-lg-6 fade-in">
                    <h2 class="about-tagline playfair">Crafting Dreams Into Reality</h2>
                    <p class="about-text">For over two decades, LuxeEstate has been the premier destination for luxury real estate. We specialize in connecting discerning clients with extraordinary properties that define sophisticated living.</p>
                    <p class="about-text">Our team of expert advisors understands that purchasing a luxury home is more than a transaction—it's about finding a sanctuary that reflects your lifestyle, values, and aspirations.</p>
                    <div class="about-stats">
                        <div class="stat-item">
                            <span class="stat-number">500+</span>
                            <span class="stat-label">Luxury Properties</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">98%</span>
                            <span class="stat-label">Client Satisfaction</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">25+</span>
                            <span class="stat-label">Years Experience</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="mission-section">
        <div class="container">
            <div class="mission-content fade-in">
                <h2 class="mission-headline playfair">Our Mission: Excellence in Every Detail</h2>
                <p class="mission-text">We are committed to providing unparalleled service in the luxury real estate market. Our mission is to exceed expectations through personalized attention, market expertise, and unwavering dedication to our clients' success. Every property we represent and every client we serve receives the highest level of professional care and attention to detail.</p>
            </div>
        </div>
    </section>

<section class="vision-section">
        <div class="container">
            <div class="typewriter-container fade-in">
                <h2 class="typewriter playfair">Redefining Luxury Living</h2>
                <p class="lead">Our vision is to be the global leader in luxury real estate, setting new standards for excellence and innovation in the industry while creating lasting relationships built on trust and exceptional results.</p>
            </div>
            <div class="vision-images">
                <div class="vision-img">
                 <img src="https://plus.unsplash.com/premium_photo-1679856789403-c6fd2d5ec83c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt="">
                </div>
                <div class="vision-img">
                <img src="https://images.unsplash.com/flagged/photo-1558954157-aa76c0d246c6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt="">
                </div>
                <div class="vision-img">
                <img src="https://images.unsplash.com/photo-1565402170291-8491f14678db?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cmVhbCUyMGVzdGF0ZXxlbnwwfHwwfHx8MA%3D%3D" alt="">
                </div>
            </div>
        </div>
    </section>

<section id="services" class="features-section">
        <div class="container">
            <div class="fade-in text-center mb-5">
                <h2 class="section-title playfair text-white">Why Choose LuxeEstate</h2>
                <p class="section-subtitle text-white">Experience the pinnacle of luxury real estate service</p>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="glass-card fade-in">
                        <i class="fas fa-crown glass-icon"></i>
                        <h4 class="glass-title">Exclusive Portfolio</h4>
                        <p class="glass-text">Access to the most prestigious properties and off-market listings in prime locations worldwide.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="glass-card fade-in">
                        <i class="fas fa-user-tie glass-icon"></i>
                        <h4 class="glass-title">Expert Advisors</h4>
                        <p class="glass-text">Dedicated luxury real estate specialists with deep market knowledge and personalized service.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="glass-card fade-in">
                        <i class="fas fa-shield-alt glass-icon"></i>
                        <h4 class="glass-title">Confidential Service</h4>
                        <p class="glass-text">Discreet and confidential transactions ensuring privacy for high-profile clients.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="glass-card fade-in">
                        <i class="fas fa-globe-americas glass-icon"></i>
                        <h4 class="glass-title">Global Network</h4>
                        <p class="glass-text">International reach with local expertise in luxury markets across the globe.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="glass-card fade-in">
                        <i class="fas fa-concierge-bell glass-icon"></i>
                        <h4 class="glass-title">Concierge Services</h4>
                        <p class="glass-text">Full-service support including legal, financial, and relocation assistance.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="glass-card fade-in">
                        <i class="fas fa-chart-line glass-icon"></i>
                        <h4 class="glass-title">Investment Insights</h4>
                        <p class="glass-text">Market analysis and investment guidance for luxury real estate portfolios.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="contact-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="form-container fade-in">
                        <h2 class="form-title playfair">Begin Your Journey</h2>
                        <p class="form-subtitle">Let us help you find your perfect luxury property</p>
                        <form>
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label class="form-label">Full Name</label>
                                    <input type="text" class="form-control" placeholder="Enter your full name" required>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label class="form-label">Email Address</label>
                                    <input type="email" class="form-control" placeholder="Enter your email" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label class="form-label">Phone Number</label>
                                    <input type="tel" class="form-control" placeholder="Enter your phone number">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label class="form-label">Property Type</label>
                                    <select class="form-control">
                                        <option>Select property type</option>
                                        <option>Luxury Penthouse</option>
                                        <option>Waterfront Villa</option>
                                        <option>Mountain Estate</option>
                                        <option>Urban Mansion</option>
                                        <option>Investment Property</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label class="form-label">Budget Range</label>
                                    <select class="form-control">
                                        <option>Select budget range</option>
                                        <option>$1M - $2M</option>
                                        <option>$2M - $5M</option>
                                        <option>$5M - $10M</option>
                                        <option>$10M+</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label class="form-label">Preferred Location</label>
                                    <input type="text" class="form-control" placeholder="Enter preferred location">
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="form-label">Additional Requirements</label>
                                <textarea class="form-control" rows="4" placeholder="Tell us about your specific requirements and preferences..."></textarea>
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn-luxury">Schedule Consultation</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="gallery-section">
        <div class="container">
            <div class="fade-in text-center mb-5">
                <h2 class="section-title playfair">Property Showcase</h2>
                <p class="section-subtitle">A glimpse into our exclusive luxury portfolio</p>
            </div>
            <div class="gallery-container">
                <div class="gallery-slide active">
                  <img src="https://images.unsplash.com/flagged/photo-1564767609342-620cb19b2357?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt="">
                </div>
                <div class="gallery-slide">
                <img src="https://images.unsplash.com/photo-1560185127-6ed189bf02f4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt="">
                </div>
                <div class="gallery-slide">
               <img src="https://plus.unsplash.com/premium_photo-1679856789403-c6fd2d5ec83c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt="">
                </div>
            </div>
            <div class="gallery-controls">
                <div class="gallery-dot active" data-slide="0"></div>
                <div class="gallery-dot" data-slide="1"></div>
                <div class="gallery-dot" data-slide="2"></div>
            </div>
        </div>
    </section>

<section class="counter-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="counter-item fade-in">
                        <div class="counter-number" data-count="500">0</div>
                        <div class="counter-label">Luxury Properties</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="counter-item fade-in">
                        <div class="counter-number" data-count="2500">0</div>
                        <div class="counter-label">Satisfied Clients</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="counter-item fade-in">
                        <div class="counter-number" data-count="50">0</div>
                        <div class="counter-label">Prime Locations</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="counter-item fade-in">
                        <div class="counter-number" data-count="25">0</div>
                        <div class="counter-label">Years Excellence</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="container footer-content">
            <div class="row">
                <div class="col-lg-4 col-md-6 mb-5">
                    <h3 class="footer-logo playfair">LuxeEstate</h3>
                    <p class="footer-text">Redefining luxury real estate with unparalleled service, exclusive properties, and exceptional client experiences. Your dream home awaits.</p>
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 mb-5">
                    <h5 class="fw-bold mb-3" style="color: var(--primary-gold);">Quick Links</h5>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#properties">Properties</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 mb-5">
                    <h5 class="fw-bold mb-3" style="color: var(--primary-gold);">Services</h5>
                    <ul class="footer-links">
                        <li><a href="#">Luxury Home Sales</a></li>
                        <li><a href="#">Property Investment</a></li>
                        <li><a href="#">Market Analysis</a></li>
                        <li><a href="#">Concierge Services</a></li>
                        <li><a href="#">International Properties</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 mb-5">
                    <h5 class="fw-bold mb-3" style="color: var(--primary-gold);">Contact Info</h5>
                    <div class="footer-text">
                        <p><i class="fas fa-map-marker-alt me-2" style="color: var(--primary-gold);"></i>123 Luxury Avenue, Elite District</p>
                        <p><i class="fas fa-phone me-2" style="color: var(--primary-gold);"></i>+1 (555) LUXURY-1</p>
                        <p><i class="fas fa-envelope me-2" style="color: var(--primary-gold);"></i>info@luxeestate.com</p>
                        <p><i class="fas fa-clock me-2" style="color: var(--primary-gold);"></i>Mon-Sat: 9AM-7PM</p>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 LuxeEstate. All rights reserved. | Privacy Policy | Terms of Service</p>
            </div>
        </div>
    </footer>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --primary-gold: #D4AF37;
            --dark-gold: #B8941F;
            --light-gold: #F4E4BC;
            --charcoal: #2C3E50;
            --light-gray: #F8F9FA;
            --white: #FFFFFF;
            --shadow: rgba(0,0,0,0.1);
        }

body {
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            line-height: 1.6;
        }

.playfair {
            font-family: 'Playfair Display', serif;
        }

/* Navigation */
        .navbar {
            background: rgba(255,255,255,0.95) !important;
            backdrop-filter: blur(20px);
            transition: all 0.3s ease;
            padding: 1rem 0;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }

.navbar-brand {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 2rem;
            color: var(--primary-gold) !important;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

.nav-link {
            font-weight: 500;
            color: var(--charcoal) !important;
            margin: 0 1rem;
            position: relative;
            transition: all 0.3s ease;
        }

.nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background: var(--primary-gold);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

.nav-link:hover::after {
            width: 100%;
        }

/* Hero Section */
        .hero-section {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
        }

.hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D') center/cover;
            animation: heroParallax 20s ease-in-out infinite;
        }

@keyframes heroParallax {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.05) rotate(1deg); }
        }

.hero-content {
            position: relative;
            z-index: 3;
            color: white;
            text-align: center;
        }

.hero-title {
            font-size: 4.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
            animation: heroSlideUp 1.2s ease-out;
        }

.hero-subtitle {
            font-size: 1.8rem;
            margin-bottom: 3rem;
            font-weight: 300;
            animation: heroSlideUp 1.2s ease-out 0.3s both;
        }

.hero-cta {
            display: flex;
            gap: 2rem;
            justify-content: center;
            animation: heroSlideUp 1.2s ease-out 0.6s both;
        }

.btn-luxury {
            padding: 18px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            border: none;
            border-radius: 50px;
            background: linear-gradient(45deg, var(--primary-gold), var(--dark-gold));
            color: white;
            text-decoration: none;
            transition: all 0.4s ease;
            box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
            position: relative;
            overflow: hidden;
        }

.btn-luxury::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.6s ease;
        }

.btn-luxury:hover::before {
            left: 100%;
        }

.btn-luxury:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);
            color: white;
        }

.btn-outline-luxury {
            padding: 18px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            border: 2px solid white;
            border-radius: 50px;
            background: transparent;
            color: white;
            text-decoration: none;
            transition: all 0.4s ease;
        }

.btn-outline-luxury:hover {
            background: white;
            color: var(--charcoal);
            transform: translateY(-3px);
        }

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

/* Property Cards Section */
        .properties-section {
            padding: 120px 0;
            background: var(--light-gray);
        }

.section-title {
            font-size: 3.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1rem;
            color: var(--charcoal);
        }

.section-subtitle {
            font-size: 1.3rem;
            text-align: center;
            color: #666;
            margin-bottom: 4rem;
            font-weight: 300;
        }

.property-card {
            background: white;
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.08);
            transition: all 0.5s ease;
            margin-bottom: 3rem;
            opacity: 0;
            transform: translateY(60px);
        }

.property-card.animate {
            opacity: 1;
            transform: translateY(0);
            animation: cardSlideIn 0.8s ease-out;
        }

.property-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }

.property-image {
            position: relative;
            height: 300px;
            overflow: hidden;
        }

.property-image img {
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
        }

.property-card:hover .property-image img {
            transform: scale(1.1);
        }

.property-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--primary-gold);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }

.property-content {
            padding: 2rem;
        }

.property-price {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-gold);
            margin-bottom: 0.5rem;
        }

.property-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--charcoal);
        }

.property-features {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
            color: #666;
        }

.property-feature {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.95rem;
        }

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

/* About Section */
        .about-section {
            padding: 120px 0;
            background: white;
        }

.about-image {
            position: relative;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }

.about-tagline {
            font-size: 3.2rem;
            font-weight: 700;
            color: var(--charcoal);
            margin-bottom: 2rem;
            line-height: 1.2;
        }

.about-text {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
            line-height: 1.8;
        }

.about-stats {
            display: flex;
            gap: 3rem;
            margin-top: 3rem;
        }

.stat-item {
            text-align: center;
        }

.stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-gold);
            display: block;
        }

.stat-label {
            font-size: 1rem;
            color: #666;
            font-weight: 500;
        }

/* Mission Section */
        .mission-section {
            padding: 120px 0;
            background: linear-gradient(135deg, var(--charcoal) 0%, #34495e 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }

.mission-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"><circle cx="100" cy="100" r="80" fill="rgba(212,175,55,0.1)"/><circle cx="900" cy="500" r="120" fill="rgba(212,175,55,0.05)"/><polygon points="500,50 600,200 400,250" fill="rgba(212,175,55,0.08)"/></svg>') center/cover;
        }

.mission-content {
            position: relative;
            z-index: 2;
            text-align: center;
        }

.mission-headline {
            font-size: 3rem;
            font-weight: 600;
            margin-bottom: 2rem;
            color: var(--light-gold);
        }

.mission-text {
            font-size: 1.3rem;
            line-height: 1.8;
            max-width: 800px;
            margin: 0 auto;
            color: rgba(255,255,255,0.9);
        }

/* Vision Section */
        .vision-section {
            padding: 120px 0;
            background: var(--light-gray);
        }

.typewriter-container {
            text-align: center;
            margin-bottom: 4rem;
        }

.typewriter {
            font-size: 3rem;
            font-weight: 600;
            color: var(--charcoal);
            overflow: hidden;
            border-right: 4px solid var(--primary-gold);
            white-space: nowrap;
            margin: 0 auto;
            animation: typing 4s steps(30, end), blink-caret 0.8s step-end infinite;
            display: inline-block;
        }

@keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

@keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: var(--primary-gold); }
        }

.vision-images {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 4rem;
        }

.vision-img {
            height: 250px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            animation: slideEffect 10s infinite;
        }

.vision-img:nth-child(2) { animation-delay: 2s; }
        .vision-img:nth-child(3) { animation-delay: 4s; }

@keyframes slideEffect {
            0%, 30% { transform: translateX(0) scale(1); opacity: 1; }
            50%, 80% { transform: translateX(10px) scale(1.02); opacity: 0.9; }
            100% { transform: translateX(0) scale(1); opacity: 1; }
        }

/* Features Section */
        .features-section {
            padding: 120px 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
            position: relative;
            overflow: hidden;
        }

.features-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"><circle cx="200" cy="150" r="100" fill="rgba(255,255,255,0.05)"/><circle cx="800" cy="450" r="150" fill="rgba(255,255,255,0.03)"/></svg>') center/cover;
        }

.glass-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 25px;
            padding: 3rem 2rem;
            text-align: center;
            color: white;
            transition: all 0.4s ease;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

.glass-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.8s ease;
        }

.glass-card:hover::before {
            left: 100%;
        }

.glass-card:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

.glass-icon {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            color: var(--light-gold);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

.glass-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

.glass-text {
            font-size: 1.1rem;
            line-height: 1.6;
            opacity: 0.9;
        }

/* Contact Form Section */
        .contact-section {
            padding: 120px 0;
            background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(52, 73, 94, 0.9)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><radialGradient id="contactBg" cx="50%" cy="50%"><stop offset="0%" stop-color="%23667eea"/><stop offset="100%" stop-color="%23764ba2"/></radialGradient></defs><rect width="1920" height="1080" fill="url(%23contactBg)"/><circle cx="400" cy="300" r="200" fill="rgba(255,255,255,0.05)"/><circle cx="1500" cy="700" r="250" fill="rgba(255,255,255,0.03)"/></svg>') center/cover;
            color: white;
        }

.form-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 30px;
            padding: 4rem;
            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
        }

.form-title {
            font-size: 3rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1rem;
            color: var(--light-gold);
        }

.form-subtitle {
            font-size: 1.2rem;
            text-align: center;
            margin-bottom: 3rem;
            opacity: 0.9;
        }

.form-control {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 15px;
            padding: 15px 20px;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }

.form-control::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

.form-control:focus {
            background: rgba(255, 255, 255, 0.2);
            border-color: var(--primary-gold);
            color: white;
            box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
        }

.form-label {
            color: var(--light-gold);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

/* Gallery Section */
        .gallery-section {
            padding: 120px 0;
            background: white;
        }

.gallery-container {
            position: relative;
            height: 500px;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }

.gallery-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }

.gallery-slide.active {
            opacity: 1;
        }

.gallery-slide img {
            width: 100%;
            height: 100%;
        }

.gallery-controls {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            z-index: 10;
        }

.gallery-dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

.gallery-dot.active {
            background: var(--primary-gold);
            transform: scale(1.2);
        }

/* Counter Section */
        .counter-section {
            padding: 120px 0;
            background: linear-gradient(135deg, var(--primary-gold) 0%, var(--dark-gold) 100%);
            color: white;
        }

.counter-item {
            text-align: center;
            padding: 3rem 2rem;
            border-radius: 20px;
            transition: all 0.4s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

.counter-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.1);
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

.counter-item:hover::before {
            transform: translateY(0);
        }

.counter-item:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

.counter-number {
            font-size: 4rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: white;
            position: relative;
            z-index: 2;
        }

.counter-label {
            font-size: 1.3rem;
            font-weight: 500;
            position: relative;
            z-index: 2;
        }

/* Footer */
        .footer {
            background: var(--charcoal);
            color: white;
            padding: 80px 0 30px;
            position: relative;
            overflow: hidden;
        }

.footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 400"><path d="M0,100 Q250,50 500,100 T1000,100 L1000,400 L0,400 Z" fill="rgba(212,175,55,0.1)"/><path d="M0,200 Q250,150 500,200 T1000,200 L1000,400 L0,400 Z" fill="rgba(212,175,55,0.05)"/><circle cx="200" cy="150" r="50" fill="rgba(212,175,55,0.08)"/><circle cx="800" cy="300" r="70" fill="rgba(212,175,55,0.06)"/></svg>') center/cover;
        }

.footer-content {
            position: relative;
            z-index: 2;
        }

.footer-logo {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-gold);
            margin-bottom: 1rem;
        }

.footer-text {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

.social-links {
            display: flex;
            gap: 1rem;
        }

.social-link {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
        }

.social-link:hover {
            background: var(--dark-gold);
            transform: translateY(-3px);
            color: white;
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 0.8rem;
        }

.footer-links a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            transition: color 0.3s ease;
        }

.footer-links a:hover {
            color: var(--primary-gold);
        }

.footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            margin-top: 3rem;
            padding-top: 2rem;
            text-align: center;
            opacity: 0.7;
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.3rem;
            }
            
            .hero-cta {
                flex-direction: column;
                align-items: center;
            }
            
            .section-title {
                font-size: 2.5rem;
            }
            
            .about-tagline {
                font-size: 2.2rem;
            }
            
            .typewriter {
                font-size: 2rem;
            }
            
            .floating-images {
                bottom: 40px;
                gap: 15px;
            }
            
            .floating-img {
                width: 70px;
                height: 70px;
            }
            
            .about-stats {
                flex-direction: column;
                gap: 2rem;
            }
            
            .vision-images {
                grid-template-columns: 1fr;
            }
            
            .form-container {
                padding: 2rem;
            }
            
            .counter-number {
                font-size: 3rem;
            }
        }

/* Scroll Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

.fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

JavaScript

// Smooth scrolling for navigation links
        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'
                    });
                }
            });
        });

// Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

// Observe elements
        document.querySelectorAll('.property-card, .fade-in').forEach(el => {
            observer.observe(el);
        });

// Gallery functionality
        let currentSlide = 0;
        const slides = document.querySelectorAll('.gallery-slide');
        const dots = document.querySelectorAll('.gallery-dot');
        const totalSlides = slides.length;

function showSlide(index) {
            slides.forEach(slide => slide.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            slides[index].classList.add('active');
            dots[index].classList.add('active');
        }

function nextSlide() {
            currentSlide = (currentSlide + 1) % totalSlides;
            showSlide(currentSlide);
        }

// Auto-advance gallery
        setInterval(nextSlide, 5000);

// Manual gallery controls
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentSlide = index;
                showSlide(currentSlide);
            });
        });

// Counter animation
        function animateCounter(element, target) {
            let current = 0;
            const increment = target / 100;
            const timer = setInterval(() => {
                current += increment;
                if (current >= target) {
                    current = target;
                    clearInterval(timer);
                }
                element.textContent = Math.floor(current).toLocaleString();
            }, 30);
        }

document.querySelectorAll('.counter-item').forEach(item => {
            counterObserver.observe(item);
        });

// Navbar background on scroll
        window.addEventListener('scroll', () => {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 100) {
                navbar.style.background = 'rgba(255,255,255,0.98)';
                navbar.style.boxShadow = '0 2px 20px rgba(0,0,0,0.15)';
            } else {
                navbar.style.background = 'rgba(255,255,255,0.95)';
                navbar.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)';
            }
        });

// Form submission
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Thank you for your interest! Our luxury real estate specialist will contact you within 24 hours to schedule your consultation.');
        });

// Typewriter effect restart on scroll
        function restartTypewriter() {
            const typewriter = document.querySelector('.typewriter');
            if (typewriter) {
                typewriter.style.animation = 'none';
                setTimeout(() => {
                    typewriter.style.animation = 'typing 4s steps(30, end), blink-caret 0.8s step-end infinite';
                }, 100);
            }
        }

const typewriterElement = document.querySelector('.typewriter');
        if (typewriterElement) {
            typewriterObserver.observe(typewriterElement);
        }

// Enhanced hover effects for property cards
        document.querySelectorAll('.property-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-15px) scale(1.02)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });

// Parallax effect for hero section
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const heroSection = document.querySelector('.hero-section');
            const heroBg = document.querySelector('.hero-bg');
            
            if (heroSection && heroBg) {
                const rate = scrolled * -0.5;
                heroBg.style.transform = `translateY(${rate}px)`;
            }
        });

Premium Real Estate Templates Preview

Download Options