Our Mission Real Estate
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>Our Mission - Real Estate</title> </head> <body class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 min-h-screen"> <!-- Architectural Pattern Overlay --> <div class="fixed inset-0 architectural-pattern opacity-30 pointer-events-none"></div> <!-- Our Mission Section --> <section class="relative py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> <!-- Floating Property Elements --> <div class="absolute top-20 left-12 w-16 h-16 text-blue-200 property-elevation opacity-25"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/> </svg> </div> <div class="absolute top-40 right-16 w-14 h-14 text-amber-300 key-rotate opacity-30"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14M12.65,10C11.83,7.67 9.61,6 7,6A6,6 0 0,0 1,12A6,6 0 0,0 7,18C9.61,18 11.83,16.33 12.65,14H17V18H21V14H23V10H12.65Z"/> </svg> </div> <div class="absolute top-60 left-32 w-12 h-12 text-indigo-200 building-rise opacity-20"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M15,11V5L12,2L9,5V7H7V21H17V11H15M11,19H9V17H11V19M15,19H13V17H15V19M11,15H9V13H11V15M15,15H13V13H15V15M11,11H9V9H11V11M13,7H11V5H13V7Z"/> </svg> </div> <!-- Header --> <div class="text-center mb-20 fade-in-up"> <div class="inline-block mb-8"> <div class="w-28 h-28 mx-auto mb-6 market-pulse"> <svg class="w-full h-full text-blue-600" fill="currentColor" viewBox="0 0 24 24"> <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/> </svg> </div> </div> <h2 class="text-6xl md:text-7xl font-bold luxury-text mb-8 playfair-font tracking-tight">Our Mission</h2> <div class="flex justify-center mb-10"> <div class="w-12 h-1 bg-blue-600 rounded-full mx-1"></div> <div class="w-20 h-1 bg-amber-500 rounded-full mx-1"></div> <div class="w-12 h-1 bg-indigo-600 rounded-full mx-1"></div> </div> <p class="text-2xl text-gray-700 max-w-4xl mx-auto leading-relaxed font-medium"> Transforming dreams into addresses by connecting people with their perfect properties through expertise, integrity, and exceptional service. </p> </div> <!-- Main Mission Statement --> <div class="bg-white rounded-3xl shadow-2xl p-10 md:p-16 mb-20 fade-in-up premium-glow blueprint-grid"> <div class="grid lg:grid-cols-2 gap-16 items-center"> <div class="fade-in-left"> <h3 class="text-4xl font-bold text-gray-800 mb-8 playfair-font leading-tight">Your Trusted Partner in Real Estate Excellence</h3> <p class="text-xl text-gray-600 mb-8 leading-relaxed"> With decades of combined experience and an unwavering commitment to client satisfaction, we guide you through every step of your real estate journey. Whether you're buying your first home, selling a cherished property, or investing in your future, we deliver results that exceed expectations. </p> <div class="space-y-6"> <div class="flex items-center space-x-4"> <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center success-counter"> <svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path> </svg> </div> <span class="text-gray-700 font-semibold text-lg">Proven Track Record of Success</span> </div> <div class="flex items-center space-x-4"> <div class="w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center success-counter" style="animation-delay: 1s;"> <svg class="w-7 h-7 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path> </svg> </div> <span class="text-gray-700 font-semibold text-lg">Maximum Value for Your Investment</span> </div> </div> </div> <div class="fade-in-right"> <div class="relative"> <div class="property-elevation"> <svg class="w-full h-80 text-blue-500" fill="currentColor" viewBox="0 0 24 24"> <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" opacity="0.8"/> <rect x="6" y="14" width="2" height="2" opacity="0.9"/> <rect x="8" y="14" width="2" height="2" opacity="0.7"/> <rect x="6" y="16" width="2" height="2" opacity="0.8"/> <rect x="8" y="16" width="2" height="2" opacity="0.6"/> <rect x="15" y="14" width="2" height="2" opacity="0.9"/> <rect x="15" y="16" width="2" height="2" opacity="0.7"/> </svg> </div> <div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 rounded-full blur-3xl opacity-20"></div> </div> </div> </div> </div> <!-- Services Grid --> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-20"> <!-- Residential Sales --> <div class="bg-white rounded-2xl p-8 shadow-xl property-hover property-card-shine fade-in-up" style="animation-delay: 0.2s;"> <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-8 icon-luxury"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 playfair-font">Residential Sales</h4> <p class="text-gray-600 leading-relaxed"> Expert guidance in buying and selling homes with personalized service that ensures the best outcomes for our clients. </p> </div> <!-- Commercial Properties --> <div class="bg-white rounded-2xl p-8 shadow-xl property-hover property-card-shine fade-in-up" style="animation-delay: 0.4s;"> <div class="w-20 h-20 bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl flex items-center justify-center mb-8 icon-luxury"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path> </svg> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 playfair-font">Commercial Properties</h4> <p class="text-gray-600 leading-relaxed"> Strategic commercial real estate solutions for businesses looking to expand, relocate, or invest in prime locations. </p> </div> <!-- Investment Advisory --> <div class="bg-white rounded-2xl p-8 shadow-xl property-hover property-card-shine fade-in-up" style="animation-delay: 0.6s;"> <div class="w-20 h-20 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-8 icon-luxury"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path> </svg> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 playfair-font">Investment Advisory</h4> <p class="text-gray-600 leading-relaxed"> Professional investment consulting to help you build wealth through strategic real estate portfolio development. </p> </div> <!-- Property Management --> <div class="bg-white rounded-2xl p-8 shadow-xl property-hover property-card-shine fade-in-up" style="animation-delay: 0.8s;"> <div class="w-20 h-20 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-8 icon-luxury"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> </svg> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 playfair-font">Property Management</h4> <p class="text-gray-600 leading-relaxed"> Comprehensive property management services that maximize returns while maintaining property value and tenant satisfaction. </p> </div> </div> <!-- Statistics Section --> <div class="bg-gradient-to-r from-slate-800 via-blue-900 to-indigo-900 rounded-3xl p-10 md:p-16 text-white scale-in mb-20"> <div class="text-center mb-12"> <h3 class="text-4xl font-bold mb-4 playfair-font">Excellence in Numbers</h3> <p class="text-xl text-blue-200">Delivering exceptional results for our valued clients</p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 text-center"> <div class="fade-in-up" style="animation-delay: 0.2s;"> <div class="text-5xl md:text-6xl font-bold mb-3 golden-accent" data-count="2500">0</div> <div class="text-blue-200 text-lg">Properties Sold</div> <div class="w-full bg-blue-700 rounded-full h-1 mt-4"> <div class="progress-line bg-amber-400 h-1 rounded-full" style="width: 0%; transition: width 2.5s ease;"></div> </div> </div> <div class="fade-in-up" style="animation-delay: 0.4s;"> <div class="text-5xl md:text-6xl font-bold mb-3 golden-accent" data-count="25">0</div> <div class="text-blue-200 text-lg">Years of Excellence</div> <div class="w-full bg-blue-700 rounded-full h-1 mt-4"> <div class="progress-line bg-amber-400 h-1 rounded-full" style="width: 0%; transition: width 2.5s ease;"></div> </div> </div> <div class="fade-in-up" style="animation-delay: 0.6s;"> <div class="text-5xl md:text-6xl font-bold mb-3 golden-accent" data-count="98">0</div> <div class="text-blue-200 text-lg">% Client Satisfaction</div> <div class="w-full bg-blue-700 rounded-full h-1 mt-4"> <div class="progress-line bg-amber-400 h-1 rounded-full" style="width: 0%; transition: width 2.5s ease;"></div> </div> </div> <div class="fade-in-up" style="animation-delay: 0.8s;"> <div class="text-5xl md:text-6xl font-bold mb-3 golden-accent" data-count="500">0</div> <div class="text-blue-200 text-lg">Million+ in Sales</div> <div class="w-full bg-blue-700 rounded-full h-1 mt-4"> <div class="progress-line bg-amber-400 h-1 rounded-full" style="width: 0%; transition: width 2.5s ease;"></div> </div> </div> </div> </div> <!-- Call to Action --> <div class="text-center fade-in-up"> <div class="bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-700 rounded-3xl p-12 shadow-2xl"> <h3 class="text-4xl font-bold text-white mb-6 playfair-font">Ready to Make Your Move?</h3> <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto leading-relaxed"> Let our experienced team guide you to success. Whether buying, selling, or investing, we're here to make your real estate dreams a reality. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button class="bg-white text-blue-600 font-bold py-4 px-8 rounded-full text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"> Get Free Consultation </button> <button class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-blue-600 font-bold py-4 px-8 rounded-full text-lg transition-all duration-300"> View Properties </button> </div> </div> </div> </section> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; } .playfair-font { font-family: 'Playfair Display', serif; } .fade-in-up { opacity: 0; transform: translateY(40px); transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-up.animate { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-40px); transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-left.animate { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(40px); transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-right.animate { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.9); transition: all 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scale-in.animate { opacity: 1; transform: scale(1); } .property-elevation { animation: propertyElevation 8s ease-in-out infinite; } @keyframes propertyElevation { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-8px) rotate(1deg); } 50% { transform: translateY(-12px) rotate(0deg); } 75% { transform: translateY(-6px) rotate(-1deg); } } .key-rotate { animation: keyRotate 6s ease-in-out infinite; transform-origin: center; } @keyframes keyRotate { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(15deg) scale(1.1); } 50% { transform: rotate(0deg) scale(1.05); } 75% { transform: rotate(-10deg) scale(1.1); } } .building-rise { animation: buildingRise 10s ease-in-out infinite; } @keyframes buildingRise { 0%, 100% { transform: translateY(0px) scaleY(1); } 50% { transform: translateY(-15px) scaleY(1.02); } } .luxury-text { background: linear-gradient(135deg, #1e40af, #3b82f6, #60a5fa, #d97706); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: luxuryShine 4s ease-in-out infinite; } @keyframes luxuryShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .premium-glow { animation: premiumGlow 5s ease-in-out infinite; } @keyframes premiumGlow { 0%, 100% { box-shadow: 0 0 30px rgba(30, 64, 175, 0.2), 0 0 60px rgba(59, 130, 246, 0.1); } 50% { box-shadow: 0 0 40px rgba(30, 64, 175, 0.4), 0 0 80px rgba(59, 130, 246, 0.2); } } .property-hover { transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .property-hover:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 25px 50px rgba(30, 64, 175, 0.15); } .icon-luxury { transition: all 0.4s ease; } .icon-luxury:hover { transform: scale(1.2) rotate(8deg); } .architectural-pattern { background-image: linear-gradient(45deg, rgba(30, 64, 175, 0.05) 25%, transparent 25%), linear-gradient(-45deg, rgba(30, 64, 175, 0.05) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(59, 130, 246, 0.05) 75%), linear-gradient(-45deg, transparent 75%, rgba(59, 130, 246, 0.05) 75%); background-size: 60px 60px; background-position: 0 0, 0 30px, 30px -30px, -30px 0px; } .market-pulse { animation: marketPulse 4s ease-in-out infinite; } @keyframes marketPulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .golden-accent { background: linear-gradient(135deg, #f59e0b, #d97706, #92400e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .property-card-shine { position: relative; overflow: hidden; } .property-card-shine::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: rotate(45deg); transition: all 0.6s; opacity: 0; } .property-card-shine:hover::before { animation: shine 0.6s ease-in-out; } @keyframes shine { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; } } .success-counter { animation: successCounter 3s ease-in-out infinite; } @keyframes successCounter { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .blueprint-grid { background-image: linear-gradient(rgba(30, 64, 175, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 64, 175, 0.1) 1px, transparent 1px); background-size: 50px 50px; }
JavaScript
// Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -80px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate'); // Animate progress lines const progressLines = entry.target.querySelectorAll('.progress-line'); progressLines.forEach((line, index) => { setTimeout(() => { line.style.width = '100%'; }, index * 200 + 500); }); } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in-up, .fade-in-left, .fade-in-right, .scale-in').forEach(el => { observer.observe(el); }); // Counter animation for statistics function animateCounter(element, target, duration = 3000) { let start = 0; const increment = target / (duration / 16); const timer = setInterval(() => { start += increment; if (start >= target) { element.textContent = target.toLocaleString(); clearInterval(timer); } else { element.textContent = Math.floor(start).toLocaleString(); } }, 16); } // Animate statistics when they come into view const statsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const statElements = entry.target.querySelectorAll('[data-count]'); statElements.forEach((el, index) => { setTimeout(() => { const target = parseInt(el.getAttribute('data-count')); animateCounter(el, target); }, index * 300); }); statsObserver.unobserve(entry.target); } }); }, observerOptions); const statsSection = document.querySelector('.bg-gradient-to-r.from-slate-800'); if (statsSection) { statsObserver.observe(statsSection); } // Enhanced parallax effect for property elements window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const propertyElements = document.querySelectorAll('.property-elevation'); propertyElements.forEach((element, index) => { const speed = 0.2 + (index * 0.1); element.style.transform = `translateY(${scrolled * speed}px)`; }); }); // Professional hover effects document.querySelectorAll('.property-hover').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-12px) scale(1.02)'; this.style.boxShadow = '0 25px 50px rgba(30, 64, 175, 0.2)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; this.style.boxShadow = ''; }); }); // Luxury icon interactions document.querySelectorAll('.icon-luxury').forEach(icon => { icon.addEventListener('click', function() { this.style.transform = 'scale(1.3) rotate(15deg)'; this.style.transition = 'all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)'; setTimeout(() => { this.style.transform = 'scale(1) rotate(0deg)'; this.style.transition = 'all 0.4s ease'; }, 300); }); }); // Market pulse effect on scroll window.addEventListener('scroll', () => { const marketElements = document.querySelectorAll('.market-pulse'); const scrollPosition = window.pageYOffset; marketElements.forEach(element => { const elementTop = element.offsetTop; const elementHeight = element.offsetHeight; const windowHeight = window.innerHeight; if (scrollPosition > elementTop - windowHeight && scrollPosition < elementTop + elementHeight) { element.style.transform = `scale(${1 + Math.sin(scrollPosition * 0.01) * 0.03})`; } }); });
Output Preview
Desktop
Mobile
Fullscreen