Luxury Real Estate Home
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elite Properties - Luxury Real Estate Excellence</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar" id="navbar"> <div class="nav-container"> <a href="#" class="logo"> <i class="fas fa-building"></i> Elite Properties </a> <ul class="nav-menu" id="nav-menu"> <li><a href="#home" class="nav-link">Home</a></li> <li><a href="#properties" class="nav-link">Properties</a></li> <li><a href="#about" class="nav-link">About</a></li> <li><a href="#contact" class="nav-link">Contact</a></li> <li><a href="#contact" class="nav-cta">Get Quote</a></li> </ul> <div class="hamburger" id="hamburger"> <span></span> <span></span> <span></span> </div> </div> </nav> <!-- Hero Section --> <section class="hero" id="home"> <div class="floating-elements"> <div class="floating-element"></div> <div class="floating-element"></div> <div class="floating-element"></div> <div class="floating-element"></div> </div> <div class="hero-content"> <div class="hero-subtitle">Luxury Real Estate</div> <h1>Find Your Dream Property</h1> <p class="hero-description">Discover exceptional properties in prime locations. From luxury homes to commercial investments, we provide personalized service and expert guidance for all your real estate needs.</p> <div class="hero-buttons"> <a href="#properties" class="btn-primary">Browse Properties</a> <a href="#services" class="btn-secondary">Our Services</a> </div> </div> </section> <!-- Search Section --> <section class="search-section"> <div class="search-container"> <div class="search-box"> <div class="search-field"> <label for="property-type">Property Type</label> <select id="property-type"> <option value="">Select Type</option> <option value="house">House</option> <option value="apartment">Apartment</option> <option value="condo">Condo</option> <option value="commercial">Commercial</option> <option value="land">Land</option> </select> </div> <div class="search-field"> <label for="location">Location</label> <input type="text" id="location" placeholder="Enter city or neighborhood"> </div> <div class="search-field"> <label for="price-range">Price Range</label> <select id="price-range"> <option value="">Any Price</option> <option value="0-500000">Under $500K</option> <option value="500000-1000000">$500K - $1M</option> <option value="1000000-2000000">$1M - $2M</option> <option value="2000000+">$2M+</option> </select> </div> <div class="search-field"> <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> <option value="5">5+</option> </select> </div> <div class="search-field"> <button class="search-btn" onclick="searchProperties()"> <i class="fas fa-search"></i> Search Properties </button> </div> </div> </div> </section> <!-- Featured Properties --> <section class="featured-properties" id="properties"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Featured Properties</div> <h2 class="section-title">Exceptional Real Estate</h2> <p class="section-description">Explore our carefully curated selection of premium properties, each offering unique features and prime locations for discerning buyers.</p> </div> <div class="properties-grid"> <div class="property-card"> <div class="property-image"> <i class="fas fa-home property-icon"></i> <div class="property-badge">Featured</div> <div class="property-price">$2,850,000</div> </div> <div class="property-content"> <h3 class="property-title">Luxury Modern Villa</h3> <div class="property-location"> <i class="fas fa-map-marker-alt"></i> Beverly Hills, CA </div> <div class="property-features"> <div class="feature"> <i class="fas fa-bed"></i> <span>5 Beds</span> </div> <div class="feature"> <i class="fas fa-bath"></i> <span>4 Baths</span> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <span>4,200 sq ft</span> </div> <div class="feature"> <i class="fas fa-car"></i> <span>3 Garage</span> </div> </div> <p class="property-description">Stunning contemporary villa with panoramic city views, infinity pool, smart home technology, and premium finishes throughout.</p> <div class="property-footer"> <div class="property-agent"> <div class="agent-avatar">SM</div> <div class="agent-info"> <div class="agent-name">Sarah Mitchell</div> <div class="agent-title">Senior Agent</div> </div> </div> <div class="property-actions"> <button class="action-btn" title="Add to Favorites"><i class="fas fa-heart"></i></button> <button class="action-btn" title="Share Property"><i class="fas fa-share"></i></button> <button class="action-btn" title="Schedule Tour"><i class="fas fa-calendar"></i></button> </div> </div> </div> </div> <div class="property-card"> <div class="property-image"> <i class="fas fa-building property-icon"></i> <div class="property-badge">New Listing</div> <div class="property-price">$1,650,000</div> </div> <div class="property-content"> <h3 class="property-title">Downtown Penthouse</h3> <div class="property-location"> <i class="fas fa-map-marker-alt"></i> Manhattan, NY </div> <div class="property-features"> <div class="feature"> <i class="fas fa-bed"></i> <span>3 Beds</span> </div> <div class="feature"> <i class="fas fa-bath"></i> <span>3 Baths</span> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <span>2,800 sq ft</span> </div> <div class="feature"> <i class="fas fa-building"></i> <span>25th Floor</span> </div> </div> <p class="property-description">Elegant penthouse with floor-to-ceiling windows, private terrace, concierge service, and breathtaking skyline views.</p> <div class="property-footer"> <div class="property-agent"> <div class="agent-avatar">MJ</div> <div class="agent-info"> <div class="agent-name">Michael Johnson</div> <div class="agent-title">Luxury Specialist</div> </div> </div> <div class="property-actions"> <button class="action-btn" title="Add to Favorites"><i class="fas fa-heart"></i></button> <button class="action-btn" title="Share Property"><i class="fas fa-share"></i></button> <button class="action-btn" title="Schedule Tour"><i class="fas fa-calendar"></i></button> </div> </div> </div> </div> <div class="property-card"> <div class="property-image"> <i class="fas fa-water property-icon"></i> <div class="property-badge">Waterfront</div> <div class="property-price">$3,200,000</div> </div> <div class="property-content"> <h3 class="property-title">Oceanfront Estate</h3> <div class="property-location"> <i class="fas fa-map-marker-alt"></i> Malibu, CA </div> <div class="property-features"> <div class="feature"> <i class="fas fa-bed"></i> <span>6 Beds</span> </div> <div class="feature"> <i class="fas fa-bath"></i> <span>5 Baths</span> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <span>5,500 sq ft</span> </div> <div class="feature"> <i class="fas fa-swimmer"></i> <span>Pool & Spa</span> </div> </div> <p class="property-description">Spectacular beachfront property with private beach access, wine cellar, home theater, and unobstructed ocean views.</p> <div class="property-footer"> <div class="property-agent"> <div class="agent-avatar">EL</div> <div class="agent-info"> <div class="agent-name">Emily Liu</div> <div class="agent-title">Waterfront Expert</div> </div> </div> <div class="property-actions"> <button class="action-btn" title="Add to Favorites"><i class="fas fa-heart"></i></button> <button class="action-btn" title="Share Property"><i class="fas fa-share"></i></button> <button class="action-btn" title="Schedule Tour"><i class="fas fa-calendar"></i></button> </div> </div> </div> </div> <div class="property-card"> <div class="property-image"> <i class="fas fa-tree property-icon"></i> <div class="property-badge">Exclusive</div> <div class="property-price">$4,750,000</div> </div> <div class="property-content"> <h3 class="property-title">Mountain Retreat</h3> <div class="property-location"> <i class="fas fa-map-marker-alt"></i> Aspen, CO </div> <div class="property-features"> <div class="feature"> <i class="fas fa-bed"></i> <span>7 Beds</span> </div> <div class="feature"> <i class="fas fa-bath"></i> <span>6 Baths</span> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <span>6,800 sq ft</span> </div> <div class="feature"> <i class="fas fa-fire"></i> <span>5 Fireplaces</span> </div> </div> <p class="property-description">Luxurious ski-in/ski-out chalet with rustic elegance, gourmet kitchen, hot tub, and panoramic mountain vistas.</p> <div class="property-footer"> <div class="property-agent"> <div class="agent-avatar">DR</div> <div class="agent-info"> <div class="agent-name">David Rodriguez</div> <div class="agent-title">Mountain Properties</div> </div> </div> <div class="property-actions"> <button class="action-btn" title="Add to Favorites"><i class="fas fa-heart"></i></button> <button class="action-btn" title="Share Property"><i class="fas fa-share"></i></button> <button class="action-btn" title="Schedule Tour"><i class="fas fa-calendar"></i></button> </div> </div> </div> </div> <div class="property-card"> <div class="property-image"> <i class="fas fa-city property-icon"></i> <div class="property-badge">Investment</div> <div class="property-price">$8,500,000</div> </div> <div class="property-content"> <h3 class="property-title">Commercial Complex</h3> <div class="property-location"> <i class="fas fa-map-marker-alt"></i> Downtown Miami, FL </div> <div class="property-features"> <div class="feature"> <i class="fas fa-building"></i> <span>12 Units</span> </div> <div class="feature"> <i class="fas fa-chart-line"></i> <span>8.5% ROI</span> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <span>25,000 sq ft</span> </div> <div class="feature"> <i class="fas fa-car"></i> <span>50 Parking</span> </div> </div> <p class="property-description">Prime commercial investment opportunity with established tenants, modern amenities, and excellent growth potential.</p> <div class="property-footer"> <div class="property-agent"> <div class="agent-avatar">AL</div> <div class="agent-info"> <div class="agent-name">Amanda Lee</div> <div class="agent-title">Commercial Advisor</div> </div> </div> <div class="property-actions"> <button class="action-btn" title="Add to Favorites"><i class="fas fa-heart"></i></button> <button class="action-btn" title="Share Property"><i class="fas fa-share"></i></button> <button class="action-btn" title="Schedule Tour"><i class="fas fa-calendar"></i></button> </div> </div> </div> </div> <div class="property-card"> <div class="property-image"> <i class="fas fa-home property-icon"></i> <div class="property-badge">Historic</div> <div class="property-price">$2,100,000</div> </div> <div class="property-content"> <h3 class="property-title">Victorian Mansion</h3> <div class="property-location"> <i class="fas fa-map-marker-alt"></i> San Francisco, CA </div> <div class="property-features"> <div class="feature"> <i class="fas fa-bed"></i> <span>4 Beds</span> </div> <div class="feature"> <i class="fas fa-bath"></i> <span>3 Baths</span> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <span>3,600 sq ft</span> </div> <div class="feature"> <i class="fas fa-landmark"></i> <span>1890 Built</span> </div> </div> <p class="property-description">Beautifully restored Victorian home with original architectural details, modern updates, and charming garden courtyard.</p> <div class="property-footer"> <div class="property-agent"> <div class="agent-avatar">JW</div> <div class="agent-info"> <div class="agent-name">James Wilson</div> <div class="agent-title">Historic Properties</div> </div> </div> <div class="property-actions"> <button class="action-btn" title="Add to Favorites"><i class="fas fa-heart"></i></button> <button class="action-btn" title="Share Property"><i class="fas fa-share"></i></button> <button class="action-btn" title="Schedule Tour"><i class="fas fa-calendar"></i></button> </div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section class="services" id="services"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Our Services</div> <h2 class="section-title">Comprehensive Real Estate Solutions</h2> <p class="section-description">From buying and selling to investment consulting and property management, we provide full-service real estate expertise tailored to your needs.</p> </div> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-home"></i> </div> <h3 class="service-title">Residential Sales</h3> <p class="service-description">Expert guidance for buying and selling homes, condos, and luxury properties with personalized service and market expertise.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-building"></i> </div> <h3 class="service-title">Commercial Real Estate</h3> <p class="service-description">Comprehensive commercial services including office buildings, retail spaces, industrial properties, and investment opportunities.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-chart-line"></i> </div> <h3 class="service-title">Investment Consulting</h3> <p class="service-description">Strategic investment advice, market analysis, and portfolio optimization to maximize your real estate returns.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-key"></i> </div> <h3 class="service-title">Property Management</h3> <p class="service-description">Full-service property management including tenant screening, maintenance, rent collection, and financial reporting.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-calculator"></i> </div> <h3 class="service-title">Market Valuation</h3> <p class="service-description">Accurate property valuations using comparative market analysis, professional appraisals, and current market trends.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-handshake"></i> </div> <h3 class="service-title">Relocation Services</h3> <p class="service-description">Complete relocation assistance including area orientation, school information, and seamless transition support.</p> </div> </div> </div> </section> <!-- Market Insights Scroller --> <section class="market-insights" id="market"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Market Intelligence</div> <h2 class="section-title">Real Estate Market Insights</h2> <p class="section-description">Stay informed with the latest market trends, pricing data, and investment opportunities across key metropolitan areas.</p> </div> </div> <div class="insights-scroller"> <div class="insights-track"> <div class="insight-card"> <div class="insight-header"> <div class="insight-icon"> <i class="fas fa-chart-line"></i> </div> <div class="insight-title">Beverly Hills Market</div> <div class="insight-subtitle">Luxury Residential</div> </div> <div class="insight-content"> <div class="insight-value">$3.2M</div> <div class="insight-change change-positive"> <i class="fas fa-arrow-up"></i> <span>+12.5% YoY</span> </div> <div class="insight-description">Average home price showing strong growth with limited inventory driving premium valuations in luxury segment.</div> </div> </div> <div class="insight-card"> <div class="insight-header"> <div class="insight-icon"> <i class="fas fa-building"></i> </div> <div class="insight-title">Manhattan Commercial</div> <div class="insight-subtitle">Office & Retail</div> </div> <div class="insight-content"> <div class="insight-value">$850/sf</div> <div class="insight-change change-positive"> <i class="fas fa-arrow-up"></i> <span>+8.3% YoY</span> </div> <div class="insight-description">Commercial real estate rebounds with increased demand for premium office spaces and ground-floor retail.</div> </div> </div> <div class="insight-card"> <div class="insight-header"> <div class="insight-icon"> <i class="fas fa-water"></i> </div> <div class="insight-title">Malibu Waterfront</div> <div class="insight-subtitle">Oceanfront Properties</div> </div> <div class="insight-content"> <div class="insight-value">$5.8M</div> <div class="insight-change change-positive"> <i class="fas fa-arrow-up"></i> <span>+15.2% YoY</span> </div> <div class="insight-description">Waterfront properties command premium prices with exclusive beachfront access driving exceptional value appreciation.</div> </div> </div> <div class="insight-card"> <div class="insight-header"> <div class="insight-icon"> <i class="fas fa-mountain"></i> </div> <div class="insight-title">Aspen Resort Market</div> <div class="insight-subtitle">Ski Properties</div> </div> <div class="insight-content"> <div class="insight-value">$4.1M</div> <div class="insight-change change-positive"> <i class="fas fa-arrow-up"></i> <span>+18.7% YoY</span> </div> <div class="insight-description">Mountain resort properties see unprecedented demand with ski-in/ski-out locations achieving record sales prices.</div> </div> </div> <div class="insight-card"> <div class="insight-header"> <div class="insight-icon"> <i class="fas fa-city"></i> </div> <div class="insight-title">Miami Investment</div> <div class="insight-subtitle">Multi-Family Units</div> </div> <div class="insight-content"> <div class="insight-value">9.2%</div> <div class="insight-change change-positive"> <i class="fas fa-arrow-up"></i> <span>ROI Growth</span> </div> <div class="insight-description">Investment properties deliver strong returns with growing rental demand and favorable tax environment.</div> </div> </div> <!-- Duplicate for seamless scrolling --> <div class="insight-card"> <div class="insight-header"> <div class="insight-icon"> <i class="fas fa-chart-line"></i> </div> <div class="insight-title">Beverly Hills Market</div> <div class="insight-subtitle">Luxury Residential</div> </div> <div class="insight-content"> <div class="insight-value">$3.2M</div> <div class="insight-change change-positive"> <i class="fas fa-arrow-up"></i> <span>+12.5% YoY</span> </div> <div class="insight-description">Average home price showing strong growth with limited inventory driving premium valuations in luxury segment.</div> </div> </div> <div class="insight-card"> <div class="insight-header"> <div class="insight-icon"> <i class="fas fa-building"></i> </div> <div class="insight-title">Manhattan Commercial</div> <div class="insight-subtitle">Office & Retail</div> </div> <div class="insight-content"> <div class="insight-value">$850/sf</div> <div class="insight-change change-positive"> <i class="fas fa-arrow-up"></i> <span>+8.3% YoY</span> </div> <div class="insight-description">Commercial real estate rebounds with increased demand for premium office spaces and ground-floor retail.</div> </div> </div> </div> </div> </section> <!-- Testimonials Slider --> <section class="testimonials"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Client Testimonials</div> <h2 class="section-title">What Our Clients Say</h2> <p class="section-description">Read authentic reviews from satisfied clients who have successfully bought, sold, or invested in properties with our expert guidance.</p> </div> </div> <div class="testimonials-slider"> <div class="testimonials-slides" id="testimonials-slides"> <div class="testimonial-slide"> <div class="testimonial-quote"> Elite Properties made our dream home purchase seamless and stress-free. Sarah's expertise in the Beverly Hills market was invaluable, and she negotiated an excellent deal for us. The entire team was professional, responsive, and truly cared about our needs. </div> <div class="testimonial-author"> <div class="author-avatar">RJ</div> <div class="author-info"> <h4>Robert & Jennifer Chen</h4> <p>Luxury Home Buyers</p> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-quote"> Working with Michael on our Manhattan penthouse sale exceeded all expectations. His market knowledge and marketing strategy resulted in multiple offers above asking price. The transaction was handled with utmost professionalism from start to finish. </div> <div class="testimonial-author"> <div class="author-avatar">DM</div> <div class="author-info"> <h4>David Martinez</h4> <p>Property Seller</p> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-quote"> Emily's expertise in waterfront properties helped us find the perfect Malibu estate. Her attention to detail and understanding of our requirements made the process enjoyable. We couldn't be happier with our oceanfront investment. </div> <div class="testimonial-author"> <div class="author-avatar">LT</div> <div class="author-info"> <h4>Lisa Thompson</h4> <p>Waterfront Property Investor</p> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-quote"> The commercial real estate team at Elite Properties delivered exceptional results for our office building acquisition. Their market analysis and negotiation skills saved us significant money while securing prime downtown real estate. </div> <div class="testimonial-author"> <div class="author-avatar">KS</div> <div class="author-info"> <h4>Kevin Sullivan</h4> <p>Commercial Investor</p> </div> </div> </div> </div> <div class="slider-controls"> <button class="slider-btn" onclick="previousTestimonial()"><i class="fas fa-chevron-left"></i></button> <button class="slider-btn" onclick="nextTestimonial()"><i class="fas fa-chevron-right"></i></button> </div> <div class="slider-dots" id="testimonial-dots"> <span class="dot active" onclick="currentTestimonial(0)"></span> <span class="dot" onclick="currentTestimonial(1)"></span> <span class="dot" onclick="currentTestimonial(2)"></span> <span class="dot" onclick="currentTestimonial(3)"></span> </div> </div> </section> <!-- About Section --> <section class="about" id="about"> <div class="container"> <div class="section-header"> <div class="section-subtitle">About Elite Properties</div> <h2 class="section-title">Excellence in Real Estate Since 1995</h2> <p class="section-description">With nearly three decades of experience, we have established ourselves as the premier real estate firm, delivering exceptional results and unparalleled service.</p> </div> <div class="about-content"> <div class="about-text"> <h3>Your Trusted Real Estate Partner</h3> <p>Elite Properties has been at the forefront of luxury real estate for over 25 years, representing discerning clients in the most prestigious markets across the nation. Our commitment to excellence, market expertise, and personalized service has earned us recognition as industry leaders.</p> <p>We specialize in high-end residential properties, commercial real estate, and investment opportunities, providing comprehensive services from initial consultation through closing and beyond. Our team of seasoned professionals brings deep market knowledge, innovative marketing strategies, and unwavering dedication to every transaction.</p> <div class="about-stats"> <div class="stat-item"> <span class="stat-number">2,500+</span> <span class="stat-label">Properties Sold</span> </div> <div class="stat-item"> <span class="stat-number">$2.8B</span> <span class="stat-label">Total Sales Volume</span> </div> <div class="stat-item"> <span class="stat-number">98%</span> <span class="stat-label">Client Satisfaction</span> </div> <div class="stat-item"> <span class="stat-number">25+</span> <span class="stat-label">Years Experience</span> </div> </div> </div> <div class="about-image"> <div class="about-image-main"> <i class="fas fa-building"></i> </div> <div class="about-image-floating"> <i class="fas fa-award"></i> </div> </div> </div> </div> </section> <!-- Team Section --> <section class="team" id="team"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Our Expert Team</div> <h2 class="section-title">Meet Our Real Estate Professionals</h2> <p class="section-description">Our experienced team of real estate experts brings decades of combined experience and deep market knowledge to serve your property needs.</p> </div> <div class="team-grid"> <div class="team-member"> <div class="member-image"> <i class="fas fa-user-tie"></i> </div> <div class="member-content"> <h3 class="member-name">Sarah Mitchell</h3> <div class="member-title">Senior Luxury Agent</div> <p class="member-description">Specializing in Beverly Hills luxury properties with over 15 years of experience. Sarah has closed over $500M in high-end residential sales.</p> <div class="member-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="LinkedIn"><i class="fab fa-linkedin-in"></i></button> </div> </div> </div> <div class="team-member"> <div class="member-image"> <i class="fas fa-user-tie"></i> </div> <div class="member-content"> <h3 class="member-name">Michael Johnson</h3> <div class="member-title">Manhattan Specialist</div> <p class="member-description">Expert in Manhattan luxury condos and penthouses. Michael's market knowledge and negotiation skills deliver exceptional results for clients.</p> <div class="member-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="LinkedIn"><i class="fab fa-linkedin-in"></i></button> </div> </div> </div> <div class="team-member"> <div class="member-image"> <i class="fas fa-user-tie"></i> </div> <div class="member-content"> <h3 class="member-name">Emily Liu</h3> <div class="member-title">Waterfront Properties Expert</div> <p class="member-description">Specializes in coastal and waterfront properties from Malibu to the Hamptons. Emily's expertise in luxury waterfront real estate is unmatched.</p> <div class="member-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="LinkedIn"><i class="fab fa-linkedin-in"></i></button> </div> </div> </div> <div class="team-member"> <div class="member-image"> <i class="fas fa-user-tie"></i> </div> <div class="member-content"> <h3 class="member-name">David Rodriguez</h3> <div class="member-title">Mountain & Resort Properties</div> <p class="member-description">Leading expert in Aspen, Vail, and other premier mountain resort markets. David helps clients find perfect ski-in/ski-out properties.</p> <div class="member-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="LinkedIn"><i class="fab fa-linkedin-in"></i></button> </div> </div> </div> <div class="team-member"> <div class="member-image"> <i class="fas fa-user-tie"></i> </div> <div class="member-content"> <h3 class="member-name">Amanda Lee</h3> <div class="member-title">Commercial Real Estate Advisor</div> <p class="member-description">Commercial real estate specialist with expertise in office buildings, retail spaces, and investment properties across major metropolitan areas.</p> <div class="member-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="LinkedIn"><i class="fab fa-linkedin-in"></i></button> </div> </div> </div> <div class="team-member"> <div class="member-image"> <i class="fas fa-user-tie"></i> </div> <div class="member-content"> <h3 class="member-name">James Wilson</h3> <div class="member-title">Historic & Unique Properties</div> <p class="member-description">Specialist in historic homes, architectural gems, and unique properties. James brings passion and expertise to distinctive real estate.</p> <div class="member-contact"> <button class="contact-btn" title="Call"><i class="fas fa-phone"></i></button> <button class="contact-btn" title="Email"><i class="fas fa-envelope"></i></button> <button class="contact-btn" title="LinkedIn"><i class="fab fa-linkedin-in"></i></button> </div> </div> </div> </div> </div> </section> <!-- News Scroller --> <section class="news"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Real Estate News</div> <h2 class="section-title">Latest Market Updates</h2> <p class="section-description">Stay informed with the latest real estate news, market trends, and industry insights from our expert team and trusted sources.</p> </div> </div> <div class="news-scroller"> <div class="news-track"> <div class="news-item"> <div class="news-image"> <i class="fas fa-chart-line"></i> </div> <div class="news-content"> <div class="news-date">December 15, 2024</div> <h3 class="news-title">Luxury Market Reaches New Heights</h3> <p class="news-excerpt">High-end residential properties continue to appreciate with luxury markets in Beverly Hills and Manhattan showing unprecedented growth in Q4 2024.</p> </div> </div> <div class="news-item"> <div class="news-image"> <i class="fas fa-building"></i> </div> <div class="news-content"> <div class="news-date">December 12, 2024</div> <h3 class="news-title">Commercial Real Estate Rebounds Strongly</h3> <p class="news-excerpt">Office and retail spaces see increased demand as businesses expand and investors seek stable returns in prime metropolitan locations.</p> </div> </div> <div class="news-item"> <div class="news-image"> <i class="fas fa-key"></i> </div> <div class="news-content"> <div class="news-date">December 8, 2024</div> <h3 class="news-title">New Mortgage Programs Launch</h3> <p class="news-excerpt">Innovative financing options become available for luxury property buyers, making high-end real estate more accessible to qualified purchasers.</p> </div> </div> <div class="news-item"> <div class="news-image"> <i class="fas fa-home"></i> </div> <div class="news-content"> <div class="news-date">December 5, 2024</div> <h3 class="news-title">Smart Home Technology Integration</h3> <p class="news-excerpt">Modern luxury properties increasingly feature advanced smart home systems, adding value and appeal for tech-savvy buyers.</p> </div> </div> <div class="news-item"> <div class="news-image"> <i class="fas fa-leaf"></i> </div> <div class="news-content"> <div class="news-date">December 1, 2024</div> <h3 class="news-title">Sustainable Building Trends Rise</h3> <p class="news-excerpt">Eco-friendly construction and energy-efficient features become standard in luxury developments, driving green real estate demand.</p> </div> </div> <!-- Duplicate for seamless scrolling --> <div class="news-item"> <div class="news-image"> <i class="fas fa-chart-line"></i> </div> <div class="news-content"> <div class="news-date">December 15, 2024</div> <h3 class="news-title">Luxury Market Reaches New Heights</h3> <p class="news-excerpt">High-end residential properties continue to appreciate with luxury markets in Beverly Hills and Manhattan showing unprecedented growth in Q4 2024.</p> </div> </div> <div class="news-item"> <div class="news-image"> <i class="fas fa-building"></i> </div> <div class="news-content"> <div class="news-date">December 12, 2024</div> <h3 class="news-title">Commercial Real Estate Rebounds Strongly</h3> <p class="news-excerpt">Office and retail spaces see increased demand as businesses expand and investors seek stable returns in prime metropolitan locations.</p> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Get In Touch</div> <h2 class="section-title">Start Your Real Estate Journey</h2> <p class="section-description">Ready to buy, sell, or invest in real estate? Contact our expert team for personalized service and professional guidance.</p> </div> <div class="contact-content"> <div class="contact-info"> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-details"> <h4>Visit Our Office</h4> <p>456 Luxury Avenue<br>Beverly Hills, CA 90210<br>United States</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-details"> <h4>Call Us</h4> <p>+1 (555) 123-ELITE<br>+1 (555) 123-3548<br>Available 7 Days a Week</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-details"> <h4>Email Us</h4> <p>info@eliteproperties.com<br>sales@eliteproperties.com<br>support@eliteproperties.com</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div class="contact-details"> <h4>Office Hours</h4> <p>Monday - Friday: 8:00 AM - 7:00 PM<br>Saturday: 9:00 AM - 5:00 PM<br>Sunday: 10:00 AM - 4:00 PM</p> </div> </div> </div> <div class="contact-form"> <h3 style="margin-bottom: 2rem; color: var(--text-dark);">Get Your Free Consultation</h3> <form id="contact-form"> <div class="form-row"> <div class="form-group"> <label for="firstName">First Name</label> <input type="text" id="firstName" name="firstName" required> </div> <div class="form-group"> <label for="lastName">Last Name</label> <input type="text" id="lastName" name="lastName" required> </div> </div> <div class="form-row"> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone" name="phone"> </div> </div> <div class="form-group"> <label for="serviceType">Service Interest</label> <select id="serviceType" name="serviceType" required> <option value="">Select your interest</option> <option value="buying">Buying Property</option> <option value="selling">Selling Property</option> <option value="investment">Investment Consulting</option> <option value="commercial">Commercial Real Estate</option> <option value="management">Property Management</option> <option value="valuation">Property Valuation</option> <option value="relocation">Relocation Services</option> <option value="consultation">General Consultation</option> </select> </div> <div class="form-group"> <label for="message">Tell us about your real estate needs</label> <textarea id="message" name="message" rows="5" placeholder="Describe your property requirements, budget range, preferred locations, timeline, and any specific needs..." required></textarea> </div> <button type="submit" class="submit-btn">Get Free Consultation</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h4>Elite Properties</h4> <p>Leading luxury real estate firm since 1995. We specialize in high-end residential and commercial properties, delivering exceptional results with personalized service and market expertise.</p> <div class="social-links"> <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a> <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> <a href="#" class="social-link"><i class="fab fa-youtube"></i></a> <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a> </div> <div class="newsletter"> <h5>Market Updates Newsletter</h5> <p>Get exclusive market insights and new listings</p> <div class="newsletter-form"> <input type="email" placeholder="Your email address"> <button type="submit">Subscribe</button> </div> </div> </div> <div class="footer-section"> <h4>Quick Links</h4> <ul> <li><a href="#properties">Featured Properties</a></li> <li><a href="#services">Our Services</a></li> <li><a href="#market">Market Insights</a></li> <li><a href="#about">About Us</a></li> <li><a href="#team">Our Team</a></li> <li><a href="#contact">Contact Us</a></li> <li><a href="#">Property Search</a></li> <li><a href="#">Client Portal</a></li> </ul> </div> <div class="footer-section"> <h4>Property Services</h4> <ul> <li><a href="#">Residential Sales</a></li> <li><a href="#">Commercial Real Estate</a></li> <li><a href="#">Investment Properties</a></li> <li><a href="#">Property Management</a></li> <li><a href="#">Market Valuation</a></li> <li><a href="#">Relocation Services</a></li> <li><a href="#">Luxury Rentals</a></li> <li><a href="#">International Properties</a></li> </ul> </div> <div class="footer-section"> <h4>Featured Markets</h4> <ul> <li><a href="#">Beverly Hills, CA</a></li> <li><a href="#">Manhattan, NY</a></li> <li><a href="#">Malibu, CA</a></li> <li><a href="#">Aspen, CO</a></li> <li><a href="#">Miami Beach, FL</a></li> <li><a href="#">The Hamptons, NY</a></li> <li><a href="#">San Francisco, CA</a></li> <li><a href="#">Scottsdale, AZ</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2024 Elite Properties. All rights reserved. | Privacy Policy | Terms of Service | Fair Housing | Equal Opportunity</p> </div> </div> </footer> </body> </html>
CSS
:root { --primary-gold: #D4AF37; --secondary-gold: #B8860B; --dark-gold: #9A7B0A; --white: #FFFFFF; --light-gray: #F8F9FA; --dark-gray: #2C3E50; --text-dark: #1A1A1A; --text-light: #6C757D; --accent-blue: #2E86AB; --success-green: #28A745; --gradient-primary: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%); --gradient-secondary: linear-gradient(135deg, #2E86AB 0%, #1E5F8B 100%); --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.08); --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.12); --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.15); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--text-dark); overflow-x: hidden; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--light-gray); } ::-webkit-scrollbar-thumb { background: var(--gradient-primary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gradient-secondary); } /* Navigation */ .navbar { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); z-index: 1000; padding: 1rem 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-bottom: 1px solid rgba(212, 175, 55, 0.1); } .navbar.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-medium); padding: 0.5rem 0; } .nav-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; } .logo { font-size: 2rem; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } .logo i { font-size: 2.2rem; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-menu { display: flex; list-style: none; gap: 2.5rem; align-items: center; } .nav-link { text-decoration: none; color: var(--text-dark); font-weight: 500; font-size: 1rem; transition: all 0.3s ease; position: relative; padding: 0.5rem 0; } .nav-link:hover { color: var(--primary-gold); transform: translateY(-2px); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gradient-primary); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .nav-cta { background: var(--gradient-primary); color: white; padding: 0.8rem 1.5rem; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: var(--shadow-light); } .nav-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } .hamburger { display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; } .hamburger span { width: 25px; height: 3px; background: var(--text-dark); margin: 3px 0; transition: 0.3s; border-radius: 2px; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(135deg, rgba(212, 175, 55, 0.9) 0%, rgba(46, 134, 171, 0.8) 100%), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="cityscape" patternUnits="userSpaceOnUse" width="1200" height="800"><rect width="1200" height="800" fill="%23D4AF37"/><rect x="0" y="400" width="150" height="400" fill="%23B8860B" opacity="0.8"/><rect x="150" y="300" width="120" height="500" fill="%239A7B0A" opacity="0.9"/><rect x="270" y="350" width="100" height="450" fill="%23B8860B" opacity="0.7"/><rect x="370" y="250" width="130" height="550" fill="%23D4AF37" opacity="0.8"/><rect x="500" y="200" width="110" height="600" fill="%239A7B0A" opacity="0.9"/><rect x="610" y="320" width="140" height="480" fill="%23B8860B" opacity="0.8"/><rect x="750" y="180" width="120" height="620" fill="%23D4AF37" opacity="0.7"/><rect x="870" y="280" width="100" height="520" fill="%239A7B0A" opacity="0.8"/><rect x="970" y="220" width="130" height="580" fill="%23B8860B" opacity="0.9"/><rect x="1100" y="350" width="100" height="450" fill="%23D4AF37" opacity="0.8"/></pattern></defs><rect width="1200" height="800" fill="url(%23cityscape)"/></svg>'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.2) 100%); } .hero-content { max-width: 900px; padding: 0 2rem; animation: heroFadeIn 1.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; } .hero-subtitle { font-size: 1.1rem; font-weight: 500; color: var(--white); margin-bottom: 1rem; opacity: 0.9; letter-spacing: 2px; text-transform: uppercase; } .hero h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--white); line-height: 1.1; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .hero-description { font-size: 1rem; margin-bottom: 1rem; color: var(--white); opacity: 0.95; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-buttons { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .btn-primary { background: var(--white); color: var(--primary-gold); padding: 1.2rem 2.5rem; text-decoration: none; border-radius: 50px; font-weight: 700; font-size: 1.1rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-medium); border: 2px solid transparent; } .btn-primary:hover { transform: translateY(-5px); box-shadow: var(--shadow-heavy); background: transparent; color: var(--white); border-color: var(--white); } .btn-secondary { background: transparent; color: var(--white); padding: 1.2rem 2.5rem; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 1.1rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid var(--white); } .btn-secondary:hover { transform: translateY(-5px); background: var(--white); color: var(--primary-gold); box-shadow: var(--shadow-medium); } .floating-elements { position: absolute; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .floating-element { position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: float 8s ease-in-out infinite; } .floating-element:nth-child(1) { width: 100px; height: 100px; top: 15%; left: 10%; animation-delay: 0s; } .floating-element:nth-child(2) { width: 150px; height: 150px; top: 70%; right: 15%; animation-delay: 3s; } .floating-element:nth-child(3) { width: 80px; height: 80px; bottom: 25%; left: 25%; animation-delay: 6s; } .floating-element:nth-child(4) { width: 120px; height: 120px; top: 40%; right: 30%; animation-delay: 2s; } /* Search Section */ .search-section { background: var(--white); padding: 4rem 0; margin-top: -2rem; position: relative; z-index: 10; } .search-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .search-box { background: var(--white); border-radius: 20px; padding: 2rem; box-shadow: var(--shadow-heavy); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; align-items: end; } .search-field { display: flex; flex-direction: column; } .search-field label { font-weight: 600; margin-bottom: 0.5rem; color: var(--text-dark); font-size: 0.9rem; } .search-field input, .search-field select { padding: 1rem; border: 2px solid #E9ECEF; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 1rem; transition: all 0.3s ease; background: var(--white); } .search-field input:focus, .search-field select:focus { outline: none; border-color: var(--primary-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1); } .search-btn { background: var(--gradient-primary); color: var(--white); border: none; padding: 1rem 2rem; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; height: fit-content; } .search-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Featured Properties */ .featured-properties { padding: 6rem 0; background: var(--light-gray); } .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } .section-header { text-align: center; margin-bottom: 4rem; } .section-subtitle { font-size: 1.1rem; font-weight: 500; color: var(--primary-gold); margin-bottom: 1rem; letter-spacing: 1px; text-transform: uppercase; } .section-title { font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--text-dark); line-height: 1.2; } .section-description { font-size: 1.2rem; color: var(--text-light); max-width: 600px; margin: 0 auto; line-height: 1.6; } .properties-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; margin-top: 3rem; } .property-card { background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-light); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; cursor: pointer; } .property-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .property-image { height: 280px; background: var(--gradient-primary); position: relative; overflow: hidden; } .property-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(212, 175, 55, 0.8) 0%, rgba(46, 134, 171, 0.6) 100%); z-index: 1; } .property-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; color: var(--white); z-index: 2; } .property-badge { position: absolute; top: 1rem; left: 1rem; background: var(--success-green); color: var(--white); padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; font-size: 0.9rem; z-index: 3; } .property-price { position: absolute; top: 1rem; right: 1rem; background: rgba(255, 255, 255, 0.95); color: var(--primary-gold); padding: 0.8rem 1.2rem; border-radius: 25px; font-weight: 800; font-size: 1.1rem; z-index: 3; box-shadow: var(--shadow-light); } .property-content { padding: 2rem; } .property-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-dark); } .property-location { color: var(--text-light); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .property-features { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .feature { display: flex; align-items: center; gap: 0.5rem; color: var(--text-light); font-size: 0.9rem; } .feature i { color: var(--primary-gold); } .property-description { color: var(--text-light); line-height: 1.6; margin-bottom: 1.5rem; } .property-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid #E9ECEF; } .property-agent { display: flex; align-items: center; gap: 0.8rem; } .agent-avatar { width: 40px; height: 40px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 600; } .agent-info { font-size: 0.9rem; } .agent-name { font-weight: 600; color: var(--text-dark); } .agent-title { color: var(--text-light); font-size: 0.8rem; } .property-actions { display: flex; gap: 0.5rem; } .action-btn { width: 40px; height: 40px; border: 2px solid var(--primary-gold); background: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-gold); cursor: pointer; transition: all 0.3s ease; } .action-btn:hover { background: var(--primary-gold); color: var(--white); transform: scale(1.1); } /* Services Section */ .services { padding: 6rem 0; background: var(--white); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .service-card { text-align: center; padding: 3rem 2rem; border-radius: 20px; background: var(--light-gray); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--gradient-primary); transition: all 0.4s ease; z-index: 1; } .service-card:hover::before { left: 0; } .service-card:hover { transform: translateY(-10px); color: var(--white); } .service-icon { width: 80px; height: 80px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2rem; color: var(--white); position: relative; z-index: 2; transition: all 0.4s ease; } .service-card:hover .service-icon { background: var(--white); color: var(--primary-gold); } .service-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; position: relative; z-index: 2; } .service-description { line-height: 1.6; position: relative; z-index: 2; } /* Market Insights Scroller */ .market-insights { padding: 6rem 0; background: linear-gradient(135deg, var(--primary-gold) 0%, var(--accent-blue) 100%); overflow: hidden; } .market-insights .section-title, .market-insights .section-description { color: var(--white); } .insights-scroller { overflow: hidden; margin: 3rem 0; position: relative; } .insights-track { display: flex; animation: scroll 45s linear infinite; gap: 2rem; } .insight-card { flex: 0 0 350px; background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-medium); transition: all 0.3s ease; } .insight-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .insight-header { padding: 2rem 2rem 1rem; background: var(--light-gray); } .insight-icon { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--white); font-size: 1.5rem; } .insight-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-dark); } .insight-subtitle { color: var(--text-light); font-size: 0.9rem; } .insight-content { padding: 1.5rem 2rem 2rem; } .insight-value { font-size: 2.5rem; font-weight: 800; color: var(--primary-gold); margin-bottom: 0.5rem; } .insight-change { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .change-positive { color: var(--success-green); } .change-negative { color: #DC3545; } .insight-description { color: var(--text-light); line-height: 1.6; font-size: 0.95rem; } /* Testimonials Slider */ .testimonials { padding: 6rem 0; background: var(--white); } .testimonials-slider { position: relative; max-width: 1000px; margin: 3rem auto; overflow: hidden; border-radius: 20px; } .testimonials-slides { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .testimonial-slide { min-width: 100%; padding: 4rem; background: var(--light-gray); text-align: center; position: relative; } .testimonial-quote { font-size: 1.3rem; line-height: 1.8; color: var(--text-dark); margin-bottom: 2rem; font-style: italic; position: relative; } .testimonial-quote::before { content: '"'; font-size: 4rem; color: var(--primary-gold); position: absolute; top: -1rem; left: -2rem; font-family: serif; } .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 1rem; } .author-avatar { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.5rem; font-weight: 700; } .author-info h4 { font-weight: 600; color: var(--text-dark); margin-bottom: 0.2rem; } .author-info p { color: var(--text-light); font-size: 0.9rem; } .slider-controls { text-align: center; margin-top: 2rem; } .slider-btn { background: var(--gradient-primary); border: none; width: 50px; height: 50px; border-radius: 50%; margin: 0 0.5rem; cursor: pointer; font-size: 1.2rem; color: var(--white); transition: all 0.3s ease; } .slider-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-medium); } .slider-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; } .dot { width: 12px; height: 12px; border-radius: 50%; background: #DDD; cursor: pointer; transition: all 0.3s ease; } .dot.active { background: var(--primary-gold); transform: scale(1.2); } /* About Section */ .about { padding: 6rem 0; background: var(--light-gray); } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-top: 3rem; } .about-text h3 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--text-dark); } .about-text p { margin-bottom: 1.5rem; color: var(--text-light); line-height: 1.8; font-size: 1.1rem; } .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem; } .stat-item { text-align: center; padding: 2rem; background: var(--white); border-radius: 15px; box-shadow: var(--shadow-light); transition: all 0.3s ease; } .stat-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary-gold); display: block; margin-bottom: 0.5rem; } .stat-label { color: var(--text-light); font-weight: 500; } .about-image { position: relative; } .about-image-main { width: 100%; height: 400px; background: var(--gradient-primary); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--white); box-shadow: var(--shadow-medium); } .about-image-floating { position: absolute; bottom: -2rem; right: -2rem; width: 150px; height: 150px; background: var(--white); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary-gold); box-shadow: var(--shadow-heavy); } /* Team Section */ .team { padding: 6rem 0; background: var(--white); } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .team-member { background: var(--light-gray); border-radius: 20px; overflow: hidden; text-align: center; transition: all 0.4s ease; position: relative; } .team-member:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .member-image { height: 250px; background: var(--gradient-secondary); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 3rem; position: relative; } .member-content { padding: 2rem; } .member-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-dark); } .member-title { color: var(--primary-gold); font-weight: 600; margin-bottom: 1rem; } .member-description { color: var(--text-light); line-height: 1.6; margin-bottom: 1.5rem; } .member-contact { display: flex; justify-content: center; gap: 1rem; } .contact-btn { width: 40px; height: 40px; background: var(--gradient-primary); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); cursor: pointer; transition: all 0.3s ease; } .contact-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-light); } /* News Scroller */ .news { padding: 6rem 0; background: var(--light-gray); overflow: hidden; } .news-scroller { overflow: hidden; margin: 3rem 0; } .news-track { display: flex; animation: scrollReverse 40s linear infinite; gap: 2rem; } .news-item { flex: 0 0 350px; background: var(--white); border-radius: 15px; overflow: hidden; box-shadow: var(--shadow-light); transition: all 0.3s ease; } .news-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .news-image { height: 180px; background: var(--gradient-secondary); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 2.5rem; } .news-content { padding: 1.5rem; } .news-date { color: var(--primary-gold); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; } .news-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; color: var(--text-dark); line-height: 1.4; } .news-excerpt { color: var(--text-light); line-height: 1.6; font-size: 0.95rem; } /* Contact Section */ .contact { padding: 6rem 0; background: var(--white); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3rem; } .contact-info { padding: 2rem; } .contact-item { display: flex; align-items: flex-start; margin-bottom: 2.5rem; padding: 1.5rem; background: var(--light-gray); border-radius: 15px; transition: all 0.3s ease; } .contact-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-light); } .contact-icon { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1.5rem; color: var(--white); font-size: 1.3rem; flex-shrink: 0; } .contact-details h4 { font-weight: 600; margin-bottom: 0.5rem; color: var(--text-dark); } .contact-details p { color: var(--text-light); line-height: 1.6; } .contact-form { background: var(--light-gray); padding: 3rem; border-radius: 20px; box-shadow: var(--shadow-light); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-dark); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 1rem; border: 2px solid #E9ECEF; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 1rem; transition: all 0.3s ease; background: var(--white); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1); } .form-group textarea { resize: vertical; min-height: 120px; } .submit-btn { background: var(--gradient-primary); color: var(--white); padding: 1.2rem 2.5rem; border: none; border-radius: 50px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; width: 100%; } .submit-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Footer */ .footer { background: var(--dark-gray); color: var(--white); padding: 4rem 0 2rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 3rem; } .footer-section h4 { margin-bottom: 1.5rem; color: var(--primary-gold); font-size: 1.3rem; font-weight: 700; } .footer-section p, .footer-section a { color: #BDC3C7; text-decoration: none; line-height: 1.8; transition: all 0.3s ease; } .footer-section a:hover { color: var(--primary-gold); transform: translateX(5px); } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.8rem; } .social-links { display: flex; gap: 1rem; margin-top: 1.5rem; } .social-link { width: 45px; height: 45px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; transition: all 0.3s ease; font-size: 1.1rem; } .social-link:hover { background: var(--white); color: var(--primary-gold); transform: translateY(-5px); box-shadow: var(--shadow-medium); } .newsletter { background: rgba(212, 175, 55, 0.1); padding: 2rem; border-radius: 15px; margin-top: 1rem; } .newsletter h5 { margin-bottom: 1rem; color: var(--primary-gold); } .newsletter-form { display: flex; gap: 0.5rem; } .newsletter-form input { flex: 1; padding: 0.8rem; border: none; border-radius: 8px; font-family: 'Poppins', sans-serif; } .newsletter-form button { background: var(--gradient-primary); color: var(--white); border: none; padding: 0.8rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .newsletter-form button:hover { transform: translateY(-2px); } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid #34495E; color: #BDC3C7; } /* Animations */ @keyframes heroFadeIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-20px) rotate(5deg); } 66% { transform: translateY(-10px) rotate(-5deg); } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes scrollReverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Responsive Design */ @media (max-width: 1024px) { .hero h1 { font-size: 3.5rem; } .section-title { font-size: 2.5rem; } .about-content, .contact-content { grid-template-columns: 1fr; gap: 2rem; } .properties-grid { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } } @media (max-width: 768px) { .hamburger { display: flex; } .nav-menu { position: fixed; left: -100%; top: 80px; flex-direction: column; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); width: 100%; text-align: center; transition: 0.4s; box-shadow: var(--shadow-medium); padding: 2rem 0; gap: 1rem; } .nav-menu.active { left: 0; } .hero h1 { font-size: 2.8rem; } .hero-buttons { flex-direction: column; align-items: center; } .search-box { grid-template-columns: 1fr; padding: 1.5rem; } .properties-grid, .services-grid, .team-grid { grid-template-columns: 1fr; } .insight-card, .news-item { flex: 0 0 300px; } .form-row { grid-template-columns: 1fr; } .about-stats { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; text-align: center; } .newsletter-form { flex-direction: column; } } @media (max-width: 480px) { .hero h1 { font-size: 2.2rem; } .section-title { font-size: 2rem; } .nav-container, .container { padding: 0 1rem; } .hero-content { padding: 0 1rem; } .btn-primary, .btn-secondary { padding: 1rem 2rem; font-size: 1rem; } .properties-grid { grid-template-columns: 1fr; } .property-card { margin: 0 1rem; } }
JavaScript
// Mobile Navigation const hamburger = document.getElementById('hamburger'); const navMenu = document.getElementById('nav-menu'); hamburger.addEventListener('click', () => { navMenu.classList.toggle('active'); hamburger.classList.toggle('active'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.nav-link, .nav-cta').forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('active'); hamburger.classList.remove('active'); }); }); // Navbar scroll effect window.addEventListener('scroll', () => { const navbar = document.getElementById('navbar'); if (window.scrollY > 100) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Property search functionality function searchProperties() { const propertyType = document.getElementById('property-type').value; const location = document.getElementById('location').value; const priceRange = document.getElementById('price-range').value; const bedrooms = document.getElementById('bedrooms').value; if (!location) { alert('Please enter a location to search for properties.'); return; } // Simulate search results let searchCriteria = `properties in ${location}`; if (propertyType) searchCriteria += ` (${propertyType})`; if (priceRange) searchCriteria += ` in the ${priceRange} price range`; if (bedrooms) searchCriteria += ` with ${bedrooms} bedrooms`; alert(`Searching for ${searchCriteria}. Our agents will contact you shortly with matching properties and schedule viewings!`); } // Testimonials Slider let currentTestimonial = 0; const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const totalTestimonials = testimonialSlides.length; const dots = document.querySelectorAll('.dot'); function showTestimonial(index) { const slidesContainer = document.getElementById('testimonials-slides'); slidesContainer.style.transform = `translateX(-${index * 100}%)`; // Update dots dots.forEach((dot, i) => { dot.classList.toggle('active', i === index); }); } function nextTestimonial() { currentTestimonial = (currentTestimonial + 1) % totalTestimonials; showTestimonial(currentTestimonial); } function previousTestimonial() { currentTestimonial = (currentTestimonial - 1 + totalTestimonials) % totalTestimonials; showTestimonial(currentTestimonial); } function currentTestimonial(index) { currentTestimonial = index; showTestimonial(currentTestimonial); } // Auto-advance testimonials setInterval(nextTestimonial, 7000); // Property actions document.querySelectorAll('.action-btn').forEach(btn => { btn.addEventListener('click', function (e) { e.stopPropagation(); const action = this.title; const propertyTitle = this.closest('.property-card').querySelector('.property-title').textContent; if (action === 'Add to Favorites') { alert(`${propertyTitle} has been added to your favorites! Sign in to save your favorite properties permanently.`); } else if (action === 'Share Property') { alert(`Sharing ${propertyTitle}. A shareable link has been copied to your clipboard.`); } else if (action === 'Schedule Tour') { alert(`Tour request submitted for ${propertyTitle}. Our agent will contact you within 2 hours to schedule your private showing.`); } }); }); // Property card click document.querySelectorAll('.property-card').forEach(card => { card.addEventListener('click', function () { const propertyTitle = this.querySelector('.property-title').textContent; alert(`Opening detailed view for ${propertyTitle}. Here you would see high-resolution photos, virtual tour, detailed specifications, and neighborhood information.`); }); }); // Team member contact document.querySelectorAll('.contact-btn').forEach(btn => { btn.addEventListener('click', function (e) { e.stopPropagation(); const memberName = this.closest('.team-member').querySelector('.member-name').textContent; const action = this.title; if (action === 'Call') { alert(`Calling ${memberName}. In a real application, this would initiate a phone call.`); } else if (action === 'Email') { alert(`Opening email to ${memberName}. A new email window would open with their contact information.`); } else if (action === 'LinkedIn') { alert(`Opening ${memberName}'s LinkedIn profile in a new window.`); } }); }); // Contact Form document.getElementById('contact-form').addEventListener('submit', function (e) { e.preventDefault(); // Get form data const formData = new FormData(this); const firstName = formData.get('firstName'); const lastName = formData.get('lastName'); const email = formData.get('email'); const phone = formData.get('phone'); const serviceType = formData.get('serviceType'); const message = formData.get('message'); // Simple validation if (!firstName || !lastName || !email || !serviceType || !message) { alert('Please fill in all required fields.'); return; } // Simulate form submission const submitBtn = this.querySelector('.submit-btn'); const originalText = submitBtn.textContent; submitBtn.textContent = 'Submitting...'; submitBtn.disabled = true; setTimeout(() => { alert(`Thank you ${firstName}! Your consultation request has been received. Our ${serviceType.toLowerCase()} specialist will contact you within 2 hours to discuss your real estate needs and schedule a meeting.`); this.reset(); submitBtn.textContent = originalText; submitBtn.disabled = false; }, 2000); }); // Newsletter subscription document.querySelector('.newsletter-form button').addEventListener('click', function (e) { e.preventDefault(); const email = this.previousElementSibling.value; if (email && email.includes('@')) { alert('Thank you for subscribing! You\'ll receive exclusive market insights and new property listings.'); this.previousElementSibling.value = ''; } else { alert('Please enter a valid email address.'); } }); // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe elements for animation document.querySelectorAll('.property-card, .service-card, .team-member, .stat-item, .news-item, .insight-card').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)'; observer.observe(el); }); // Counter animation for stats function animateCounter(element, target, suffix = '') { let current = 0; const increment = target / 100; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } if (suffix === 'B') { element.textContent = '$' + (current / 1000).toFixed(1) + 'B'; } else if (suffix === 'K') { element.textContent = Math.floor(current / 1000) + 'K+'; } else if (suffix === '%') { element.textContent = Math.floor(current) + '%'; } else { element.textContent = Math.floor(current) + '+'; } }, 30); } // Trigger counter animation when stats section is visible const statsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const statNumbers = entry.target.querySelectorAll('.stat-number'); statNumbers.forEach(stat => { const text = stat.textContent; let target, suffix; if (text.includes('2,500')) { target = 2500; suffix = 'K'; } else if (text.includes('$2.8B')) { target = 2800; suffix = 'B'; } else if (text.includes('98%')) { target = 98; suffix = '%'; } else if (text.includes('25+')) { target = 25; suffix = '+'; } if (target) { animateCounter(stat, target, suffix); } }); statsObserver.unobserve(entry.target); } }); }, { threshold: 0.5 }); const statsSection = document.querySelector('.about-stats'); if (statsSection) { statsObserver.observe(statsSection); } // Pause scrolling animations on hover document.querySelectorAll('.insights-scroller, .news-scroller').forEach(scroller => { const track = scroller.querySelector('.insights-track, .news-track'); scroller.addEventListener('mouseenter', () => { track.style.animationPlayState = 'paused'; }); scroller.addEventListener('mouseleave', () => { track.style.animationPlayState = 'running'; }); }); // Add loading states to interactive elements document.querySelectorAll('button, .btn-primary, .btn-secondary').forEach(btn => { btn.addEventListener('click', function () { if (!this.disabled) { this.style.transform = 'scale(0.98)'; setTimeout(() => { this.style.transform = ''; }, 150); } }); }); // Property filter functionality (simulated) function filterProperties(type) { const cards = document.querySelectorAll('.property-card'); cards.forEach(card => { card.style.display = 'block'; card.style.opacity = '1'; }); // Simulate filtering animation cards.forEach((card, index) => { setTimeout(() => { card.style.transform = 'scale(0.95)'; setTimeout(() => { card.style.transform = 'scale(1)'; }, 100); }, index * 50); }); }
Output Preview
Desktop
Mobile
Fullscreen