EcoFriendly 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>VerdeVista | Sustainable Luxury Living</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
</head>
<body>
    
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>

<header id="header">
        <div class="container header-container">
            <a href="#" class="logo">
                <i class="fas fa-leaf logo-icon"></i>
                <div>
                    <div class="logo-text">VerdeVista</div>
                    <div class="logo-subtext">SUSTAINABLE LIVING</div>
                </div>
            </a>
            
            <button class="mobile-menu-btn" id="mobileMenuBtn">
                <i class="fas fa-bars"></i>
            </button>
            
            <nav id="mainNav">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#highlights">Highlights</a></li>
                    <li><a href="#plans">Plans</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#enquiry" class="btn">Enquire Now</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1>Live Sustainably, Live Luxuriously</h1>
                <p>VerdeVista redefines modern living with environmentally conscious design, cutting-edge technology, and harmonious integration with nature. Experience the future of sustainable luxury.</p>
                <div class="hero-btns">
                    <a href="#plans" class="btn">Explore Floor Plans <i class="fas fa-arrow-right"></i></a>
                    <a href="#enquiry" class="btn btn-beige">Schedule a Tour <i class="fas fa-calendar-alt"></i></a>
                </div>
            </div>
        </div>
    </section>

<section class="eco-features" id="features">
        <div class="container">
            <div class="section-subtitle">Our Green Features</div>
            <h2>Designed for Sustainability</h2>
            <div class="features-grid">
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-solar-panel"></i>
                    </div>
                    <h3>Solar Power Integration</h3>
                    <p>Advanced photovoltaic systems provide clean, renewable energy with smart grid connectivity for optimal efficiency.</p>
                </div>
                
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-recycle"></i>
                    </div>
                    <h3>Zero-Waste Systems</h3>
                    <p>Comprehensive recycling, composting, and waste reduction systems that minimize landfill contribution.</p>
                </div>
                
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-tint"></i>
                    </div>
                    <h3>Water Reclamation</h3>
                    <p>State-of-the-art rainwater harvesting and greywater recycling systems reduce water consumption by up to 70%.</p>
                </div>
                
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3>Living Architecture</h3>
                    <p>Green roofs, vertical gardens, and native landscaping promote biodiversity and natural insulation.</p>
                </div>
            </div>
        </div>
    </section>

<section class="benefits" id="benefits">
        <div class="container">
            <div class="section-subtitle">Why Choose VerdeVista</div>
            <h2>Benefits of Sustainable Living</h2>
            <div class="benefits-grid">
                <div class="benefit-item fade-in">
                    <i class="fas fa-heartbeat"></i>
                    <h3>Enhanced Wellbeing</h3>
                    <p>Improved indoor air quality, natural light optimization, and biophilic design elements contribute to better physical and mental health for residents.</p>
                </div>
                
                <div class="benefit-item fade-in">
                    <i class="fas fa-chart-line"></i>
                    <h3>Financial Efficiency</h3>
                    <p>Energy-efficient designs and renewable energy integration reduce utility costs by 40-60% compared to conventional homes.</p>
                </div>
                
                <div class="benefit-item fade-in">
                    <i class="fas fa-globe-americas"></i>
                    <h3>Planet Positive</h3>
                    <p>Our community achieves carbon-negative status through sustainable materials, renewable energy, and carbon sequestration.</p>
                </div>
            </div>
        </div>
    </section>

<section class="highlights" id="highlights">
        <div class="container">
            <div class="section-subtitle">Conservation Achievements</div>
            <h2>Environmental Impact</h2>
            <div class="highlight-container">
                <div class="highlight-card fade-in">
                    <div class="highlight-number">65%</div>
                    <div class="highlight-text">Water Savings</div>
                    <p>Through smart irrigation, low-flow fixtures, and comprehensive water reclamation systems.</p>
                </div>
                
                <div class="highlight-card fade-in floating" style="animation-delay: 0.2s;">
                    <div class="highlight-number">80%</div>
                    <div class="highlight-text">Energy Reduction</div>
                    <p>Solar panels, passive design, and energy-efficient appliances minimize energy consumption.</p>
                </div>
                
                <div class="highlight-card fade-in" style="animation-delay: 0.4s;">
                    <div class="highlight-number">95%</div>
                    <div class="highlight-text">Waste Diversion</div>
                    <p>Advanced recycling and composting programs keep materials out of landfills.</p>
                </div>
            </div>
        </div>
    </section>

<section class="floor-plans" id="plans">
        <div class="container">
            <div class="section-subtitle">Architectural Excellence</div>
            <h2>Thoughtfully Designed Spaces</h2>
            <div class="plans-container">
                <div class="plan-card fade-in">
                    <div class="plan-header">
                        <h3>The Aspen</h3>
                        <p>2 Bedroom | 2 Bath | 1,150 sq.ft.</p>
                    </div>
                    <div class="plan-details">
                        <div class="plan-feature">
                            <span>Bedrooms</span>
                            <span>2</span>
                        </div>
                        <div class="plan-feature">
                            <span>Bathrooms</span>
                            <span>2</span>
                        </div>
                        <div class="plan-feature">
                            <span>Square Feet</span>
                            <span>1,150</span>
                        </div>
                        <div class="plan-feature">
                            <span>Private Garden</span>
                            <span>Yes</span>
                        </div>
                        <div class="plan-feature">
                            <span>Starting From</span>
                            <span style="color: var(--dark-green); font-weight: 700;">$525,000</span>
                        </div>
                        <a href="#enquiry" class="btn" style="width: 100%; margin-top: 30px;">Request Details</a>
                    </div>
                </div>
                
                <div class="plan-card fade-in">
                    <div class="plan-header">
                        <h3>The Sequoia</h3>
                        <p>3 Bedroom | 2.5 Bath | 1,650 sq.ft.</p>
                        <div style="margin-top: 10px; font-size: 0.9rem; opacity: 0.9;">MOST POPULAR</div>
                    </div>
                    <div class="plan-details">
                        <div class="plan-feature">
                            <span>Bedrooms</span>
                            <span>3</span>
                        </div>
                        <div class="plan-feature">
                            <span>Bathrooms</span>
                            <span>2.5</span>
                        </div>
                        <div class="plan-feature">
                            <span>Square Feet</span>
                            <span>1,650</span>
                        </div>
                        <div class="plan-feature">
                            <span>Private Garden</span>
                            <span>Yes</span>
                        </div>
                        <div class="plan-feature">
                            <span>Starting From</span>
                            <span style="color: var(--dark-green); font-weight: 700;">$695,000</span>
                        </div>
                        <a href="#enquiry" class="btn" style="width: 100%; margin-top: 30px;">Request Details</a>
                    </div>
                </div>
                
                <div class="plan-card fade-in">
                    <div class="plan-header">
                        <h3>The Redwood</h3>
                        <p>4 Bedroom | 3.5 Bath | 2,200 sq.ft.</p>
                    </div>
                    <div class="plan-details">
                        <div class="plan-feature">
                            <span>Bedrooms</span>
                            <span>4</span>
                        </div>
                        <div class="plan-feature">
                            <span>Bathrooms</span>
                            <span>3.5</span>
                        </div>
                        <div class="plan-feature">
                            <span>Square Feet</span>
                            <span>2,200</span>
                        </div>
                        <div class="plan-feature">
                            <span>Private Garden</span>
                            <span>Yes</span>
                        </div>
                        <div class="plan-feature">
                            <span>Starting From</span>
                            <span style="color: var(--dark-green); font-weight: 700;">$895,000</span>
                        </div>
                        <a href="#enquiry" class="btn" style="width: 100%; margin-top: 30px;">Request Details</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="gallery" id="gallery">
        <div class="container">
            <div class="section-subtitle">Visual Journey</div>
            <h2>Community & Design</h2>
            <div class="gallery-grid">
                <div class="gallery-item fade-in">
                    <img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Green building exterior">
                    <div class="overlay">
                        <h3>Modern Eco-Architecture</h3>
                    </div>
                </div>
                <div class="gallery-item fade-in">
                    <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1752&q=80" alt="Modern eco-friendly interior">
                    <div class="overlay">
                        <h3>Sustainable Interiors</h3>
                    </div>
                </div>
                <div class="gallery-item fade-in">
                    <img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Community garden">
                    <div class="overlay">
                        <h3>Community Gardens</h3>
                    </div>
                </div>
                <div class="gallery-item fade-in">
                    <img src="https://images.unsplash.com/photo-1613977257363-707ba9348227?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Solar panels on roof">
                    <div class="overlay">
                        <h3>Renewable Energy</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-subtitle">Resident Experiences</div>
            <h2>Life at VerdeVista</h2>
            <div class="testimonials-container">
                <div class="testimonial-card fade-in">
                    <div class="testimonial-text">
                        "Moving to VerdeVista was the best decision for our family. Not only have our energy bills dropped significantly, but the sense of community and connection to nature is priceless."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <img src="https://images.unsplash.com/photo-1494790108755-2616b786d4d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Sarah Johnson">
                        </div>
                        <div>
                            <h4>Sarah Johnson</h4>
                            <p>Resident since 2021</p>
                        </div>
                    </div>
                </div>
                
                <div class="testimonial-card fade-in">
                    <div class="testimonial-text">
                        "As an architect, I appreciate the thoughtful sustainable design. The passive heating and cooling systems work perfectly, and the air quality is noticeably better than anywhere I've lived before."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <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="Michael Chen">
                        </div>
                        <div>
                            <h4>Michael Chen</h4>
                            <p>Resident since 2020</p>
                        </div>
                    </div>
                </div>
                
                <div class="testimonial-card fade-in">
                    <div class="testimonial-text">
                        "The community garden and shared electric vehicle program show that sustainability extends beyond the homes. Living here has changed how we think about our environmental impact."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=988&q=80" alt="Dr. Elena Rodriguez">
                        </div>
                        <div>
                            <h4>Dr. Elena Rodriguez</h4>
                            <p>Resident since 2022</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="enquiry" id="enquiry">
        <div class="container">
            <div class="section-subtitle">Begin Your Journey</div>
            <h2>Request a Private Tour</h2>
            <div class="form-container fade-in">
                <form id="enquiryForm">
                    <div class="form-group">
                        <label for="name">Full Name</label>
                        <input type="text" id="name" class="form-control" placeholder="Your Name" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" class="form-control" placeholder="your.email@example.com" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="tel" id="phone" class="form-control" placeholder="(123) 456-7890">
                    </div>
                    
                    <div class="form-group">
                        <label for="plan">Interested In</label>
                        <select id="plan" class="form-control">
                            <option value="">Select a floor plan</option>
                            <option value="aspen">The Aspen (2 Bedroom)</option>
                            <option value="sequoia">The Sequoia (3 Bedroom)</option>
                            <option value="redwood">The Redwood (4 Bedroom)</option>
                            <option value="all">All Options</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Additional Questions</label>
                        <textarea id="message" class="form-control" rows="5" placeholder="Tell us about your interest in sustainable living and any specific questions you may have..."></textarea>
                    </div>
                    
                    <button type="submit" class="btn" style="width: 100%; padding: 20px; font-size: 1.1rem;">Submit Enquiry <i class="fas fa-paper-plane"></i></button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>VerdeVista</h3>
                    <p style="color: var(--pale-green); margin-bottom: 25px;">Creating sustainable communities that harmonize modern luxury with environmental stewardship. Our vision is a future where luxury and sustainability are inseparable.</p>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></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="#plans">Floor Plans</a></li>
                        <li><a href="#gallery">Gallery</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3>Contact Us</h3>
                    <ul class="footer-links">
                        <li><i class="fas fa-map-marker-alt" style="margin-right: 10px;"></i> 123 Greenway Blvd, Eco City, EC 10001</li>
                        <li><i class="fas fa-phone" style="margin-right: 10px;"></i> (555) 123-4567</li>
                        <li><i class="fas fa-envelope" style="margin-right: 10px;"></i> info@verdevista.com</li>
                        <li><i class="fas fa-clock" style="margin-right: 10px;"></i> Mon-Fri: 9am-6pm | Sat: 10am-4pm</li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 VerdeVista Sustainable Living. All rights reserved. | <a href="#" style="color: var(--light-green);">Privacy Policy</a> | <a href="#" style="color: var(--light-green);">Terms of Service</a></p>
                <p style="margin-top: 10px;">Designed with <i class="fas fa-heart" style="color: #ff6b6b;"></i> for our planet | LEED Platinum Certified | Net Zero Energy Ready</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary-green: #2e7d32;
            --light-green: #4caf50;
            --pale-green: #c8e6c9;
            --dark-green: #1b5e20;
            --forest-green: #2d5a27;
            --beige: #f5f5dc;
            --light-beige: #fafafa;
            --cream: #f9f7f1;
            --dark-beige: #e6e6d6;
            --text-dark: #333;
            --text-light: #666;
            --white: #ffffff;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
            --transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            --transition-slow: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            --border-radius: 12px;
        }

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

html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

body {
            font-family: 'Open Sans', sans-serif;
            color: var(--text-dark);
            background-color: var(--light-beige);
            line-height: 1.8;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

h1, h2, h3, h4 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            color: var(--forest-green);
            margin-bottom: 1.5rem;
        }

h1 {
            font-size: 3.5rem;
            line-height: 1.1;
            font-family: 'Playfair Display', serif;
            font-weight: 700;
        }

h2 {
            font-size: 2.8rem;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

h2:after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(to right, var(--light-green), var(--primary-green));
            border-radius: 2px;
        }

h3 {
            font-size: 1.8rem;
        }

p {
            margin-bottom: 1.5rem;
            color: var(--text-light);
            font-weight: 400;
        }

.container {
            width: 90%;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 20px;
        }

section {
            padding: 100px 0;
        }

.section-subtitle {
            text-align: center;
            font-size: 1.2rem;
            color: var(--light-green);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1rem;
            font-weight: 600;
        }

.btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 18px 40px;
            background: linear-gradient(135deg, var(--primary-green), var(--light-green));
            color: var(--white);
            border: none;
            border-radius: 50px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            box-shadow: 0 5px 15px rgba(46, 125, 50, 0.2);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

.btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: linear-gradient(135deg, var(--dark-green), var(--forest-green));
            transition: var(--transition);
            z-index: -1;
        }

.btn:hover:before {
            width: 100%;
        }

.btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 25px rgba(46, 125, 50, 0.3);
        }

.btn i {
            margin-left: 10px;
            transition: var(--transition);
        }

.btn:hover i {
            transform: translateX(5px);
        }

.btn-beige {
            background: linear-gradient(135deg, var(--beige), var(--cream));
            color: var(--forest-green);
            box-shadow: 0 5px 15px rgba(245, 245, 220, 0.3);
        }

.btn-beige:before {
            background: linear-gradient(135deg, var(--dark-beige), var(--beige));
        }

/* Header & Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(255, 255, 255, 0.98);
            padding: 25px 0;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: var(--transition-slow);
            backdrop-filter: blur(10px);
        }

header.scrolled {
            padding: 15px 0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            transition: var(--transition);
        }

.logo:hover {
            transform: translateY(-3px);
        }

.logo-icon {
            color: var(--primary-green);
            font-size: 2.8rem;
            margin-right: 15px;
            filter: drop-shadow(0 3px 5px rgba(46, 125, 50, 0.2));
        }

.logo-text {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 2rem;
            color: var(--forest-green);
            letter-spacing: -0.5px;
        }

.logo-subtext {
            font-size: 0.8rem;
            color: var(--light-green);
            letter-spacing: 1.5px;
            margin-top: -5px;
        }

nav ul {
            display: flex;
            list-style: none;
        }

nav ul li {
            margin-left: 35px;
        }

nav ul li a {
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 500;
            font-size: 1rem;
            transition: var(--transition);
            position: relative;
            padding: 5px 0;
        }

nav ul li a:hover {
            color: var(--primary-green);
        }

nav ul li a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(to right, var(--light-green), var(--primary-green));
            transition: var(--transition);
        }

nav ul li a:hover:after {
            width: 100%;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.8rem;
            color: var(--primary-green);
            cursor: pointer;
            transition: var(--transition);
        }

.mobile-menu-btn:hover {
            transform: rotate(90deg);
        }

/* Hero Section */
        .hero {
            padding-top: 180px;
            padding-bottom: 150px;
            background: linear-gradient(135deg, rgba(245, 245, 220, 0.493) 0%, rgba(200, 230, 201, 0.7) 100%), url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            position: relative;
            overflow: hidden;
        }

.hero:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%232e7d32' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 0.3;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 1;
        }

.hero h1 {
            margin-bottom: 25px;
            animation: fadeInUp 1s ease-out;
        }

.hero p {
            font-size: 1.3rem;
            margin-bottom: 50px;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

.hero-btns {
            display: flex;
            justify-content: center;
            gap: 25px;
            flex-wrap: wrap;
            animation: fadeInUp 1s ease-out 0.6s both;
        }

/* Eco Features */
        .eco-features {
            background-color: var(--white);
            position: relative;
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }

.feature-card {
            text-align: center;
            padding: 50px 30px;
            border-radius: var(--border-radius);
            background-color: var(--light-beige);
            transition: var(--transition);
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

.feature-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, var(--light-green), var(--primary-green));
            transform: scaleX(0);
            transform-origin: left;
            transition: var(--transition);
        }

.feature-card:hover:before {
            transform: scaleX(1);
        }

.feature-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
        }

.feature-icon {
            font-size: 3.5rem;
            color: var(--primary-green);
            margin-bottom: 25px;
            display: inline-block;
            height: 100px;
            width: 100px;
            line-height: 100px;
            border-radius: 50%;
            background-color: rgba(76, 175, 80, 0.1);
            transition: var(--transition);
        }

.feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(5deg);
            background-color: rgba(76, 175, 80, 0.2);
        }

/* Sustainability Benefits */
        .benefits {
            background-color: var(--cream);
            position: relative;
        }

.benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }

.benefit-item {
            background-color: var(--white);
            padding: 50px 40px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

.benefit-item:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

.benefit-item i {
            color: var(--light-green);
            font-size: 2.5rem;
            margin-bottom: 25px;
            display: inline-block;
            transition: var(--transition);
        }

.benefit-item:hover i {
            transform: scale(1.2);
        }

/* Water & Energy Highlights */
        .highlights {
            background-color: var(--white);
            position: relative;
        }

.highlight-container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            justify-content: center;
        }

.highlight-card {
            flex: 1;
            min-width: 300px;
            background: linear-gradient(135deg, var(--beige), var(--cream));
            padding: 60px 40px;
            border-radius: var(--border-radius);
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

.highlight-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

.highlight-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(46, 125, 50, 0.05), rgba(76, 175, 80, 0.05));
            z-index: 0;
        }

.highlight-number {
            font-size: 4rem;
            font-weight: 800;
            color: var(--dark-green);
            margin-bottom: 10px;
            position: relative;
            z-index: 1;
        }

.highlight-text {
            font-size: 1.3rem;
            color: var(--text-dark);
            font-weight: 600;
            position: relative;
            z-index: 1;
        }

/* Floor Plans */
        .floor-plans {
            background-color: var(--cream);
            position: relative;
        }

.plans-container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            justify-content: center;
        }

.plan-card {
            background-color: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            flex: 1;
            min-width: 320px;
            max-width: 380px;
            transition: var(--transition);
        }

.plan-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
        }

.plan-header {
            background: linear-gradient(135deg, var(--forest-green), var(--dark-green));
            color: var(--white);
            padding: 30px;
            text-align: center;
        }

.plan-details {
            padding: 40px 30px;
        }

.plan-feature {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid var(--dark-beige);
            transition: var(--transition);
        }

.plan-feature:hover {
            background-color: rgba(200, 230, 201, 0.1);
            padding-left: 10px;
        }

/* Gallery */
        .gallery {
            background-color: var(--white);
            position: relative;
        }

.gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 25px;
        }

.gallery-item {
            border-radius: var(--border-radius);
            overflow: hidden;
            height: 280px;
            position: relative;
            cursor: pointer;
        }

.gallery-item:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
            z-index: 1;
            opacity: 0;
            transition: var(--transition);
        }

.gallery-item:hover:before {
            opacity: 1;
        }

.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-slow);
        }

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

.gallery-item .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 30px;
            color: white;
            z-index: 2;
            transform: translateY(30px);
            opacity: 0;
            transition: var(--transition);
        }

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

/* Testimonials */
        .testimonials {
            background-color: var(--pale-green);
            position: relative;
        }

.testimonials-container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            justify-content: center;
        }

.testimonial-card {
            background-color: var(--white);
            padding: 50px 40px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            flex: 1;
            min-width: 320px;
            max-width: 380px;
            position: relative;
            transition: var(--transition);
        }

.testimonial-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

.testimonial-card:before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 30px;
            font-size: 6rem;
            color: var(--light-green);
            opacity: 0.2;
            font-family: Georgia, serif;
            line-height: 1;
        }

.testimonial-text {
            font-style: italic;
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
        }

.testimonial-author {
            display: flex;
            align-items: center;
        }

.author-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: var(--dark-beige);
            margin-right: 20px;
            overflow: hidden;
            border: 3px solid var(--light-green);
        }

/* Enquiry Form */
        .enquiry {
            background-color: var(--cream);
            position: relative;
        }

.form-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: var(--white);
            padding: 70px 60px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

.form-container:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, var(--light-green), var(--primary-green));
        }

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

.form-group label {
            display: block;
            margin-bottom: 10px;
            color: var(--forest-green);
            font-weight: 600;
            font-size: 1.1rem;
        }

.form-control {
            width: 100%;
            padding: 18px 20px;
            border: 1px solid var(--dark-beige);
            border-radius: 8px;
            font-family: 'Open Sans', sans-serif;
            font-size: 1rem;
            transition: var(--transition);
            background-color: var(--light-beige);
        }

.form-control:focus {
            outline: none;
            border-color: var(--light-green);
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
            background-color: var(--white);
        }

/* Footer */
        footer {
            background: linear-gradient(135deg, var(--forest-green), var(--dark-green));
            color: var(--white);
            padding: 80px 0 40px;
            position: relative;
            overflow: hidden;
        }

footer:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, var(--light-green), var(--primary-green));
        }

.footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 50px;
            margin-bottom: 60px;
            position: relative;
            z-index: 1;
        }

.footer-col {
            flex: 1;
            min-width: 250px;
        }

.footer-col h3 {
            color: var(--white);
            margin-bottom: 30px;
            font-size: 1.8rem;
            position: relative;
            padding-bottom: 15px;
        }

.footer-col h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: var(--light-green);
        }

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

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

.footer-links a {
            color: var(--pale-green);
            text-decoration: none;
            transition: var(--transition);
            display: inline-block;
        }

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

.social-icons {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }

.social-icons a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--white);
            font-size: 1.2rem;
            transition: var(--transition);
        }

.social-icons a:hover {
            background-color: var(--light-green);
            transform: translateY(-5px);
        }

.copyright {
            text-align: center;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--pale-green);
            font-size: 0.95rem;
            position: relative;
            z-index: 1;
        }

/* Animation Classes */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

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

.fade-in {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

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

/* Responsive Design */
        @media (max-width: 1200px) {
            h1 {
                font-size: 3rem;
            }
            
            h2 {
                font-size: 2.5rem;
            }
        }

@media (max-width: 992px) {
            h1 {
                font-size: 2.7rem;
            }
            
            h2 {
                font-size: 2.2rem;
            }
            
            section {
                padding: 80px 0;
            }
            
            .hero {
                padding-top: 160px;
                padding-bottom: 120px;
            }
        }

@media (max-width: 768px) {
            nav {
                position: fixed;
                top: 90px;
                left: 0;
                width: 100%;
                background-color: rgba(255, 255, 255, 0.98);
                padding: 30px;
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                transform: translateY(-100%);
                opacity: 0;
                visibility: hidden;
                transition: var(--transition-slow);
                backdrop-filter: blur(10px);
                border-radius: 0 0 20px 20px;
            }
            
            nav.active {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }
            
            nav ul {
                flex-direction: column;
            }
            
            nav ul li {
                margin: 0 0 25px 0;
            }
            
            nav ul li a {
                font-size: 1.1rem;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero {
                padding-top: 150px;
                background-attachment: scroll;
            }
            
            .hero-btns {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 300px;
                margin-bottom: 15px;
            }
            
            .form-container {
                padding: 50px 30px;
            }
        }

@media (max-width: 576px) {
            h1 {
                font-size: 2.2rem;
            }
            
            h2 {
                font-size: 1.9rem;
            }
            
            section {
                padding: 70px 0;
            }
            
            .container {
                padding: 0 15px;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            .feature-card, .benefit-item, .highlight-card, .testimonial-card {
                padding: 40px 25px;
            }
        }

/* Scroll progress indicator */
        .progress-container {
            width: 100%;
            height: 5px;
            background: transparent;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1001;
        }

.progress-bar {
            height: 5px;
            background: linear-gradient(to right, var(--light-green), var(--primary-green));
            width: 0%;
            transition: width 0.3s ease;
        }

JavaScript

// Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mainNav = document.getElementById('mainNav');
        
        mobileMenuBtn.addEventListener('click', () => {
            mainNav.classList.toggle('active');
            mobileMenuBtn.innerHTML = mainNav.classList.contains('active') 
                ? '<i class="fas fa-times"></i>' 
                : '<i class="fas fa-bars"></i>';
        });
        
        // Close mobile menu when clicking a link
        document.querySelectorAll('#mainNav a').forEach(link => {
            link.addEventListener('click', () => {
                mainNav.classList.remove('active');
                mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });
        
        // Header scroll effect
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Scroll progress indicator
        const progressBar = document.getElementById('progressBar');
        window.addEventListener('scroll', () => {
            const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (window.scrollY / windowHeight) * 100;
            progressBar.style.width = scrolled + '%';
        });
        
        // Form submission with animation
        const enquiryForm = document.getElementById('enquiryForm');
        enquiryForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // Add loading animation
            const submitBtn = enquiryForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
            submitBtn.disabled = true;
            
            // Simulate form submission
            setTimeout(() => {
                // Show success message
                submitBtn.innerHTML = '<i class="fas fa-check"></i> Sent Successfully!';
                submitBtn.style.background = 'linear-gradient(135deg, #2e7d32, #1b5e20)';
                
                // Reset form after delay
                setTimeout(() => {
                    enquiryForm.reset();
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                    submitBtn.style.background = '';
                    
                    // Show confirmation message
                    alert('Thank you for your enquiry! Our sustainability consultant will contact you within 24 hours.');
                }, 2000);
            }, 1500);
        });
        
        // Enhanced scroll animations
        const fadeElements = document.querySelectorAll('.fade-in');
        
        const fadeInOnScroll = () => {
            fadeElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('visible');
                }
            });
        };
        
        // Check on load and scroll
        window.addEventListener('load', fadeInOnScroll);
        window.addEventListener('scroll', fadeInOnScroll);
        
        // Smooth scroll for anchor links with offset
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if(targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if(targetElement) {
                    const headerHeight = document.querySelector('header').offsetHeight;
                    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
                    
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Add subtle parallax effect to hero section
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const hero = document.querySelector('.hero');
            if (hero) {
                hero.style.backgroundPositionY = scrolled * 0.5 + 'px';
            }
        });
        
        // Add hover effect to plan cards
        document.querySelectorAll('.plan-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)';
            });
        });

EcoFriendly Real Estate Template Preview

Download Options