About Us 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> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Us - Premier Properties</title> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body class="bg-gray-50 font-inter"> <!-- Navigation --> <nav class="fixed w-full z-50 nav-blur shadow-lg transition-all duration-300"> <div class="max-w-7xl mx-auto px-6 lg:px-8"> <div class="flex justify-between items-center h-20"> <div class="flex items-center"> <div class="w-14 h-14 bg-gradient-to-r from-yellow-600 to-yellow-500 rounded-xl flex items-center justify-center mr-4 shadow-lg"> <span class="text-white font-bold text-2xl">?</span> </div> <div> <h1 class="text-2xl font-bold text-gray-900 font-playfair">Premier Properties</h1> <p class="text-sm text-gray-600">Luxury Real Estate Excellence</p> </div> </div> <div class="hidden lg:flex items-center space-x-8"> <a href="#" class="text-gray-700 hover:text-yellow-600 font-medium transition-colors">Home</a> <a href="#" class="text-yellow-600 font-medium">About</a> <a href="#" class="text-gray-700 hover:text-yellow-600 font-medium transition-colors">Properties</a> <a href="#" class="text-gray-700 hover:text-yellow-600 font-medium transition-colors">Services</a> <a href="#" class="text-gray-700 hover:text-yellow-600 font-medium transition-colors">Contact</a> <button class="premium-btn">Get Started</button> </div> <button class="lg:hidden p-2"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </div> </nav> <!-- Hero Section --> <section class="hero-bg min-h-screen flex items-center justify-center text-white relative"> <div class="max-w-6xl mx-auto px-6 text-center"> <div class="fade-in"> <h1 class="text-6xl lg:text-8xl font-bold mb-6 text-shadow font-playfair">Redefining Luxury Living</h1> <p class="text-xl lg:text-2xl mb-8 text-gray-200 max-w-4xl mx-auto leading-relaxed"> For over two decades, Premier Properties has been the trusted name in luxury real estate, connecting discerning clients with exceptional properties and unparalleled service. </p> <div class="flex flex-col sm:flex-row gap-6 justify-center"> <button class="premium-btn text-lg px-10 py-5">Explore Properties</button> <button class="premium-btn-outline text-lg px-10 py-5">Schedule Consultation</button> </div> </div> </div> <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> </svg> </div> </section> <!-- Statistics Section --> <section class="py-24 stats-bg text-white"> <div class="max-w-7xl mx-auto px-6"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-8"> <div class="text-center scale-in"> <div class="counter mb-4" data-target="2500">0</div> <p class="text-gray-300 font-medium text-lg">Properties Sold</p> <p class="text-gray-400 text-sm mt-1">Since 2003</p> </div> <div class="text-center scale-in" style="animation-delay: 0.1s;"> <div class="counter mb-4" data-target="98">0</div> <p class="text-gray-300 font-medium text-lg">Client Satisfaction</p> <p class="text-gray-400 text-sm mt-1">Success Rate</p> </div> <div class="text-center scale-in" style="animation-delay: 0.2s;"> <div class="counter mb-4" data-target="15">0</div> <p class="text-gray-300 font-medium text-lg">Years Experience</p> <p class="text-gray-400 text-sm mt-1">Market Leadership</p> </div> <div class="text-center scale-in" style="animation-delay: 0.3s;"> <div class="counter mb-4" data-target="50">0</div> <p class="text-gray-300 font-medium text-lg">Expert Agents</p> <p class="text-gray-400 text-sm mt-1">Professional Team</p> </div> </div> </div> </section> <!-- About Section --> <section class="py-28 bg-white"> <div class="max-w-7xl mx-auto px-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center"> <div class="slide-in-left"> <h2 class="text-5xl lg:text-6xl font-bold text-gray-900 mb-8 font-playfair">Our Story of Excellence</h2> <p class="text-lg text-gray-600 mb-6 leading-relaxed"> Founded in 2003 by visionary real estate professionals, Premier Properties emerged from a simple yet powerful belief: every client deserves exceptional service and access to the finest properties available. </p> <p class="text-lg text-gray-600 mb-8 leading-relaxed"> Today, we stand as the region's premier luxury real estate firm, renowned for our integrity, market expertise, and unwavering commitment to client satisfaction. Our portfolio spans from exclusive penthouses to sprawling estates, each representing the pinnacle of luxury living. </p> <div class="grid grid-cols-2 gap-6"> <div class="text-center p-6 bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-2xl"> <div class="text-3xl font-bold gradient-text mb-2">$2.5B+</div> <div class="text-sm text-gray-600">Total Sales Volume</div> </div> <div class="text-center p-6 bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl"> <div class="text-3xl font-bold text-gray-800 mb-2">25+</div> <div class="text-sm text-gray-600">Industry Awards</div> </div> </div> </div> <div class="slide-in-right"> <div class="property-showcase luxury-shine"> <img src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Luxury Property" class="w-full h-96 object-cover"> </div> </div> </div> </div> </section> <!-- Services Section --> <section class="py-28 bg-gray-50"> <div class="max-w-7xl mx-auto px-6"> <div class="text-center mb-20 fade-in"> <h2 class="text-5xl lg:text-6xl font-bold text-gray-900 mb-6 font-playfair">Our Premium Services</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Comprehensive real estate solutions tailored to meet the unique needs of luxury property buyers and sellers. </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> <div class="service-card scale-in"> <div class="feature-icon"> <span>?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4 text-center font-playfair">Luxury Home Sales</h3> <p class="text-gray-600 mb-6 text-center leading-relaxed"> Expert marketing and negotiation for high-end residential properties, ensuring maximum value and seamless transactions. </p> <ul class="space-y-3 text-gray-600"> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> Professional photography & staging</li> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> Exclusive marketing campaigns</li> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> Market analysis & pricing strategy</li> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> White-glove client service</li> </ul> </div> <div class="service-card scale-in" style="animation-delay: 0.1s;"> <div class="feature-icon"> <span>?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4 text-center font-playfair">Commercial Real Estate</h3> <p class="text-gray-600 mb-6 text-center leading-relaxed"> Strategic commercial property solutions for investors, developers, and businesses seeking prime locations. </p> <ul class="space-y-3 text-gray-600"> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> Investment property analysis</li> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> Commercial leasing services</li> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> Development consulting</li> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> Portfolio management</li> </ul> </div> <div class="service-card scale-in" style="animation-delay: 0.2s;"> <div class="feature-icon"> <span>?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4 text-center font-playfair">Investment Advisory</h3> <p class="text-gray-600 mb-6 text-center leading-relaxed"> Comprehensive investment guidance to help clients build and optimize their real estate portfolios. </p> <ul class="space-y-3 text-gray-600"> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> Market trend analysis</li> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> ROI optimization strategies</li> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> Risk assessment & mitigation</li> <li class="flex items-center"><span class="text-yellow-500 mr-3">✓</span> Exit strategy planning</li> </ul> </div> </div> </div> </section> <!-- Team Section --> <section class="py-28 bg-white"> <div class="max-w-7xl mx-auto px-6"> <div class="text-center mb-20 fade-in"> <h2 class="text-5xl lg:text-6xl font-bold text-gray-900 mb-6 font-playfair">Meet Our Leadership</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Industry veterans with decades of combined experience in luxury real estate markets. </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-10"> <div class="team-card scale-in"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Michael Sterling" class="w-full h-80 object-cover"> <div class="p-8"> <h3 class="text-2xl font-bold text-gray-900 mb-2 font-playfair">Michael Sterling</h3> <p class="text-yellow-600 font-semibold mb-4">Founder & CEO</p> <p class="text-gray-600 leading-relaxed mb-4"> With 25+ years in luxury real estate, Michael has closed over $1B in transactions and established Premier Properties as the market leader. </p> <div class="flex space-x-4"> <span class="text-gray-400">?</span> <span class="text-gray-400">?</span> <span class="text-gray-400">?</span> </div> </div> </div> <div class="team-card scale-in" style="animation-delay: 0.1s;"> <img src="https://images.unsplash.com/photo-1557862921-37829c790f19?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Sarah Chen" class="w-full h-80 object-cover"> <div class="p-8"> <h3 class="text-2xl font-bold text-gray-900 mb-2 font-playfair">Sarah Chen</h3> <p class="text-yellow-600 font-semibold mb-4">Director of Sales</p> <p class="text-gray-600 leading-relaxed mb-4"> Sarah leads our sales team with expertise in high-end residential properties and has consistently ranked as a top producer. </p> <div class="flex space-x-4"> <span class="text-gray-400">?</span> <span class="text-gray-400">?</span> <span class="text-gray-400">?</span> </div> </div> </div> <div class="team-card scale-in" style="animation-delay: 0.2s;"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="David Rodriguez" class="w-full h-80 object-cover"> <div class="p-8"> <h3 class="text-2xl font-bold text-gray-900 mb-2 font-playfair">David Rodriguez</h3> <p class="text-yellow-600 font-semibold mb-4">Investment Advisor</p> <p class="text-gray-600 leading-relaxed mb-4"> David specializes in commercial real estate and investment properties, helping clients maximize their portfolio returns. </p> <div class="flex space-x-4"> <span class="text-gray-400">?</span> <span class="text-gray-400">?</span> <span class="text-gray-400">?</span> </div> </div> </div> </div> </div> </section> <!-- Awards Section --> <section class="py-28 parallax-section overlay-dark text-white" style="background-image: url('https://images.unsplash.com/photo-1582407947304-fd86f028f716?ixlib=rb-4.0.3&auto=format&fit=crop&w=2096&q=80');"> <div class="max-w-7xl mx-auto px-6"> <div class="text-center mb-20 fade-in"> <h2 class="text-5xl lg:text-6xl font-bold mb-6 text-shadow font-playfair">Industry Recognition</h2> <p class="text-xl text-gray-200 max-w-3xl mx-auto"> Our commitment to excellence has earned us numerous accolades and industry awards. </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10"> <div class="text-center scale-in"> <div class="award-badge"> <span class="text-4xl">?</span> </div> <h3 class="text-xl font-bold mb-3">Best Luxury Agency</h3> <p class="text-gray-300 text-sm">Real Estate Excellence Awards 2024</p> </div> <div class="text-center scale-in" style="animation-delay: 0.1s;"> <div class="award-badge"> <span class="text-4xl">⭐</span> </div> <h3 class="text-xl font-bold mb-3">Top Sales Volume</h3> <p class="text-gray-300 text-sm">Metropolitan Real Estate Board 2023</p> </div> <div class="text-center scale-in" style="animation-delay: 0.2s;"> <div class="award-badge"> <span class="text-4xl">?</span> </div> <h3 class="text-xl font-bold mb-3">Client Choice Award</h3> <p class="text-gray-300 text-sm">Luxury Living Magazine 2023</p> </div> <div class="text-center scale-in" style="animation-delay: 0.3s;"> <div class="award-badge"> <span class="text-4xl">?</span> </div> <h3 class="text-xl font-bold mb-3">Diamond Status</h3> <p class="text-gray-300 text-sm">National Association of Realtors</p> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-28 bg-gray-50"> <div class="max-w-7xl mx-auto px-6"> <div class="text-center mb-20 fade-in"> <h2 class="text-5xl lg:text-6xl font-bold text-gray-900 mb-6 font-playfair">Client Testimonials</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Hear from our satisfied clients about their exceptional experiences with Premier Properties. </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-10"> <div class="testimonial-card scale-in"> <div class="quote-icon">"</div> <p class="text-lg text-gray-700 mb-6 leading-relaxed italic"> "Premier Properties exceeded every expectation. Their attention to detail, market knowledge, and negotiation skills helped us secure our dream home at an excellent price. Truly exceptional service." </p> <div class="flex items-center"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Client" class="w-16 h-16 rounded-full mr-4 object-cover"> <div> <h4 class="font-bold text-gray-900">Jennifer Martinez</h4> <p class="text-gray-600 text-sm">Luxury Home Buyer</p> </div> </div> </div> <div class="testimonial-card scale-in" style="animation-delay: 0.1s;"> <div class="quote-icon">"</div> <p class="text-lg text-gray-700 mb-6 leading-relaxed italic"> "Working with Premier Properties was a game-changer for our investment portfolio. Their market insights and professional guidance resulted in a 40% ROI on our commercial property investment." </p> <div class="flex items-center"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Client" class="w-16 h-16 rounded-full mr-4 object-cover"> <div> <h4 class="font-bold text-gray-900">Robert Thompson</h4> <p class="text-gray-600 text-sm">Commercial Investor</p> </div> </div> </div> </div> </div> </section> <!-- Call to Action --> <section class="py-28 bg-gradient-to-r from-gray-900 to-black text-white"> <div class="max-w-4xl mx-auto text-center px-6"> <div class="fade-in"> <h2 class="text-5xl lg:text-6xl font-bold mb-8 font-playfair">Ready to Begin Your Journey?</h2> <p class="text-xl mb-10 text-gray-300 leading-relaxed"> Whether you're buying, selling, or investing, Premier Properties is your trusted partner in luxury real estate. Let's make your property dreams a reality. </p> <div class="flex flex-col sm:flex-row gap-6 justify-center"> <button class="premium-btn text-lg px-12 py-6">Schedule Consultation</button> <button class="premium-btn-outline text-lg px-12 py-6">View Properties</button> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-20"> <div class="max-w-7xl mx-auto px-6"> <div class="grid grid-cols-1 md:grid-cols-4 gap-10"> <div class="fade-in"> <div class="flex items-center mb-6"> <div class="w-14 h-14 bg-gradient-to-r from-yellow-600 to-yellow-500 rounded-xl flex items-center justify-center mr-4 shadow-lg"> <span class="text-white font-bold text-2xl">?</span> </div> <div> <h3 class="text-2xl font-bold font-playfair">Premier Properties</h3> <p class="text-gray-400 text-sm">Luxury Real Estate Excellence</p> </div> </div> <p class="text-gray-400 mb-6 leading-relaxed"> Your trusted partner in luxury real estate, delivering exceptional service and unparalleled results for over two decades. </p> </div> <div class="fade-in" style="animation-delay: 0.1s;"> <h4 class="text-lg font-semibold mb-6">Services</h4> <ul class="space-y-3"> <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors">Luxury Home Sales</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors">Commercial Real Estate</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors">Investment Advisory</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors">Property Management</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors">Market Analysis</a></li> </ul> </div> <div class="fade-in" style="animation-delay: 0.2s;"> <h4 class="text-lg font-semibold mb-6">Areas</h4> <ul class="space-y-3"> <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors">Downtown District</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors">Waterfront Properties</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors">Suburban Estates</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors">Commercial Zones</a></li> <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors">Investment Districts</a></li> </ul> </div> <div class="fade-in" style="animation-delay: 0.3s;"> <h4 class="text-lg font-semibold mb-6">Contact</h4> <div class="space-y-4 text-gray-400"> <p class="flex items-center"> <span class="mr-3">?</span> 123 Luxury Avenue<br> Metropolitan City, MC 12345 </p> <p class="flex items-center"> <span class="mr-3">?</span> (555) 123-LUXURY </p> <p class="flex items-center"> <span class="mr-3">✉️</span> info@premierproperties.com </p> <div class="flex space-x-4 mt-6"> <a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors text-2xl">?</a> <a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors text-2xl">?</a> <a href="#" class="text-gray-400 hover:text-yellow-500 transition-colors text-2xl">?</a> </div> </div> </div> </div> <div class="border-t border-gray-800 mt-16 pt-8 text-center text-gray-400"> <p>© 2024 Premier Properties. All rights reserved. | Privacy Policy | Terms of Service | Equal Housing Opportunity</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:'97073a3b666f6ee2',t:'MTc1NTQxMzMyNC4wMDAwMDA='};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-playfair { font-family: 'Playfair Display', serif; } .font-inter { font-family: 'Inter', sans-serif; } * { font-family: 'Inter', sans-serif; } .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in.visible { opacity: 1; transform: translateY(0); } .slide-in-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .slide-in-left.visible { opacity: 1; transform: translateX(0); } .slide-in-right { opacity: 0; transform: translateX(50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .slide-in-right.visible { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.9); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scale-in.visible { opacity: 1; transform: scale(1); } .hero-bg { background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&auto=format&fit=crop&w=2073&q=80'); background-size: cover; background-position: center; background-attachment: fixed; } .luxury-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; } .luxury-card:hover { transform: translateY(-10px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15); } .gradient-text { background: linear-gradient(135deg, #d4af37 0%, #ffd700 50%, #b8860b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .counter { font-size: 3.5rem; font-weight: 700; color: #d4af37; font-family: 'Playfair Display', serif; } .premium-btn { background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%); border: none; color: #1a1a1a; padding: 16px 40px; border-radius: 12px; font-weight: 600; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3); position: relative; overflow: hidden; } .premium-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4); } .premium-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } .premium-btn:hover::before { left: 100%; } .premium-btn-outline { background: transparent; border: 2px solid #d4af37; color: #d4af37; padding: 14px 38px; border-radius: 12px; font-weight: 600; font-size: 16px; transition: all 0.3s ease; position: relative; overflow: hidden; } .premium-btn-outline:hover { background: #d4af37; color: #1a1a1a; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(212, 175, 55, 0.3); } .feature-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #d4af37, #ffd700); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #1a1a1a; margin: 0 auto 24px; box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2); } .parallax-section { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .overlay-dark { background: rgba(0, 0, 0, 0.8); } .text-shadow { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); } .nav-blur { backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid rgba(212, 175, 55, 0.1); } .team-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08); transition: all 0.4s ease; position: relative; } .team-card:hover { transform: translateY(-8px); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15); } .team-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, #d4af37, #ffd700); } .service-card { background: white; border-radius: 24px; padding: 40px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06); transition: all 0.4s ease; border: 1px solid #f8f9fa; position: relative; overflow: hidden; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12); border-color: #d4af37; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(212, 175, 55, 0.02), rgba(255, 215, 0, 0.02)); opacity: 0; transition: opacity 0.3s ease; } .service-card:hover::before { opacity: 1; } .stats-bg { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); } .floating { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(1deg); } } .luxury-shine { position: relative; overflow: hidden; } .luxury-shine::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s; } .luxury-shine:hover::before { left: 100%; } .property-showcase { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } .property-showcase::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(212, 175, 55, 0.1), rgba(255, 215, 0, 0.1)); opacity: 0; transition: opacity 0.3s ease; } .property-showcase:hover::after { opacity: 1; } .award-badge { background: linear-gradient(135deg, #d4af37, #ffd700); border-radius: 50%; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3); animation: pulse 3s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3); } 50% { transform: scale(1.05); box-shadow: 0 20px 50px rgba(212, 175, 55, 0.4); } } .testimonial-card { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08); transition: all 0.4s ease; position: relative; border-left: 4px solid #d4af37; } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12); } .quote-icon { position: absolute; top: 20px; right: 30px; font-size: 60px; color: #d4af37; opacity: 0.2; }
JavaScript
// 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.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 / 80; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } if (target === 98) { element.textContent = Math.floor(current) + '%'; } else if (target >= 1000) { element.textContent = Math.floor(current).toLocaleString() + '+'; } else { element.textContent = Math.floor(current) + (target >= 10 ? '+' : ''); } }, 20); } // Start counter animations when visible const counterObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const counter = entry.target; const target = parseInt(counter.dataset.target); animateCounter(counter, target); counterObserver.unobserve(counter); } }); }, observerOptions); document.querySelectorAll('.counter').forEach(counter => { counterObserver.observe(counter); }); // Navbar scroll effect window.addEventListener('scroll', () => { const navbar = document.querySelector('nav'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 8px 30px rgba(0, 0, 0, 0.12)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.95)'; navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.08)'; } }); // Smooth scrolling 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' }); } }); }); // Premium button effects document.querySelectorAll('.premium-btn, .premium-btn-outline').forEach(button => { button.addEventListener('click', function(e) { // Create luxury ripple effect const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = size + 'px'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; ripple.classList.add('luxury-ripple'); this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 800); }); }); // Add luxury ripple effect styles const style = document.createElement('style'); style.textContent = ` .premium-btn, .premium-btn-outline { position: relative; overflow: hidden; } .luxury-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: luxury-ripple-animation 0.8s ease-out; pointer-events: none; } @keyframes luxury-ripple-animation { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); // Parallax effect for hero section window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const parallax = document.querySelector('.hero-bg'); const speed = scrolled * 0.5; parallax.style.transform = `translateY(${speed}px)`; }); // Luxury card hover effects document.querySelectorAll('.luxury-card, .service-card, .team-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-12px) scale(1.02)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; }); }); // Property showcase hover effect document.querySelectorAll('.property-showcase').forEach(showcase => { showcase.addEventListener('mouseenter', function() { this.style.transform = 'scale(1.05)'; }); showcase.addEventListener('mouseleave', function() { this.style.transform = 'scale(1)'; }); });
Output Preview
Desktop
Mobile
Fullscreen