Premium Real Estate Footer 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>Premium Real Estate - Modern Footer</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> </head> <body class="bg-gray-50"> <!-- Main content spacer --> <div class="min-h-screen flex items-center justify-center luxury-gradient"> <div class="text-center text-white"> <div class="award-badge inline-block px-4 py-2 rounded-full text-sm font-semibold text-gray-800 mb-6"> ? #1 Luxury Real Estate Agency </div> <h1 class="text-6xl md:text-8xl font-bold mb-6"> PRESTIGE <span class="block text-4xl md:text-6xl font-light">PROPERTIES</span> </h1> <p class="text-xl md:text-2xl font-light opacity-90">Where Dreams Meet Reality</p> </div> </div> <!-- Premium Real Estate Footer --> <footer class="relative bg-white overflow-hidden"> <!-- Decorative background elements --> <div class="absolute inset-0 opacity-5"> <div class="absolute top-20 left-10 w-72 h-72 bg-blue-400 rounded-full floating-elements"></div> <div class="absolute bottom-20 right-10 w-56 h-56 bg-yellow-400 rounded-full floating-elements" style="animation-delay: -4s;"></div> <div class="absolute top-1/2 left-1/3 w-40 h-40 bg-purple-400 rounded-full floating-elements" style="animation-delay: -2s;"></div> </div> <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> <!-- Stats Section --> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-20"> <div class="text-center stats-counter"> <div class="text-4xl md:text-5xl font-bold text-luxury mb-2">2,500+</div> <p class="text-gray-600 font-light">Properties Sold</p> </div> <div class="text-center stats-counter" style="animation-delay: 0.2s;"> <div class="text-4xl md:text-5xl font-bold text-luxury mb-2">$2.8B</div> <p class="text-gray-600 font-light">Total Sales Volume</p> </div> <div class="text-center stats-counter" style="animation-delay: 0.4s;"> <div class="text-4xl md:text-5xl font-bold text-luxury mb-2">15+</div> <p class="text-gray-600 font-light">Years Experience</p> </div> <div class="text-center stats-counter" style="animation-delay: 0.6s;"> <div class="text-4xl md:text-5xl font-bold text-luxury mb-2">98%</div> <p class="text-gray-600 font-light">Client Satisfaction</p> </div> </div> <div class="luxury-divider mb-16"></div> <!-- Main Footer Content --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16"> <!-- Brand Section --> <div class="col-span-1 lg:col-span-1"> <div class="mb-8"> <h3 class="text-3xl md:text-4xl font-bold text-luxury mb-4"> Prestige Properties </h3> <div class="w-20 h-1 gold-accent rounded-full mb-6"></div> </div> <p class="text-gray-600 text-lg leading-relaxed mb-8 font-light"> Your trusted partner in luxury real estate. We specialize in premium properties that exceed expectations and create lasting value. </p> <!-- Featured Properties Mini Cards --> <div class="space-y-4"> <div class="property-card rounded-2xl p-4 flex items-center space-x-4"> <div class="property-image w-16 h-16 rounded-xl flex-shrink-0"></div> <div> <h5 class="font-semibold text-gray-800">Luxury Penthouse</h5> <p class="text-sm text-gray-600">$2.8M • Manhattan</p> </div> </div> <div class="property-card rounded-2xl p-4 flex items-center space-x-4"> <div class="property-image w-16 h-16 rounded-xl flex-shrink-0" style="background: linear-gradient(45deg, #f093fb, #f5576c);"></div> <div> <h5 class="font-semibold text-gray-800">Modern Villa</h5> <p class="text-sm text-gray-600">$1.9M • Beverly Hills</p> </div> </div> </div> </div> <!-- Services Section --> <div class="col-span-1"> <h4 class="text-2xl font-semibold text-gray-800 mb-8"> Our Services </h4> <ul class="space-y-4"> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-3 h-3 gold-accent rounded-full mr-4 group-hover:scale-125 transition-transform"></span> Luxury Home Sales </a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-3 h-3 gold-accent rounded-full mr-4 group-hover:scale-125 transition-transform"></span> Property Investment </a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-3 h-3 gold-accent rounded-full mr-4 group-hover:scale-125 transition-transform"></span> Market Analysis </a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-3 h-3 gold-accent rounded-full mr-4 group-hover:scale-125 transition-transform"></span> Property Management </a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-3 h-3 gold-accent rounded-full mr-4 group-hover:scale-125 transition-transform"></span> Relocation Services </a></li> </ul> </div> <!-- Locations --> <div class="col-span-1"> <h4 class="text-2xl font-semibold text-gray-800 mb-8"> Prime Locations </h4> <ul class="space-y-4"> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-3 h-3 bg-blue-400 rounded-full mr-4 group-hover:scale-125 transition-transform"></span> Manhattan, NY </a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-3 h-3 bg-blue-400 rounded-full mr-4 group-hover:scale-125 transition-transform"></span> Beverly Hills, CA </a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-3 h-3 bg-blue-400 rounded-full mr-4 group-hover:scale-125 transition-transform"></span> Miami Beach, FL </a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-3 h-3 bg-blue-400 rounded-full mr-4 group-hover:scale-125 transition-transform"></span> Aspen, CO </a></li> <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-3 h-3 bg-blue-400 rounded-full mr-4 group-hover:scale-125 transition-transform"></span> The Hamptons, NY </a></li> </ul> </div> <!-- Contact & Newsletter --> <div class="col-span-1"> <h4 class="text-2xl font-semibold text-gray-800 mb-8"> Contact Our Experts </h4> <!-- Contact Info --> <div class="space-y-6 mb-8"> <div class="flex items-start space-x-4"> <div class="w-12 h-12 luxury-gradient rounded-xl flex items-center justify-center text-white text-xl"> ? </div> <div> <p class="font-semibold text-gray-800">Headquarters</p> <p class="text-gray-600 font-light">432 Park Avenue<br>New York, NY 10016</p> </div> </div> <div class="flex items-start space-x-4"> <div class="w-12 h-12 gold-accent rounded-xl flex items-center justify-center text-white text-xl"> ? </div> <div> <p class="font-semibold text-gray-800">Call Us</p> <p class="text-gray-600 font-light">+1 (555) 123-LUXURY</p> </div> </div> <div class="flex items-start space-x-4"> <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white text-xl"> ✉️ </div> <div> <p class="font-semibold text-gray-800">Email</p> <p class="text-gray-600 font-light">info@prestigeproperties.com</p> </div> </div> </div> <!-- Newsletter Signup --> <div class="glass-morphism rounded-2xl p-6 bg-gradient-to-br from-blue-50 to-purple-50"> <h5 class="text-lg font-semibold text-gray-800 mb-4">Exclusive Property Alerts</h5> <p class="text-gray-600 text-sm mb-4 font-light">Be the first to know about luxury listings</p> <div class="space-y-3"> <input type="email" placeholder="Enter your email address" class="premium-input w-full px-4 py-3 rounded-xl text-gray-700 font-light" > <button class="luxury-button w-full px-6 py-3 text-gray-800 rounded-xl font-semibold"> Get Exclusive Access </button> </div> </div> </div> </div> <!-- Awards & Social Section --> <div class="border-t border-gray-200 pt-12 mb-12"> <div class="flex flex-col lg:flex-row justify-between items-center space-y-8 lg:space-y-0"> <!-- Awards --> <div class="flex flex-col items-center lg:items-start"> <h5 class="text-lg font-semibold text-gray-800 mb-6">Industry Recognition</h5> <div class="flex flex-wrap justify-center lg:justify-start gap-4"> <div class="award-badge px-4 py-2 rounded-full text-sm font-semibold text-gray-800"> ? Best Luxury Agency 2024 </div> <div class="award-badge px-4 py-2 rounded-full text-sm font-semibold text-gray-800"> ⭐ Top Sales Team </div> <div class="award-badge px-4 py-2 rounded-full text-sm font-semibold text-gray-800"> ? Premium Service Award </div> </div> </div> <!-- Social Media --> <div class="flex flex-col items-center"> <h5 class="text-lg font-semibold text-gray-800 mb-6">Follow Our Success</h5> <div class="flex space-x-4"> <a href="#" class="social-luxury w-14 h-14 rounded-2xl flex items-center justify-center text-2xl"> ? </a> <a href="#" class="social-luxury w-14 h-14 rounded-2xl flex items-center justify-center text-2xl"> ? </a> <a href="#" class="social-luxury w-14 h-14 rounded-2xl flex items-center justify-center text-2xl"> ? </a> <a href="#" class="social-luxury w-14 h-14 rounded-2xl flex items-center justify-center text-2xl"> ? </a> <a href="#" class="social-luxury w-14 h-14 rounded-2xl flex items-center justify-center text-2xl"> ? </a> </div> </div> <!-- Call to Action Buttons --> <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <button class="luxury-button px-8 py-4 text-gray-800 rounded-xl font-semibold text-lg"> Schedule Consultation </button> <button class="bg-white border-2 border-blue-200 px-8 py-4 text-blue-600 rounded-xl font-semibold text-lg hover:bg-blue-50 transition-colors"> Browse Properties </button> </div> </div> </div> <!-- Bottom Copyright --> <div class="border-t border-gray-200 pt-8"> <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"> <p class="text-gray-500 text-center md:text-left font-light"> © 2024 Prestige Properties. All rights reserved. Licensed Real Estate Broker. </p> <div class="flex space-x-8 text-sm"> <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors font-light">Privacy Policy</a> <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors font-light">Terms of Service</a> <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors font-light">Fair Housing</a> </div> </div> </div> </div> <!-- Bottom luxury accent --> <div class="gold-accent h-3"></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:'96ae0631013a1672',t:'MTc1NDQ3Nzk2MC4wMDAwMDA='};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; } .luxury-gradient { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%); } .gold-accent { background: linear-gradient(135deg, #d4af37 0%, #ffd700 50%, #d4af37 100%); } .glass-morphism { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); } .property-card { background: linear-gradient(145deg, #ffffff, #f8fafc); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .property-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent); transition: left 0.6s; } .property-card:hover::before { left: 100%; } .property-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 35px 70px rgba(0, 0, 0, 0.15); } .luxury-button { background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%); transition: all 0.3s ease; position: relative; overflow: hidden; } .luxury-button::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; } .luxury-button:hover::before { left: 100%; } .luxury-button:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(212, 175, 55, 0.4); } .social-luxury { background: linear-gradient(145deg, #ffffff, #f1f5f9); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .social-luxury:hover { background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%); color: white; transform: translateY(-5px) scale(1.1); box-shadow: 0 15px 35px rgba(212, 175, 55, 0.3); } .floating-elements { animation: float 8s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-20px) rotate(2deg); } 66% { transform: translateY(-10px) rotate(-1deg); } } .text-luxury { background: linear-gradient(135deg, #1e3c72 0%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .premium-input { background: rgba(255, 255, 255, 0.95); border: 2px solid transparent; transition: all 0.3s ease; } .premium-input:focus { border-color: #d4af37; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1); outline: none; background: white; } .stats-counter { animation: countUp 2s ease-out; } @keyframes countUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .luxury-divider { background: linear-gradient(90deg, transparent, #d4af37, transparent); height: 2px; } .property-image { background: linear-gradient(45deg, #667eea, #764ba2); position: relative; } .property-image::after { content: '?'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; opacity: 0.8; } .award-badge { background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
JavaScript
// Enhanced interactive effects document.addEventListener('DOMContentLoaded', function() { // Newsletter subscription const subscribeBtn = document.querySelector('.luxury-button'); const emailInput = document.querySelector('input[type="email"]'); subscribeBtn.addEventListener('click', function() { const email = emailInput.value.trim(); if (email && email.includes('@')) { // Success animation this.innerHTML = '✓ Welcome to Prestige!'; this.style.background = 'linear-gradient(135deg, #10b981, #059669)'; this.style.color = 'white'; emailInput.value = ''; setTimeout(() => { this.innerHTML = 'Get Exclusive Access'; this.style.background = 'linear-gradient(135deg, #d4af37 0%, #ffd700 100%)'; this.style.color = '#374151'; }, 3000); } else { // Error animation this.style.animation = 'shake 0.5s'; setTimeout(() => { this.style.animation = ''; }, 500); } }); // Counter animation function animateCounters() { const counters = document.querySelectorAll('.stats-counter div'); counters.forEach(counter => { const target = counter.textContent; const numericValue = parseInt(target.replace(/[^\d]/g, '')); if (numericValue) { let current = 0; const increment = numericValue / 50; const timer = setInterval(() => { current += increment; if (current >= numericValue) { counter.textContent = target; clearInterval(timer); } else { const suffix = target.includes('$') ? '$' : target.includes('%') ? '%' : '+'; const prefix = target.includes('$') ? '' : ''; counter.textContent = prefix + Math.floor(current) + (suffix === '+' ? '+' : suffix); } }, 40); } }); } // Intersection Observer for counter animation const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateCounters(); observer.unobserve(entry.target); } }); }); observer.observe(document.querySelector('.stats-counter')); // Enhanced property card interactions document.querySelectorAll('.property-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-10px) scale(1.02) rotateX(5deg)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1) rotateX(0deg)'; }); }); // Smooth parallax effect for floating elements window.addEventListener('scroll', function() { const scrolled = window.pageYOffset; const parallax = document.querySelectorAll('.floating-elements'); const speed = 0.3; parallax.forEach((element, index) => { const yPos = -(scrolled * speed * (index + 1)); element.style.transform = `translateY(${yPos}px) rotate(${scrolled * 0.01}deg)`; }); }); }); // Add shake animation for error states const style = document.createElement('style'); style.textContent = ` @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } `; document.head.appendChild(style);
Output Preview
Desktop
Mobile
Fullscreen