Premium Real Estates 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">
  
</head>
<body>
    
    <header>
        <div class="container header-container">
            <a href="#" class="logo">LUXE<span>Homes</span></a>
            <nav>
                <ul id="nav-menu">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#properties">Properties</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#mission">Mission</a></li>
                    <li><a href="#vision">Vision</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
            <button class="mobile-menu-btn" id="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container hero-content">
            <h1>Find Your Dream <span class="typed-text"></span></h1>
            <p>Discover the perfect property that matches your lifestyle with our premium selection of homes and expert real estate services.</p>
            <a href="#properties" class="btn">Explore Properties</a>
        </div>
    </section>

<section class="properties" id="properties">
        <div class="container">
            <div class="section-title">
                <h2>Featured Properties</h2>
            </div>
            <div class="properties-grid">
                <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=1470&q=80" alt="Modern Villa">
                    </div>
                    <div class="property-info">
                        <h3>Modern Luxury Villa</h3>
                        <p>Beverly Hills, California</p>
                        <div class="property-details">
                            <div class="detail"><i class="fas fa-bed"></i> 5 Beds</div>
                            <div class="detail"><i class="fas fa-bath"></i> 4 Baths</div>
                            <div class="detail"><i class="fas fa-ruler-combined"></i> 3,500 sqft</div>
                        </div>
                        <div class="price">$2,450,000</div>
                        <a href="#" class="btn">View Details</a>
                    </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=1470&q=80" alt="Penthouse">
                    </div>
                    <div class="property-info">
                        <h3>Downtown Penthouse</h3>
                        <p>New York, NY</p>
                        <div class="property-details">
                            <div class="detail"><i class="fas fa-bed"></i> 3 Beds</div>
                            <div class="detail"><i class="fas fa-bath"></i> 2.5 Baths</div>
                            <div class="detail"><i class="fas fa-ruler-combined"></i> 2,200 sqft</div>
                        </div>
                        <div class="price">$1,850,000</div>
                        <a href="#" class="btn">View Details</a>
                    </div>
                </div>
                
                <div class="property-card">
                    <div class="property-img">
                        <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Beach House">
                    </div>
                    <div class="property-info">
                        <h3>Oceanfront Beach House</h3>
                        <p>Miami, Florida</p>
                        <div class="property-details">
                            <div class="detail"><i class="fas fa-bed"></i> 4 Beds</div>
                            <div class="detail"><i class="fas fa-bath"></i> 3 Baths</div>
                            <div class="detail"><i class="fas fa-ruler-combined"></i> 2,800 sqft</div>
                        </div>
                        <div class="price">$3,200,000</div>
                        <a href="#" class="btn">View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>About Us</h2>
            </div>
            <div class="about-content">
                <div class="about-img">
                    <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Team">
                </div>
                <div class="about-text">
                    <h3>Your Trusted Real Estate Partner</h3>
                    <p>With over 20 years of experience in the real estate industry, we have helped thousands of clients find their dream homes and make sound investment decisions.</p>
                    <p>Our team of dedicated professionals combines local market knowledge with global expertise to provide unparalleled service to our clients.</p>
                    <div class="tagline">Building relationships that last beyond the transaction</div>
                    <p>We believe in creating lasting relationships with our clients by providing exceptional service, honest advice, and personalized solutions.</p>
                    <a href="#contact" class="btn">Get in Touch</a>
                </div>
            </div>
        </div>
    </section>

<section class="mission" id="mission">
        <div class="container">
            <h2>Our Mission</h2>
            <p>To empower our clients through innovative real estate solutions, exceptional service, and expert guidance that transforms their property dreams into reality. We are committed to integrity, professionalism, and creating lasting value in every transaction.</p>
        </div>
    </section>

<section class="vision" id="vision">
        <div class="container">
            <div class="vision-content">
                <div class="vision-text">
                    <h3>Our Vision</h3>
                    <p>We envision a future where finding the perfect property is seamless, transparent, and enjoyable for everyone. By leveraging technology, market insights, and our extensive network, we aim to redefine the real estate experience.</p>
                    <div class="animated-headline">
                        Building <span>the future</span> of real estate
                    </div>
                    <p>Our vision extends beyond transactions to creating communities and enhancing lifestyles through thoughtful property solutions that stand the test of time.</p>
                </div>
                <div class="vision-img">
                    <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Future Building">
                </div>
            </div>
        </div>
    </section>

<section class="stats">
        <div class="container">
            <div class="section-title">
                <h2>By The Numbers</h2>
            </div>
            <div class="stats-grid">
                <div class="stat-item">
                    <i class="fas fa-home"></i>
                    <div class="counter" data-target="1250">0</div>
                    <h3>Properties Sold</h3>
                </div>
                <div class="stat-item">
                    <i class="fas fa-smile"></i>
                    <div class="counter" data-target="980">0</div>
                    <h3>Happy Clients</h3>
                </div>
                <div class="stat-item">
                    <i class="fas fa-award"></i>
                    <div class="counter" data-target="35">0</div>
                    <h3>Awards Won</h3>
                </div>
                <div class="stat-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <div class="counter" data-target="12">0</div>
                    <h3>Locations</h3>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="contact-container">
                <div class="contact-info">
                    <h2>Get In Touch</h2>
                    <p>Have questions about a property or our services? Reach out to our team and we'll be happy to assist you.</p>
                    <div class="contact-details">
                        <div class="contact-detail">
                            <i class="fas fa-map-marker-alt"></i>
                            <p>123 Luxury Avenue, Beverly Hills, CA 90210</p>
                        </div>
                        <div class="contact-detail">
                            <i class="fas fa-phone-alt"></i>
                            <p>+1 (310) 555-1234</p>
                        </div>
                        <div class="contact-detail">
                            <i class="fas fa-envelope"></i>
                            <p>info@luxehomes.com</p>
                        </div>
                    </div>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="contact-form">
                    <h3>Send Us a Message</h3>
                    <form>
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" id="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone</label>
                            <input type="tel" id="phone">
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea id="message" required></textarea>
                        </div>
                        <button type="submit" class="btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>LUXE Homes</h3>
                    <p>Your premier real estate partner for luxury properties and exceptional service.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#properties">Properties</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#mission">Our Mission</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Services</h3>
                    <ul class="footer-links">
                        <li><a href="#">Property Sales</a></li>
                        <li><a href="#">Property Management</a></li>
                        <li><a href="#">Investment Consulting</a></li>
                        <li><a href="#">Home Valuation</a></li>
                        <li><a href="#">Relocation Services</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Subscribe to our newsletter for the latest property updates and market insights.</p>
                    <form>
                        <div class="form-group">
                            <input type="email" placeholder="Your Email" required>
                        </div>
                        <button type="submit" class="btn">Subscribe</button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 LUXE Homes. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

/* Global Styles */
        :root {
            --primary: #2c3e50;
            --secondary: #e74c3c;
            --light: #ecf0f1;
            --dark: #34495e;
            --accent: #3498db;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            overflow-x: hidden;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        section {
            padding: 80px 0;
        }
        
        h1, h2, h3, h4 {
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        p {
            margin-bottom: 15px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--secondary);
            color: white;
            border: none;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .btn:hover {
            background: #c0392b;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 36px;
            color: var(--primary);
            display: inline-block;
        }
        
        .section-title h2::after {
            content: '';
            display: block;
            width: 70px;
            height: 4px;
            background: var(--secondary);
            margin: 15px auto;
        }
        
        /* Header Styles */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: all 0.3s ease;
            padding: 20px 0;
        }
        
        header.scrolled {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            padding: 15px 0;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: white;
            text-decoration: none;
        }
        
        header.scrolled .logo {
            color: var(--primary);
        }
        
        .logo span {
            color: var(--secondary);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 30px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
            position: relative;
        }
        
        header.scrolled nav ul li a {
            color: var(--primary);
        }
        
        nav ul li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--secondary);
            bottom: -5px;
            left: 0;
            transition: width 0.3s ease;
        }
        
        nav ul li a:hover::after {
            width: 100%;
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }
        
        header.scrolled .mobile-menu-btn {
            color: var(--primary);
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
        }
        
        .hero-content {
            width: 100%;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
        }
        
        .typed-text {
            color: var(--secondary);
            border-right: 3px solid var(--secondary);
            animation: blink 0.7s infinite;
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        
        .hero p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 30px;
        }
        
        /* Featured Properties */
        .properties {
            background: #f9f9f9;
        }
        
        .properties-grid {
            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.1);
            transition: transform 0.5s ease, box-shadow 0.5s ease;
            opacity: 0;
            transform: translateY(50px);
        }
        
        .property-card.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .property-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
        
        .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: 20px;
        }
        
        .property-info h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }
        
        .property-info p {
            color: #666;
            margin-bottom: 15px;
        }
        
        .property-details {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .detail {
            display: flex;
            align-items: center;
        }
        
        .detail i {
            color: var(--secondary);
            margin-right: 5px;
        }
        
        .price {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
        }
        
        /* About Section */
        .about {
            background: white;
        }
        
        .about-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 40px;
        }
        
        .about-img {
            flex: 1;
            min-width: 300px;
            position: relative;
        }
        
        .about-img img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .about-img::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 5px solid var(--secondary);
            border-radius: 10px;
            top: -20px;
            left: -20px;
            z-index: -1;
        }
        
        .about-text {
            flex: 1;
            min-width: 300px;
        }
        
        .tagline {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
            margin: 20px 0;
            position: relative;
            display: inline-block;
        }
        
        .tagline::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 3px;
            background: var(--secondary);
            bottom: -10px;
            left: 0;
        }
        
        /* Mission Section */
        .mission {
            background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
            color: white;
            text-align: center;
        }
        
        .mission h2 {
            font-size: 36px;
            margin-bottom: 30px;
        }
        
        .mission p {
            max-width: 800px;
            margin: 0 auto;
            font-size: 18px;
        }
        
        /* Vision Section */
        .vision {
            background: white;
        }
        
        .vision-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 40px;
        }
        
        .vision-text {
            flex: 1;
            min-width: 300px;
        }
        
        .vision-img {
            flex: 1;
            min-width: 300px;
            position: relative;
        }
        
        .vision-img img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.5s ease;
        }
        
        .vision-img:hover img {
            transform: scale(1.05);
        }
        
        .animated-headline {
            font-size: 28px;
            margin-bottom: 20px;
        }
        
        .animated-headline span {
            position: relative;
            display: inline-block;
            color: var(--secondary);
        }
        
        .animated-headline span::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: white;
            left: 0;
            animation: typing 3s steps(20) infinite;
        }
        
        @keyframes typing {
            0% { width: 0; }
            50% { width: 100%; }
            100% { width: 0; }
        }
        
        /* Stats Section */
        .stats {
            background: #f9f9f9;
            text-align: center;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }
        
        .stat-item {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .stat-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .stat-item i {
            font-size: 40px;
            color: var(--secondary);
            margin-bottom: 20px;
        }
        
        .counter {
            font-size: 48px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
        }
        
        .stat-item h3 {
            font-size: 20px;
            color: #666;
        }
        
        /* Contact Section */
        .contact {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1560520031-3a4dc4e9de0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1467&q=80') no-repeat center center/cover;
            color: white;
        }
        
        .contact-container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
        }
        
        .contact-info {
            flex: 1;
            min-width: 300px;
        }
        
        .contact-info h2 {
            font-size: 36px;
            margin-bottom: 30px;
        }
        
        .contact-info p {
            margin-bottom: 30px;
        }
        
        .contact-details {
            margin-bottom: 30px;
        }
        
        .contact-detail {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .contact-detail i {
            font-size: 20px;
            color: var(--secondary);
            margin-right: 15px;
            width: 20px;
        }
        
        .contact-form {
            flex: 1;
            min-width: 300px;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .contact-form h3 {
            color: var(--primary);
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
            font-weight: 600;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        
        .form-group textarea {
            height: 150px;
            resize: vertical;
        }
        
        /* Footer */
        footer {
            background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
            color: white;
            padding: 80px 0 30px;
            position: relative;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 50px;
        }
        
        .footer-column h3 {
            font-size: 22px;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 3px;
            background: var(--secondary);
            bottom: -10px;
            left: 0;
        }
        
        .footer-column p {
            margin-bottom: 20px;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-links a:hover {
            color: var(--secondary);
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background: var(--secondary);
            transform: translateY(-5px);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Responsive Styles */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .property-card {
                min-width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            nav ul {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: var(--primary);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: left 0.3s ease;
            }
            
            header.scrolled nav ul {
                top: 70px;
                height: calc(100vh - 70px);
            }
            
            nav ul.active {
                left: 0;
            }
            
            nav ul li {
                margin: 15px 0;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .section-title h2 {
                font-size: 28px;
            }
            
            .about-img::before {
                display: none;
            }
        }
        
        @media (max-width: 576px) {
            section {
                padding: 60px 0;
            }
            
            .hero h1 {
                font-size: 1.8rem;
            }
            
            .btn {
                padding: 10px 25px;
            }
        }

JavaScript

// Typing Effect
        const typedTextSpan = document.querySelector(".typed-text");
        const cursorSpan = document.querySelector(".cursor");
        
        const textArray = ["Home", "Apartment", "Villa", "Investment"];
        const typingDelay = 200;
        const erasingDelay = 100;
        const newTextDelay = 2000; // Delay between current and next text
        let textArrayIndex = 0;
        let charIndex = 0;
        
        function type() {
            if (charIndex < textArray[textArrayIndex].length) {
                if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
                typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
                charIndex++;
                setTimeout(type, typingDelay);
            } 
            else {
                cursorSpan.classList.remove("typing");
                setTimeout(erase, newTextDelay);
            }
        }
        
        function erase() {
            if (charIndex > 0) {
                if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
                typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
                charIndex--;
                setTimeout(erase, erasingDelay);
            } 
            else {
                cursorSpan.classList.remove("typing");
                textArrayIndex++;
                if(textArrayIndex>=textArray.length) textArrayIndex=0;
                setTimeout(type, typingDelay + 1100);
            }
        }
        
        document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
            if(textArray.length) setTimeout(type, newTextDelay + 250);
        });
        
        // Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const navMenu = document.getElementById('nav-menu');
        
        mobileMenuBtn.addEventListener('click', () => {
            navMenu.classList.toggle('active');
            mobileMenuBtn.innerHTML = navMenu.classList.contains('active') ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });
        
        // Close mobile menu when clicking a link
        document.querySelectorAll('#nav-menu a').forEach(link => {
            link.addEventListener('click', () => {
                navMenu.classList.remove('active');
                mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });
        
        // Header Scroll Effect
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            header.classList.toggle('scrolled', window.scrollY > 100);
        });
        
        // Animate Property Cards on Scroll
        const propertyCards = document.querySelectorAll('.property-card');
        
        function checkScroll() {
            propertyCards.forEach(card => {
                const cardTop = card.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                
                if (cardTop < windowHeight - 100) {
                    card.classList.add('visible');
                }
            });
        }
        
        window.addEventListener('scroll', checkScroll);
        window.addEventListener('load', checkScroll);
        
        // 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;
                }
            });
        }
        
        // Start counter animation when stats section is in view
        const statsSection = document.querySelector('.stats');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animateCounters();
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });
        
        observer.observe(statsSection);
        
        // Smooth Scrolling for Anchor Links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

Premium Real Estates Template Preview

Download Options