Real Estate 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 Homes | 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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">

</head>
<body>
    
    <header id="header">
        <a href="#" class="logo">Luxury<span>Homes</span></a>
        <div class="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>
        <nav class="navbar">
            <a href="#home">Home</a>
            <a href="#properties">Properties</a>
            <a href="#about">About</a>
            <a href="#agents">Agents</a>
            <a href="#testimonials">Testimonials</a>
            <a href="#blog">Blog</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Find Your Dream Home With Us</h1>
            <p>Discover the perfect property that matches your lifestyle. We offer premium real estate services with the best properties in the most desirable locations.</p>
            <a href="#properties" class="btn">Explore Properties</a>
        </div>
        <div class="search-form">
            <h3>Search Properties</h3>
            <div class="form-row">
                <div class="form-group">
                    <label for="location">Location</label>
                    <input type="text" id="location" placeholder="Enter city or neighborhood">
                </div>
                <div class="form-group">
                    <label for="type">Property Type</label>
                    <select id="type">
                        <option value="">Any Type</option>
                        <option value="house">House</option>
                        <option value="apartment">Apartment</option>
                        <option value="villa">Villa</option>
                        <option value="condo">Condo</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="bedrooms">Bedrooms</label>
                    <select id="bedrooms">
                        <option value="">Any</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4+">4+</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="price">Price Range</label>
                    <select id="price">
                        <option value="">Any</option>
                        <option value="100-200">$100k - $200k</option>
                        <option value="200-500">$200k - $500k</option>
                        <option value="500-1M">$500k - $1M</option>
                        <option value="1M+">$1M+</option>
                    </select>
                </div>
            </div>
            <button type="submit" class="btn">Search Now</button>
        </div>
    </section>

<section class="section" id="properties">
        <div class="section-title">
            <h2>Featured Properties</h2>
            <p>Explore our handpicked selection of premium properties in the most sought-after locations.</p>
        </div>
        <div class="properties">
            <div class="property-card">
                <div class="property-img">
                    <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Modern House">
                </div>
                <div class="property-info">
                    <h3>Modern Luxury Villa</h3>
                    <div class="location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>Beverly Hills, CA</span>
                    </div>
                    <p>Stunning modern villa with panoramic views, infinity pool, and smart home features.</p>
                    <div class="property-meta">
                        <div class="meta-item">
                            <i class="fas fa-bed"></i>
                            <span>5 Beds</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-bath"></i>
                            <span>4 Baths</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-vector-square"></i>
                            <span>3,500 sqft</span>
                        </div>
                    </div>
                    <div class="price">$2,450,000</div>
                </div>
            </div>
            <div class="property-card">
                <div class="property-img">
                    <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Contemporary Home">
                </div>
                <div class="property-info">
                    <h3>Contemporary Family Home</h3>
                    <div class="location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>Austin, TX</span>
                    </div>
                    <p>Beautiful contemporary home with open floor plan, chef's kitchen, and spacious backyard.</p>
                    <div class="property-meta">
                        <div class="meta-item">
                            <i class="fas fa-bed"></i>
                            <span>4 Beds</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-bath"></i>
                            <span>3 Baths</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-vector-square"></i>
                            <span>2,800 sqft</span>
                        </div>
                    </div>
                    <div class="price">$1,250,000</div>
                </div>
            </div>
            <div class="property-card">
                <div class="property-img">
                    <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Penthouse Apartment">
                </div>
                <div class="property-info">
                    <h3>Luxury Penthouse</h3>
                    <div class="location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>New York, NY</span>
                    </div>
                    <p>Exclusive penthouse with floor-to-ceiling windows, private terrace, and premium finishes.</p>
                    <div class="property-meta">
                        <div class="meta-item">
                            <i class="fas fa-bed"></i>
                            <span>3 Beds</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-bath"></i>
                            <span>3.5 Baths</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-vector-square"></i>
                            <span>2,200 sqft</span>
                        </div>
                    </div>
                    <div class="price">$3,750,000</div>
                </div>
            </div>
        </div>
    </section>

<section class="section about" id="about">
        <div class="about-content">
            <h2>Why Choose Us</h2>
            <p>With over 15 years of experience in the real estate industry, we've helped thousands of clients find their dream homes. Our team of expert agents provides personalized service to match you with properties that fit your unique needs and lifestyle.</p>
            <p>We pride ourselves on our extensive market knowledge, negotiation skills, and commitment to excellence. Our clients' satisfaction is our top priority.</p>
            <a href="#contact" class="btn">Get in Touch</a>
            <div class="stats">
                <div class="stat-item">
                    <h3 class="counter" data-target="1500">0</h3>
                    <p>Properties Sold</p>
                </div>
                <div class="stat-item">
                    <h3 class="counter" data-target="95">0</h3>
                    <p>Happy Clients</p>
                </div>
                <div class="stat-item">
                    <h3 class="counter" data-target="25">0</h3>
                    <p>Awards Won</p>
                </div>
            </div>
        </div>
    </section>

<section class="section agents" id="agents">
        <div class="section-title">
            <h2>Our Expert Agents</h2>
            <p>Meet our team of dedicated real estate professionals who will guide you through every step of your property journey.</p>
        </div>
        <div class="agent-cards">
            <div class="agent-card">
                <div class="agent-img">
                    <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Agent 1">
                </div>
                <div class="agent-info">
                    <h3>Michael Johnson</h3>
                    <p>Senior Real Estate Agent</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-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="agent-card">
                <div class="agent-img">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=988&q=80" alt="Agent 2">
                </div>
                <div class="agent-info">
                    <h3>Sarah Williams</h3>
                    <p>Luxury Property Specialist</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-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="agent-card">
                <div class="agent-img">
                    <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Agent 3">
                </div>
                <div class="agent-info">
                    <h3>David Chen</h3>
                    <p>Commercial Real Estate</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-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section testimonials" id="testimonials">
        <div class="section-title">
            <h2>What Our Clients Say</h2>
            <p>Hear from our satisfied clients about their experiences working with our team.</p>
        </div>
        <div class="testimonial-slider">
            <div class="testimonial-slide active">
                <div class="testimonial-content">
                    "Working with LuxuryHomes was an absolute pleasure. Their attention to detail and understanding of our needs helped us find our dream home in record time. The entire process was smooth and stress-free."
                </div>
                <div class="client-info">
                    <div class="client-img">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Client 1">
                    </div>
                    <div class="client-name">
                        <h4>Jennifer Adams</h4>
                        <p>Homeowner in Miami</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-slide">
                <div class="testimonial-content">
                    "As a first-time homebuyer, I was nervous about the process, but my agent made everything so easy to understand. They negotiated an amazing deal for me and found a property that exceeded all my expectations."
                </div>
                <div class="client-info">
                    <div class="client-img">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Client 2">
                    </div>
                    <div class="client-name">
                        <h4>Robert Taylor</h4>
                        <p>First-time Homebuyer</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-slide">
                <div class="testimonial-content">
                    "The team at LuxuryHomes sold our property for 15% above asking price in just 2 weeks! Their marketing strategy and network of buyers are truly impressive. We couldn't be happier with the results."
                </div>
                <div class="client-info">
                    <div class="client-img">
                        <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Client 3">
                    </div>
                    <div class="client-name">
                        <h4>Emily & Mark Wilson</h4>
                        <p>Sellers in Chicago</p>
                    </div>
                </div>
            </div>
            <div class="slider-dots">
                <div class="dot active" data-slide="0"></div>
                <div class="dot" data-slide="1"></div>
                <div class="dot" data-slide="2"></div>
            </div>
        </div>
    </section>

<section class="section blog" id="blog">
        <div class="section-title">
            <h2>Latest News & Tips</h2>
            <p>Stay informed with our real estate insights, market trends, and home improvement tips.</p>
        </div>
        <div class="blog-posts">
            <div class="blog-card">
                <div class="blog-img">
                    <img src="https://images.unsplash.com/photo-1605146768851-eda79da39897?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Blog 1">
                </div>
                <div class="blog-content">
                    <span class="blog-date">June 15, 2023</span>
                    <h3>5 Essential Tips for First-Time Homebuyers</h3>
                    <p>Navigating the real estate market for the first time can be overwhelming. Learn these key strategies to make your first home purchase a success.</p>
                    <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="blog-card">
                <div class="blog-img">
                    <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Blog 2">
                </div>
                <div class="blog-content">
                    <span class="blog-date">May 28, 2023</span>
                    <h3>2023 Real Estate Market Trends to Watch</h3>
                    <p>Discover the emerging trends that are shaping the real estate landscape this year and how they might affect your buying or selling decisions.</p>
                    <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="blog-card">
                <div class="blog-img">
                    <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Blog 3">
                </div>
                <div class="blog-content">
                    <span class="blog-date">May 10, 2023</span>
                    <h3>Maximizing Your Home's Curb Appeal</h3>
                    <p>Simple yet effective ways to enhance your home's exterior that can significantly increase its value and attract potential buyers.</p>
                    <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

<section class="section contact" id="contact">
        <div class="section-title">
            <h2>Get In Touch</h2>
            <p>Have questions or ready to start your property journey? Contact us today.</p>
        </div>
        <div class="contact-container">
            <div class="contact-info">
                <h3>Contact Information</h3>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="info-content">
                        <h4>Our Office</h4>
                        <p>1234 Luxury Avenue, Beverly Hills, CA 90210</p>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <div class="info-content">
                        <h4>Call Us</h4>
                        <p>+1 (310) 555-1234</p>
                        <p>+1 (800) 555-5678</p>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="info-content">
                        <h4>Email Us</h4>
                        <p>info@luxuryhomes.com</p>
                        <p>sales@luxuryhomes.com</p>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="info-content">
                        <h4>Working Hours</h4>
                        <p>Monday - Friday: 9:00 AM - 6:00 PM</p>
                        <p>Saturday: 10:00 AM - 4:00 PM</p>
                    </div>
                </div>
            </div>
            <div class="contact-form">
                <h3>Send Us a Message</h3>
                <form>
                    <input type="text" class="form-input" placeholder="Your Name" required>
                    <input type="email" class="form-input" placeholder="Your Email" required>
                    <input type="text" class="form-input" placeholder="Subject">
                    <textarea class="form-input" placeholder="Your Message" required></textarea>
                    <button type="submit" class="btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="footer-container">
            <div class="footer-col">
                <h3>About Us</h3>
                <p>LuxuryHomes is a premier real estate agency specializing in luxury properties across the United States. We're committed to delivering exceptional service and results.</p>
                <div class="footer-social">
                    <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-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <div class="footer-col">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#properties">Properties</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#agents">Agents</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Property Types</h3>
                <ul class="footer-links">
                    <li><a href="#">Houses</a></li>
                    <li><a href="#">Apartments</a></li>
                    <li><a href="#">Villas</a></li>
                    <li><a href="#">Condos</a></li>
                    <li><a href="#">Townhouses</a></li>
                    <li><a href="#">Luxury Estates</a></li>
                    <li><a href="#">Commercial Properties</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Newsletter</h3>
                <p>Subscribe to our newsletter for the latest property listings and real estate news.</p>
                <form class="newsletter-form">
                    <input type="email" placeholder="Your Email" required>
                    <button type="submit" class="btn">Subscribe</button>
                </form>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 LuxuryHomes. All Rights Reserved. | Designed with <i class="fas fa-heart"></i> by LuxuryHomes Team</p>
        </div>
    </footer>

CSS

:root {
            --primary: #4a6bff;
            --secondary: #ff7e5f;
            --dark: #1a1a2e;
            --light: #f8f9fa;
            --gray: #6c757d;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
            scroll-behavior: smooth;
        }

body {
            background-color: var(--light);
            color: var(--dark);
            overflow-x: hidden;
        }

/* Header/Navbar */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            transition: all 0.5s ease;
        }

header.scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            padding: 15px 100px;
        }

.logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
        }

.logo span {
            color: var(--secondary);
        }

.navbar {
            display: flex;
            gap: 40px;
        }

.navbar a {
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s ease;
            position: relative;
        }

.navbar a:hover {
            color: var(--primary);
        }

.navbar a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--primary);
            bottom: -5px;
            left: 0;
            transition: width 0.3s ease;
        }

.navbar a:hover::after {
            width: 100%;
        }

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

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            padding: 0 100px;
            color: white;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
        }

.hero:hover::before {
            left: 100%;
        }

.hero-content {
            max-width: 600px;
            transform: translateY(50px);
            opacity: 0;
            transition: all 1s ease;
        }

.hero-content.animated {
            transform: translateY(0);
            opacity: 1;
        }

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

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

.btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--primary);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

.btn:hover {
            background: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

/* Search Form */
        .search-form {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            margin-top: 50px;
            transform: translateY(50px);
            opacity: 0;
            transition: all 1s ease 0.3s;
        }

.search-form.animated {
            transform: translateY(0);
            opacity: 1;
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
        }

.form-group input, .form-group select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

.form-row {
            display: flex;
            gap: 20px;
        }

.form-row .form-group {
            flex: 1;
        }

/* Featured Properties */
        .section {
            padding: 100px;
        }

.section-title {
            text-align: center;
            margin-bottom: 60px;
            transform: translateY(30px);
            opacity: 0;
            transition: all 0.8s ease;
        }

.section-title.animated {
            transform: translateY(0);
            opacity: 1;
        }

.section-title h2 {
            font-size: 36px;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 15px;
        }

.section-title p {
            color: var(--gray);
            font-size: 18px;
            max-width: 700px;
            margin: 0 auto;
        }

.properties {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }

.property-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            transform: translateY(50px);
            opacity: 0;
        }

.property-card.animated {
            transform: translateY(0);
            opacity: 1;
        }

.property-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.property-img {
            height: 250px;
            overflow: hidden;
        }

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

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

.property-info {
            padding: 25px;
        }

.property-info h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }

.property-info p {
            color: var(--gray);
            margin-bottom: 15px;
            line-height: 1.6;
        }

.property-info .location {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--gray);
            margin-bottom: 15px;
        }

.property-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

.meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--gray);
        }

.price {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
        }

/* About Section */
        .about {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: white;
            padding: 100px;
        }

.about-content {
            max-width: 600px;
            transform: translateX(-50px);
            opacity: 0;
            transition: all 1s ease;
        }

.about-content.animated {
            transform: translateX(0);
            opacity: 1;
        }

.about h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }

.about p {
            margin-bottom: 30px;
            line-height: 1.8;
            font-size: 16px;
        }

.stats {
            display: flex;
            gap: 30px;
            margin-top: 50px;
        }

.stat-item {
            text-align: center;
            transform: scale(0);
            transition: all 0.5s ease;
        }

.stat-item.animated {
            transform: scale(1);
        }

.stat-item h3 {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--secondary);
        }

.stat-item p {
            font-size: 18px;
            color: white;
        }

/* Agents Section */
        .agents {
            background-color: #f5f7fa;
        }

.agent-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }

.agent-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            text-align: center;
            padding-bottom: 30px;
            transition: all 0.3s ease;
            transform: translateY(50px);
            opacity: 0;
        }

.agent-card.animated {
            transform: translateY(0);
            opacity: 1;
        }

.agent-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.agent-img {
            height: 300px;
            overflow: hidden;
            margin-bottom: 20px;
        }

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

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

.agent-info h3 {
            font-size: 22px;
            margin-bottom: 5px;
        }

.agent-info p {
            color: var(--gray);
            margin-bottom: 20px;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

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

.social-links a:hover {
            background: var(--secondary);
            transform: translateY(-3px);
        }

/* Testimonials */
        .testimonials {
            background: linear-gradient(rgba(74, 107, 255, 0.9), rgba(74, 107, 255, 0.9)), url('https://images.unsplash.com/photo-1605146769289-440113cc3d00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
        }

.testimonials .section-title h2,
        .testimonials .section-title p {
            color: white;
        }

.testimonial-slider {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

.testimonial-slide {
            padding: 30px;
            display: none;
            animation: fade 1s ease;
        }

@keyframes fade {
            from {opacity: 0.4}
            to {opacity: 1}
        }

.testimonial-slide.active {
            display: block;
        }

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

.client-info {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

.client-img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
        }

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

.client-name h4 {
            font-size: 20px;
            margin-bottom: 5px;
            text-align: left;
        }

.client-name p {
            color: rgba(255, 255, 255, 0.8);
            text-align: left;
        }

.slider-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
        }

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

.dot.active {
            background: white;
            transform: scale(1.2);
        }

/* Blog Section */
        .blog-posts {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }

.blog-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            transform: translateY(50px);
            opacity: 0;
        }

.blog-card.animated {
            transform: translateY(0);
            opacity: 1;
        }

.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.blog-img {
            height: 250px;
            overflow: hidden;
        }

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

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

.blog-content {
            padding: 25px;
        }

.blog-date {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 5px 15px;
            border-radius: 30px;
            font-size: 14px;
            margin-bottom: 15px;
        }

.blog-content h3 {
            font-size: 22px;
            margin-bottom: 15px;
            line-height: 1.4;
        }

.blog-content p {
            color: var(--gray);
            margin-bottom: 20px;
            line-height: 1.6;
        }

.read-more {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--primary);
            font-weight: 500;
            text-decoration: none;
            transition: all 0.3s ease;
        }

.read-more:hover {
            color: var(--secondary);
            gap: 10px;
        }

/* Contact Section */
        .contact {
            background-color: #f5f7fa;
        }

.contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
        }

.contact-info {
            transform: translateX(-50px);
            opacity: 0;
            transition: all 1s ease;
        }

.contact-info.animated {
            transform: translateX(0);
            opacity: 1;
        }

.contact-info h3 {
            font-size: 24px;
            margin-bottom: 20px;
        }

.info-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            margin-bottom: 25px;
        }

.info-icon {
            width: 50px;
            height: 50px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            flex-shrink: 0;
        }

.info-content h4 {
            font-size: 18px;
            margin-bottom: 5px;
        }

.info-content p {
            color: var(--gray);
            line-height: 1.6;
        }

.contact-form {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transform: translateX(50px);
            opacity: 0;
            transition: all 1s ease;
        }

.contact-form.animated {
            transform: translateX(0);
            opacity: 1;
        }

.contact-form h3 {
            font-size: 24px;
            margin-bottom: 20px;
        }

.form-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            margin-bottom: 20px;
        }

textarea.form-input {
            min-height: 150px;
            resize: vertical;
        }

/* Footer */
        footer {
            background: var(--dark);
            color: white;
            padding: 80px 100px 30px;
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 50px;
        }

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

.footer-col h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 50px;
            height: 2px;
            background: var(--primary);
        }

.footer-col p {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.8;
            margin-bottom: 20px;
        }

.footer-links li {
            margin-bottom: 15px;
            list-style: none;
        }

.footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
        }

.footer-links a:hover {
            color: var(--primary);
            transform: translateX(5px);
        }

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

.footer-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            transition: all 0.3s ease;
        }

.footer-social a:hover {
            background: var(--primary);
            transform: translateY(-3px);
        }

.footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
        }

/* Animations */
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }

.floating {
            animation: float 3s ease-in-out infinite;
        }

/* Responsive */
        @media (max-width: 1200px) {
            header, .hero, .section, footer {
                padding-left: 50px;
                padding-right: 50px;
            }
        }

@media (max-width: 992px) {
            .menu-toggle {
                display: block;
                z-index: 1001;
            }

.navbar {
                position: fixed;
                top: 0;
                right: -100%;
                width: 300px;
                height: 100vh;
                background: white;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 30px;
                box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
                transition: all 0.5s ease;
                z-index: 1000;
            }

.navbar.active {
                right: 0;
            }

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

.hero p {
                font-size: 16px;
            }

.section {
                padding: 80px 50px;
            }

.stats {
                flex-direction: column;
                gap: 20px;
            }
        }

@media (max-width: 768px) {
            header, .hero, .section, footer {
                padding-left: 30px;
                padding-right: 30px;
            }

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

.form-row {
                flex-direction: column;
                gap: 0;
            }

.section-title h2 {
                font-size: 30px;
            }

.section-title p {
                font-size: 16px;
            }
        }

@media (max-width: 576px) {
            header, .hero, .section, footer {
                padding-left: 20px;
                padding-right: 20px;
            }

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

.btn {
                padding: 10px 25px;
            }

.section {
                padding: 60px 20px;
            }

.property-card, .blog-card {
                grid-column: 1 / -1;
            }
        }

JavaScript

// Mobile Menu Toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const navbar = document.querySelector('.navbar');

menuToggle.addEventListener('click', () => {
            navbar.classList.toggle('active');
            menuToggle.classList.toggle('fa-times');
        });

// Close mobile menu when clicking a link
        document.querySelectorAll('.navbar a').forEach(link => {
            link.addEventListener('click', () => {
                navbar.classList.remove('active');
                menuToggle.classList.remove('fa-times');
            });
        });

// Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            header.classList.toggle('scrolled', window.scrollY > 0);
        });

// Testimonial Slider
        let currentSlide = 0;
        const slides = document.querySelectorAll('.testimonial-slide');
        const dots = document.querySelectorAll('.dot');

function showSlide(n) {
            slides.forEach(slide => slide.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            currentSlide = (n + slides.length) % slides.length;
            slides[currentSlide].classList.add('active');
            dots[currentSlide].classList.add('active');
        }

dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                showSlide(index);
            });
        });

// Auto slide change
        setInterval(() => {
            showSlide(currentSlide + 1);
        }, 5000);

// Counter Animation
        const counters = document.querySelectorAll('.counter');
        const speed = 200;

function animateCounters() {
            counters.forEach(counter => {
                const target = +counter.getAttribute('data-target');
                const count = +counter.innerText;
                const increment = target / speed;

if (count < target) {
                    counter.innerText = Math.ceil(count + increment);
                    setTimeout(animateCounters, 1);
                } else {
                    counter.innerText = target;
                }
            });
        }

// Scroll Animation
        function animateOnScroll() {
            const elements = document.querySelectorAll('.hero-content, .search-form, .section-title, .property-card, .about-content, .stat-item, .agent-card, .contact-info, .contact-form');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;

if (elementPosition < screenPosition) {
                    element.classList.add('animated');
                    
                    if (element.classList.contains('stat-item')) {
                        animateCounters();
                    }
                }
            });
        }

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

Real Estate Template Preview

Download Options