Our Mission AC Service
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 - AC Service</title> </head> <body class="bg-gradient-to-br from-sky-50 via-cyan-50 to-blue-50 min-h-screen"> <!-- Technical Pattern Overlay --> <div class="fixed inset-0 technical-pattern pointer-events-none"></div> <!-- Floating Cool Elements --> <div class="absolute top-16 left-8 w-6 h-6 text-sky-400 cool-breeze opacity-60">βοΈ</div> <div class="absolute top-32 right-12 w-6 h-6 text-cyan-400 temperature-drop opacity-70" style="animation-delay: 1s;">?οΈ</div> <div class="absolute top-48 left-20 w-6 h-6 text-blue-400 cool-breeze opacity-50" style="animation-delay: 2s;">?</div> <div class="absolute top-64 right-32 w-6 h-6 text-teal-400 air-flow opacity-60" style="animation-delay: 3s;">?</div> <!-- Our Mission Section --> <section class="relative py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> <!-- Animated Background Elements --> <div class="absolute top-20 left-12 w-20 h-20 text-sky-300 cooling-wave opacity-30"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M12.5,2C13,2 13.5,2.19 13.86,2.55L22.27,11C22.64,11.35 22.82,11.85 22.8,12.3C22.78,12.75 22.55,13.26 22.17,13.58L13.86,21.45C13.5,21.81 13,22 12.5,22C12,22 11.5,21.81 11.14,21.45L2.73,13C2.36,12.65 2.18,12.15 2.2,11.7C2.22,11.25 2.45,10.74 2.83,10.42L11.14,2.55C11.5,2.19 12,2 12.5,2M12.5,4L4.83,12L12.5,20L20.17,12L12.5,4Z"/> </svg> </div> <div class="absolute top-40 right-16 w-16 h-16 text-cyan-400 fan-rotate opacity-25"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M12,11A1,1 0 0,0 11,12A1,1 0 0,0 12,13A1,1 0 0,0 13,12A1,1 0 0,0 12,11M12.5,2C13,2 13.5,2.19 13.86,2.55L22.27,11C22.64,11.35 22.82,11.85 22.8,12.3C22.78,12.75 22.55,13.26 22.17,13.58L13.86,21.45C13.5,21.81 13,22 12.5,22C12,22 11.5,21.81 11.14,21.45L2.73,13C2.36,12.65 2.18,12.15 2.2,11.7C2.22,11.25 2.45,10.74 2.83,10.42L11.14,2.55C11.5,2.19 12,2 12.5,2Z"/> </svg> </div> <div class="absolute top-60 left-32 w-12 h-12 text-blue-400 maintenance-float opacity-20"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"/> </svg> </div> <!-- Header --> <div class="text-center mb-16 fade-in-up"> <div class="inline-block mb-6"> <div class="w-24 h-24 mx-auto mb-6 comfort-pulse"> <svg class="w-full h-full text-sky-600" fill="currentColor" viewBox="0 0 24 24"> <path d="M12.5,2C13,2 13.5,2.19 13.86,2.55L22.27,11C22.64,11.35 22.82,11.85 22.8,12.3C22.78,12.75 22.55,13.26 22.17,13.58L13.86,21.45C13.5,21.81 13,22 12.5,22C12,22 11.5,21.81 11.14,21.45L2.73,13C2.36,12.65 2.18,12.15 2.2,11.7C2.22,11.25 2.45,10.74 2.83,10.42L11.14,2.55C11.5,2.19 12,2 12.5,2M12.5,4L4.83,12L12.5,20L20.17,12L12.5,4Z"/> </svg> </div> </div> <h2 class="text-6xl md:text-7xl font-bold cool-text mb-6 roboto-font">Our Mission</h2> <div class="flex justify-center mb-8"> <div class="w-8 h-1 bg-sky-400 rounded-full mx-1"></div> <div class="w-16 h-1 bg-cyan-400 rounded-full mx-1"></div> <div class="w-8 h-1 bg-blue-400 rounded-full mx-1"></div> </div> <p class="text-2xl text-gray-700 max-w-4xl mx-auto leading-relaxed font-medium"> βοΈ Keeping you cool and comfortable with reliable AC services, expert repairs, and energy-efficient solutions βοΈ </p> </div> <!-- Main Mission Statement --> <div class="bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-16 fade-in-up service-glow grid-pattern"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="fade-in-left"> <h3 class="text-4xl font-bold text-gray-800 mb-6 roboto-font">Your Comfort is Our Priority! βοΈ</h3> <p class="text-xl text-gray-600 mb-6 leading-relaxed"> At our AC service center, we understand that comfort isn't a luxuryβit's essential. Our mission is to provide fast, reliable, and affordable air conditioning services that keep your home and business cool year-round. From emergency repairs to routine maintenance, we're here 24/7 to ensure your comfort never takes a break. </p> <div class="space-y-4"> <div class="flex items-center space-x-4"> <div class="w-12 h-12 bg-sky-100 rounded-full flex items-center justify-center"> <span class="text-2xl">?</span> </div> <span class="text-gray-700 font-semibold text-lg">Expert Technicians</span> </div> <div class="flex items-center space-x-4"> <div class="w-12 h-12 bg-cyan-100 rounded-full flex items-center justify-center"> <span class="text-2xl">β‘</span> </div> <span class="text-gray-700 font-semibold text-lg">24/7 Emergency Service</span> </div> <div class="flex items-center space-x-4"> <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center"> <span class="text-2xl">?</span> </div> <span class="text-gray-700 font-semibold text-lg">Affordable Pricing</span> </div> </div> </div> <div class="fade-in-right"> <div class="relative"> <div class="cooling-wave"> <svg class="w-full h-64 text-sky-500" fill="currentColor" viewBox="0 0 24 24"> <path d="M12.5,2C13,2 13.5,2.19 13.86,2.55L22.27,11C22.64,11.35 22.82,11.85 22.8,12.3C22.78,12.75 22.55,13.26 22.17,13.58L13.86,21.45C13.5,21.81 13,22 12.5,22C12,22 11.5,21.81 11.14,21.45L2.73,13C2.36,12.65 2.18,12.15 2.2,11.7C2.22,11.25 2.45,10.74 2.83,10.42L11.14,2.55C11.5,2.19 12,2 12.5,2M12.5,4L4.83,12L12.5,20L20.17,12L12.5,4Z" opacity="0.8"/> <circle cx="12" cy="8" r="2" fill="#0ea5e9" opacity="0.9"/> <circle cx="8" cy="12" r="1.5" fill="#06b6d4" opacity="0.7"/> <circle cx="16" cy="12" r="1.5" fill="#0891b2" opacity="0.8"/> <circle cx="12" cy="16" r="2" fill="#0e7490" opacity="0.6"/> </svg> </div> <div class="absolute inset-0 bg-gradient-to-r from-sky-300 via-cyan-300 to-blue-300 rounded-full blur-3xl opacity-30"></div> </div> </div> </div> </div> <!-- Services Grid --> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16"> <!-- AC Repair --> <div class="frost-effect rounded-2xl p-6 shadow-lg service-hover fade-in-up" style="animation-delay: 0.2s;"> <div class="w-16 h-16 bg-sky-200 rounded-2xl flex items-center justify-center mb-6 icon-cool"> <span class="text-3xl">?</span> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 roboto-font">AC Repair</h4> <p class="text-gray-600 leading-relaxed"> Fast and reliable repair services for all AC brands and models. We diagnose and fix issues quickly to restore your comfort. </p> </div> <!-- Installation --> <div class="frost-effect rounded-2xl p-6 shadow-lg service-hover fade-in-up" style="animation-delay: 0.4s;"> <div class="w-16 h-16 bg-cyan-200 rounded-2xl flex items-center justify-center mb-6 icon-cool"> <span class="text-3xl">?</span> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 roboto-font">Installation</h4> <p class="text-gray-600 leading-relaxed"> Professional AC installation services with proper sizing, placement, and setup for maximum efficiency and longevity. </p> </div> <!-- Maintenance --> <div class="frost-effect rounded-2xl p-6 shadow-lg service-hover fade-in-up" style="animation-delay: 0.6s;"> <div class="w-16 h-16 bg-blue-200 rounded-2xl flex items-center justify-center mb-6 icon-cool"> <span class="text-3xl">βοΈ</span> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 roboto-font">Maintenance</h4> <p class="text-gray-600 leading-relaxed"> Regular maintenance plans to keep your AC running efficiently, prevent breakdowns, and extend equipment life. </p> </div> <!-- Emergency Service --> <div class="frost-effect rounded-2xl p-6 shadow-lg service-hover fade-in-up" style="animation-delay: 0.8s;"> <div class="w-16 h-16 bg-teal-200 rounded-2xl flex items-center justify-center mb-6 icon-cool"> <span class="text-3xl">?</span> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 roboto-font">Emergency Service</h4> <p class="text-gray-600 leading-relaxed"> 24/7 emergency AC repair services because we know comfort can't wait. Quick response times guaranteed. </p> </div> </div> <!-- Statistics Section --> <div class="bg-gradient-to-r from-sky-500 via-cyan-500 to-blue-600 rounded-3xl p-8 md:p-12 text-white scale-in mb-16"> <div class="text-center mb-10"> <h3 class="text-4xl font-bold mb-4 roboto-font">Cooling Excellence! βοΈ</h3> <p class="text-xl text-sky-100">Trusted by thousands for reliable AC services</p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 text-center"> <div class="fade-in-up" style="animation-delay: 0.2s;"> <div class="text-4xl mb-2">?</div> <div class="text-4xl md:text-5xl font-bold mb-2" data-count="5000">0</div> <div class="text-sky-100 text-lg">Happy Customers</div> </div> <div class="fade-in-up" style="animation-delay: 0.4s;"> <div class="text-4xl mb-2">β‘</div> <div class="text-4xl md:text-5xl font-bold mb-2" data-count="24">0</div> <div class="text-sky-100 text-lg">Hour Service</div> </div> <div class="fade-in-up" style="animation-delay: 0.6s;"> <div class="text-4xl mb-2">?</div> <div class="text-4xl md:text-5xl font-bold mb-2" data-count="12">0</div> <div class="text-sky-100 text-lg">Years Experience</div> </div> <div class="fade-in-up" style="animation-delay: 0.8s;"> <div class="text-4xl mb-2">β</div> <div class="text-4xl md:text-5xl font-bold mb-2" data-count="98">0</div> <div class="text-sky-100 text-lg">% Satisfaction Rate</div> </div> </div> </div> <!-- Call to Action --> <div class="text-center fade-in-up"> <div class="bg-gradient-to-r from-cyan-400 via-sky-400 to-blue-500 rounded-3xl p-10 shadow-2xl"> <h3 class="text-4xl font-bold text-white mb-6 roboto-font">Need AC Service? We're Here! βοΈ</h3> <p class="text-xl text-cyan-100 mb-8 max-w-2xl mx-auto"> Don't let AC problems leave you in the heat! Contact our expert technicians for fast, reliable service that gets your comfort back on track. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button class="bg-white text-sky-600 font-bold py-4 px-8 rounded-full text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 roboto-font"> Call Now: (555) 123-COOL ? </button> <button class="bg-transparent border-3 border-white text-white hover:bg-white hover:text-sky-600 font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 roboto-font"> Schedule Service ? </button> </div> </div> </div> </section> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap'); body { font-family: 'Inter', sans-serif; } .roboto-font { font-family: 'Roboto', sans-serif; } .fade-in-up { opacity: 0; transform: translateY(30px); transition: all 1.3s 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(-30px); transition: all 1.3s 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(30px); transition: all 1.3s 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.85); transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scale-in.animate { opacity: 1; transform: scale(1); } .cooling-wave { animation: coolingWave 4s ease-in-out infinite; } @keyframes coolingWave { 0%, 100% { transform: translateY(0px) scaleY(1); } 25% { transform: translateY(-8px) scaleY(1.1); } 50% { transform: translateY(-12px) scaleY(1.05); } 75% { transform: translateY(-6px) scaleY(1.08); } } .fan-rotate { animation: fanRotate 3s linear infinite; transform-origin: center; } @keyframes fanRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .air-flow { animation: airFlow 5s ease-in-out infinite; } @keyframes airFlow { 0%, 100% { transform: translateX(0px) rotate(0deg); opacity: 0.6; } 25% { transform: translateX(15px) rotate(2deg); opacity: 0.8; } 50% { transform: translateX(25px) rotate(0deg); opacity: 1; } 75% { transform: translateX(10px) rotate(-1deg); opacity: 0.9; } } .cool-text { background: linear-gradient(135deg, #0ea5e9, #06b6d4, #0891b2, #0e7490); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: coolFlow 4s ease-in-out infinite; } @keyframes coolFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .service-glow { animation: serviceGlow 4s ease-in-out infinite; } @keyframes serviceGlow { 0%, 100% { box-shadow: 0 0 25px rgba(14, 165, 233, 0.3), 0 0 50px rgba(6, 182, 212, 0.2); } 50% { box-shadow: 0 0 35px rgba(14, 165, 233, 0.5), 0 0 70px rgba(6, 182, 212, 0.3); } } .service-hover { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .service-hover:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(14, 165, 233, 0.15); } .icon-cool { transition: all 0.4s ease; } .icon-cool:hover { transform: scale(1.15) rotate(10deg); } .technical-pattern { background-image: radial-gradient(circle at 25% 25%, rgba(14, 165, 233, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(6, 182, 212, 0.1) 0%, transparent 50%), linear-gradient(45deg, rgba(14, 165, 233, 0.05) 25%, transparent 25%); background-size: 60px 60px, 80px 80px, 40px 40px; } .temperature-drop { animation: temperatureDrop 6s ease-in-out infinite; } @keyframes temperatureDrop { 0%, 100% { transform: translateY(0px) scale(1); opacity: 0.8; } 25% { transform: translateY(-15px) scale(1.1); opacity: 1; } 50% { transform: translateY(-25px) scale(1.05); opacity: 0.9; } 75% { transform: translateY(-10px) scale(1.08); opacity: 0.95; } } .comfort-pulse { animation: comfortPulse 3s ease-in-out infinite; } @keyframes comfortPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.05); opacity: 1; } } .frost-effect { background: linear-gradient(135deg, rgba(219, 234, 254, 0.8), rgba(186, 230, 253, 0.6)); backdrop-filter: blur(10px); } .maintenance-float { animation: maintenanceFloat 7s ease-in-out infinite; } @keyframes maintenanceFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-12px) rotate(2deg); } 66% { transform: translateY(-8px) rotate(-1deg); } } .efficiency-meter { animation: efficiencyMeter 4s ease-in-out infinite; } @keyframes efficiencyMeter { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.1); } } .cool-breeze { animation: coolBreeze 8s ease-in-out infinite; } @keyframes coolBreeze { 0%, 100% { transform: translateX(0px) translateY(0px); opacity: 0.6; } 25% { transform: translateX(20px) translateY(-5px); opacity: 0.8; } 50% { transform: translateX(35px) translateY(-10px); opacity: 1; } 75% { transform: translateX(15px) translateY(-3px); opacity: 0.9; } } .grid-pattern { background-image: linear-gradient(rgba(14, 165, 233, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 165, 233, 0.1) 1px, transparent 1px); background-size: 30px 30px; }
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('animate'); } }); }, 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 = 2500) { let start = 0; const increment = target / (duration / 16); const timer = setInterval(() => { start += increment; if (start >= target) { element.textContent = target; clearInterval(timer); } else { element.textContent = Math.floor(start); } }, 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 * 200); }); statsObserver.unobserve(entry.target); } }); }, observerOptions); const statsSection = document.querySelector('.bg-gradient-to-r.from-sky-500'); if (statsSection) { statsObserver.observe(statsSection); } // Create floating snowflakes effect for cooling function createCoolingEffect() { const effects = ['βοΈ', '?', '?', '?οΈ']; const effect = document.createElement('div'); effect.textContent = effects[Math.floor(Math.random() * effects.length)]; effect.style.position = 'fixed'; effect.style.left = Math.random() * window.innerWidth + 'px'; effect.style.top = '-50px'; effect.style.fontSize = '16px'; effect.style.pointerEvents = 'none'; effect.style.zIndex = '1000'; effect.style.transition = 'all 5s ease-out'; effect.style.opacity = '0.8'; document.body.appendChild(effect); setTimeout(() => { effect.style.top = window.innerHeight + 'px'; effect.style.transform = `rotate(${Math.random() * 360}deg) translateX(${(Math.random() - 0.5) * 100}px)`; }, 100); setTimeout(() => { effect.remove(); }, 5000); } // Create cooling effects periodically setInterval(createCoolingEffect, 3000); // Enhanced hover effects for service cards document.querySelectorAll('.service-hover').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-10px) scale(1.02)'; this.style.boxShadow = '0 20px 40px rgba(14, 165, 233, 0.2)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; this.style.boxShadow = ''; }); }); // Add cooling breeze effect on scroll window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const coolElements = document.querySelectorAll('.cooling-wave'); coolElements.forEach((element, index) => { const speed = 0.2 + (index * 0.1); const wave = Math.sin(scrolled * 0.01 + index) * 3; element.style.transform = `translateY(${scrolled * speed}px) scaleY(${1 + wave * 0.02})`; }); }); // Interactive cooling effect on click document.querySelectorAll('.icon-cool').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)'; // Create burst of cooling effects for (let i = 0; i < 3; i++) { setTimeout(() => { const rect = this.getBoundingClientRect(); const coolBurst = document.createElement('div'); coolBurst.textContent = 'βοΈ'; coolBurst.style.position = 'fixed'; coolBurst.style.left = rect.left + rect.width/2 + 'px'; coolBurst.style.top = rect.top + rect.height/2 + 'px'; coolBurst.style.fontSize = '20px'; coolBurst.style.pointerEvents = 'none'; coolBurst.style.zIndex = '1001'; coolBurst.style.transition = 'all 1s ease-out'; document.body.appendChild(coolBurst); setTimeout(() => { coolBurst.style.transform = `translate(${(Math.random() - 0.5) * 200}px, ${-100 - Math.random() * 100}px) rotate(${Math.random() * 360}deg)`; coolBurst.style.opacity = '0'; }, 50); setTimeout(() => { coolBurst.remove(); }, 1000); }, i * 100); } setTimeout(() => { this.style.transform = 'scale(1) rotate(0deg)'; this.style.transition = 'all 0.4s ease'; }, 300); }); });
Output Preview
Desktop
Mobile
Fullscreen