Premium Real Estate Template
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>Golden Properties - Premium Real Estate</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body class="bg-white"> <!-- Navigation --> <nav class="navbar-scroll fixed w-full z-50 py-4 px-6"> <div class="container mx-auto flex justify-between items-center"> <div class="text-2xl font-bold gradient-text"> <i class="fas fa-home mr-2"></i>Golden Properties </div> <div class="hidden md:flex space-x-8"> <a href="#home" class="text-gray-700 hover:text-yellow-500 transition-colors">Home</a> <a href="#about" class="text-gray-700 hover:text-yellow-500 transition-colors">About</a> <a href="#properties" class="text-gray-700 hover:text-yellow-500 transition-colors">Properties</a> <a href="#services" class="text-gray-700 hover:text-yellow-500 transition-colors">Services</a> <a href="#contact" class="text-gray-700 hover:text-yellow-500 transition-colors">Contact</a> </div> <button class="md:hidden text-gray-700" onclick="toggleMobileMenu()"> <i class="fas fa-bars text-xl"></i> </button> </div> <div id="mobileMenu" class="hidden md:hidden bg-white mt-4 py-4 px-6 rounded-lg shadow-lg"> <a href="#home" class="block py-2 text-gray-700 hover:text-yellow-500">Home</a> <a href="#about" class="block py-2 text-gray-700 hover:text-yellow-500">About</a> <a href="#properties" class="block py-2 text-gray-700 hover:text-yellow-500">Properties</a> <a href="#services" class="block py-2 text-gray-700 hover:text-yellow-500">Services</a> <a href="#contact" class="block py-2 text-gray-700 hover:text-yellow-500">Contact</a> </div> </nav> <!-- 1. Hero Section --> <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden" style="background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center;"> <div class="container mx-auto px-6 text-center text-white"> <h1 class="text-5xl md:text-7xl font-bold mb-6 fade-in"> Find Your <span class="gradient-text">Dream Home</span> </h1> <p class="text-xl md:text-2xl mb-8 fade-in">Premium properties in the most desirable locations</p> <div class="flex flex-col md:flex-row gap-4 justify-center items-center fade-in"> <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-4 rounded-full font-semibold transition-all hover:scale-105 pulse-glow"> Explore Properties </button> <button class="border-2 border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-black px-8 py-4 rounded-full font-semibold transition-all"> Watch Video </button> </div> </div> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 floating"> <i class="fas fa-chevron-down text-yellow-500 text-2xl"></i> </div> </section> <!-- 2. About Section --> <section id="about" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="grid md:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <h2 class="text-4xl md:text-5xl font-bold mb-6">About <span class="gradient-text">Golden Properties</span></h2> <p class="text-gray-600 text-lg mb-6">With over 15 years of experience in the real estate industry, we've helped thousands of families find their perfect homes. Our commitment to excellence and personalized service sets us apart.</p> <div class="grid grid-cols-2 gap-6 mb-8"> <div class="text-center"> <div class="counter" data-target="1500">0</div> <p class="text-gray-600">Happy Clients</p> </div> <div class="text-center"> <div class="counter" data-target="2500">0</div> <p class="text-gray-600">Properties Sold</p> </div> </div> <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 rounded-full font-semibold transition-all hover:scale-105"> Learn More </button> </div> <div class="slide-in-right"> <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Modern House" class="rounded-2xl shadow-2xl hover-lift"> </div> </div> </div> </section> <!-- 3. Featured Properties --> <section id="properties" class="py-20"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold mb-4">Featured <span class="gradient-text">Properties</span></h2> <p class="text-gray-600 text-lg">Discover our handpicked selection of premium properties</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Luxury Villa" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Luxury Villa</h3> <p class="text-gray-600 mb-4">Beverly Hills, CA</p> <div class="flex justify-between items-center"> <span class="text-2xl font-bold text-yellow-500">$2,500,000</span> <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-full font-semibold transition-all"> View Details </button> </div> </div> </div> <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Modern Apartment" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Modern Apartment</h3> <p class="text-gray-600 mb-4">Manhattan, NY</p> <div class="flex justify-between items-center"> <span class="text-2xl font-bold text-yellow-500">$1,200,000</span> <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-full font-semibold transition-all"> View Details </button> </div> </div> </div> <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Family Home" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Family Home</h3> <p class="text-gray-600 mb-4">Austin, TX</p> <div class="flex justify-between items-center"> <span class="text-2xl font-bold text-yellow-500">$850,000</span> <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-full font-semibold transition-all"> View Details </button> </div> </div> </div> </div> </div> </section> <!-- 4. Services Section --> <section id="services" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold mb-4">Our <span class="gradient-text">Services</span></h2> <p class="text-gray-600 text-lg">Comprehensive real estate solutions for all your needs</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="text-center p-8 bg-white rounded-2xl shadow-lg hover-lift scale-in"> <div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-6"> <i class="fas fa-home text-yellow-500 text-3xl"></i> </div> <h3 class="text-xl font-bold mb-4">Property Sales</h3> <p class="text-gray-600">Expert guidance through every step of buying or selling your property</p> </div> <div class="text-center p-8 bg-white rounded-2xl shadow-lg hover-lift scale-in"> <div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-6"> <i class="fas fa-key text-yellow-500 text-3xl"></i> </div> <h3 class="text-xl font-bold mb-4">Property Rentals</h3> <p class="text-gray-600">Find the perfect rental property or manage your investment properties</p> </div> <div class="text-center p-8 bg-white rounded-2xl shadow-lg hover-lift scale-in"> <div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-6"> <i class="fas fa-chart-line text-yellow-500 text-3xl"></i> </div> <h3 class="text-xl font-bold mb-4">Investment Consulting</h3> <p class="text-gray-600">Strategic advice to maximize your real estate investment returns</p> </div> </div> </div> </section> <!-- 5. Statistics Section --> <section class="py-20 parallax" style="background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=2126&q=80');"> <div class="container mx-auto px-6 text-center text-white"> <div class="grid md:grid-cols-4 gap-8"> <div class="fade-in"> <div class="counter text-yellow-500" data-target="15">0</div> <p class="text-xl">Years Experience</p> </div> <div class="fade-in"> <div class="counter text-yellow-500" data-target="2500">0</div> <p class="text-xl">Properties Sold</p> </div> <div class="fade-in"> <div class="counter text-yellow-500" data-target="1500">0</div> <p class="text-xl">Happy Clients</p> </div> <div class="fade-in"> <div class="counter text-yellow-500" data-target="50">0</div> <p class="text-xl">Expert Agents</p> </div> </div> </div> </section> <!-- 6. Testimonials Section --> <section class="py-20"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold mb-4">Client <span class="gradient-text">Testimonials</span></h2> <p class="text-gray-600 text-lg">What our satisfied clients say about us</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-2xl shadow-lg hover-lift scale-in"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="Client" class="w-16 h-16 rounded-full mr-4"> <div> <h4 class="font-bold">John Smith</h4> <p class="text-gray-600">CEO, Tech Corp</p> </div> </div> <p class="text-gray-600 italic">"Golden Properties helped us find the perfect office space. Their professionalism and attention to detail exceeded our expectations."</p> <div class="flex text-yellow-500 mt-4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <div class="bg-white p-8 rounded-2xl shadow-lg hover-lift scale-in"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Client" class="w-16 h-16 rounded-full mr-4"> <div> <h4 class="font-bold">Sarah Johnson</h4> <p class="text-gray-600">Marketing Director</p> </div> </div> <p class="text-gray-600 italic">"Amazing service! They made the home buying process smooth and stress-free. Highly recommend Golden Properties."</p> <div class="flex text-yellow-500 mt-4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <div class="bg-white p-8 rounded-2xl shadow-lg hover-lift scale-in"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="Client" class="w-16 h-16 rounded-full mr-4"> <div> <h4 class="font-bold">Mike Davis</h4> <p class="text-gray-600">Entrepreneur</p> </div> </div> <p class="text-gray-600 italic">"Professional, knowledgeable, and trustworthy. Golden Properties delivered exactly what they promised."</p> <div class="flex text-yellow-500 mt-4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> </section> <!-- 7. Team Section --> <section class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold mb-4">Meet Our <span class="gradient-text">Team</span></h2> <p class="text-gray-600 text-lg">Expert real estate professionals dedicated to your success</p> </div> <div class="grid md:grid-cols-4 gap-8"> <div class="text-center bg-white p-6 rounded-2xl shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Agent" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> <h3 class="text-xl font-bold mb-2">David Wilson</h3> <p class="text-gray-600 mb-4">Senior Agent</p> <div class="flex justify-center space-x-3"> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-twitter"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-facebook"></i></a> </div> </div> <div class="text-center bg-white p-6 rounded-2xl shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Agent" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> <h3 class="text-xl font-bold mb-2">Emily Chen</h3> <p class="text-gray-600 mb-4">Property Specialist</p> <div class="flex justify-center space-x-3"> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-twitter"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-facebook"></i></a> </div> </div> <div class="text-center bg-white p-6 rounded-2xl shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Agent" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> <h3 class="text-xl font-bold mb-2">Robert Brown</h3> <p class="text-gray-600 mb-4">Investment Advisor</p> <div class="flex justify-center space-x-3"> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-twitter"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-facebook"></i></a> </div> </div> <div class="text-center bg-white p-6 rounded-2xl shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Agent" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> <h3 class="text-xl font-bold mb-2">Lisa Garcia</h3> <p class="text-gray-600 mb-4">Marketing Manager</p> <div class="flex justify-center space-x-3"> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-twitter"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-600"><i class="fab fa-facebook"></i></a> </div> </div> </div> </div> </section> <!-- 8. Property Search Section --> <section class="py-20"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold mb-4">Find Your <span class="gradient-text">Perfect Property</span></h2> <p class="text-gray-600 text-lg">Search through thousands of properties to find your dream home</p> </div> <div class="bg-white p-8 rounded-2xl shadow-2xl max-w-4xl mx-auto scale-in"> <div class="grid md:grid-cols-4 gap-4 mb-6"> <select class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:border-yellow-500"> <option>Property Type</option> <option>House</option> <option>Apartment</option> <option>Villa</option> <option>Condo</option> </select> <select class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:border-yellow-500"> <option>Location</option> <option>New York</option> <option>Los Angeles</option> <option>Chicago</option> <option>Miami</option> </select> <select class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:border-yellow-500"> <option>Price Range</option> <option>$0 - $500k</option> <option>$500k - $1M</option> <option>$1M - $2M</option> <option>$2M+</option> </select> <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-lg font-semibold transition-all hover:scale-105"> <i class="fas fa-search mr-2"></i>Search </button> </div> <div class="grid md:grid-cols-3 gap-4"> <div class="flex items-center"> <input type="checkbox" class="mr-2"> <label>Swimming Pool</label> </div> <div class="flex items-center"> <input type="checkbox" class="mr-2"> <label>Garage</label> </div> <div class="flex items-center"> <input type="checkbox" class="mr-2"> <label>Garden</label> </div> </div> </div> </div> </section> <!-- 9. Blog Section --> <section class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold mb-4">Latest <span class="gradient-text">News</span></h2> <p class="text-gray-600 text-lg">Stay updated with the latest real estate trends and insights</p> </div> <div class="grid md:grid-cols-3 gap-8"> <article class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Blog Post" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-yellow-500 text-sm mb-2">March 15, 2024</div> <h3 class="text-xl font-bold mb-3">Top 10 Real Estate Investment Tips for 2024</h3> <p class="text-gray-600 mb-4">Discover the best strategies to maximize your real estate investments this year...</p> <a href="#" class="text-yellow-500 hover:text-yellow-600 font-semibold">Read More <i class="fas fa-arrow-right ml-1"></i></a> </div> </article> <article class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1582407947304-fd86f028f716?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Blog Post" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-yellow-500 text-sm mb-2">March 12, 2024</div> <h3 class="text-xl font-bold mb-3">How to Stage Your Home for a Quick Sale</h3> <p class="text-gray-600 mb-4">Learn professional staging techniques that help sell homes faster...</p> <a href="#" class="text-yellow-500 hover:text-yellow-600 font-semibold">Read More <i class="fas fa-arrow-right ml-1"></i></a> </div> </article> <article class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Blog Post" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-yellow-500 text-sm mb-2">March 10, 2024</div> <h3 class="text-xl font-bold mb-3">Market Trends: What to Expect This Spring</h3> <p class="text-gray-600 mb-4">Analysis of current market conditions and predictions for the coming months...</p> <a href="#" class="text-yellow-500 hover:text-yellow-600 font-semibold">Read More <i class="fas fa-arrow-right ml-1"></i></a> </div> </article> </div> </div> </section> <!-- 10. Contact Section --> <section id="contact" class="py-20"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold mb-4">Get In <span class="gradient-text">Touch</span></h2> <p class="text-gray-600 text-lg">Ready to find your dream property? Contact us today!</p> </div> <div class="grid md:grid-cols-2 gap-12"> <div class="slide-in-left"> <div class="space-y-8"> <div class="flex items-center"> <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mr-4"> <i class="fas fa-map-marker-alt text-yellow-500 text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Address</h3> <p class="text-gray-600">123 Golden Street, Real Estate City, RC 12345</p> </div> </div> <div class="flex items-center"> <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mr-4"> <i class="fas fa-phone text-yellow-500 text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Phone</h3> <p class="text-gray-600">+1 (555) 123-4567</p> </div> </div> <div class="flex items-center"> <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mr-4"> <i class="fas fa-envelope text-yellow-500 text-xl"></i> </div> <div> <h3 class="font-bold text-lg">Email</h3> <p class="text-gray-600">info@goldenproperties.com</p> </div> </div> </div> </div> <div class="slide-in-right"> <form class="bg-white p-8 rounded-2xl shadow-2xl"> <div class="grid md:grid-cols-2 gap-4 mb-4"> <input type="text" placeholder="First Name" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:border-yellow-500"> <input type="text" placeholder="Last Name" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:border-yellow-500"> </div> <input type="email" placeholder="Email Address" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:border-yellow-500 mb-4"> <input type="tel" placeholder="Phone Number" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:border-yellow-500 mb-4"> <textarea placeholder="Your Message" rows="5" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:border-yellow-500 mb-6"></textarea> <button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 rounded-lg font-semibold transition-all hover:scale-105"> Send Message </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-16"> <div class="container mx-auto px-6"> <div class="grid md:grid-cols-4 gap-8 mb-8"> <div> <div class="text-2xl font-bold gradient-text mb-4"> <i class="fas fa-home mr-2"></i>Golden Properties </div> <p class="text-gray-400 mb-4">Your trusted partner in finding the perfect property. Excellence in real estate since 2009.</p> <div class="flex space-x-4"> <a href="#" class="text-yellow-500 hover:text-yellow-400"><i class="fab fa-facebook text-xl"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-400"><i class="fab fa-twitter text-xl"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-400"><i class="fab fa-instagram text-xl"></i></a> <a href="#" class="text-yellow-500 hover:text-yellow-400"><i class="fab fa-linkedin text-xl"></i></a> </div> </div> <div> <h3 class="text-xl font-bold mb-4">Quick Links</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-yellow-500">About Us</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500">Properties</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500">Services</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500">Contact</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Services</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-yellow-500">Property Sales</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500">Property Rentals</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500">Investment Consulting</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500">Property Management</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Newsletter</h3> <p class="text-gray-400 mb-4">Subscribe to get the latest property updates</p> <div class="flex"> <input type="email" placeholder="Your email" class="flex-1 p-3 rounded-l-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-yellow-500"> <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-r-lg font-semibold transition-all"> Subscribe </button> </div> </div> </div> <div class="border-t border-gray-800 pt-8 text-center"> <p class="text-gray-400">© 2024 Golden Properties. All rights reserved.</p> </div> </div> </footer> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96a9c4bb84073a14',t:'MTc1NDQzMzMzNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
* { font-family: 'Poppins', sans-serif; } .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } .slide-in-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease; } .slide-in-left.visible { opacity: 1; transform: translateX(0); } .slide-in-right { opacity: 0; transform: translateX(50px); transition: all 0.8s ease; } .slide-in-right.visible { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.8); transition: all 0.8s ease; } .scale-in.visible { opacity: 1; transform: scale(1); } .floating { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .pulse-glow { animation: pulse-glow 2s infinite; } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); } 50% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.8); } } .gradient-text { background: linear-gradient(135deg, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .counter { font-size: 3rem; font-weight: 800; color: #fbbf24; } .navbar-scroll { transition: all 0.3s ease; } .navbar-scroll.scrolled { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); }
JavaScript
// Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Mobile menu toggle function toggleMobileMenu() { const menu = document.getElementById('mobileMenu'); menu.classList.toggle('hidden'); } // Navbar scroll effect window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-scroll'); if (window.scrollY > 100) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in').forEach(el => { observer.observe(el); }); // Counter animation function animateCounter(element, target) { let current = 0; const increment = target / 100; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } element.textContent = Math.floor(current); }, 20); } // Animate counters when they come into view const counterObserver = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { const target = parseInt(entry.target.getAttribute('data-target')); animateCounter(entry.target, target); counterObserver.unobserve(entry.target); } }); }, observerOptions); document.querySelectorAll('.counter').forEach(counter => { counterObserver.observe(counter); }); // Form submission document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! We will get back to you soon.'); this.reset(); }); // Property search document.querySelector('button[type="button"]').addEventListener('click', function() { alert('Search functionality would connect to property database. This is a demo version.'); }); // Property detail buttons document.querySelectorAll('button:contains("View Details")').forEach(button => { button.addEventListener('click', function() { alert('Property details would open in a modal or new page. This is a demo version.'); }); });
Output Preview
Desktop
Mobile
Fullscreen