Professional Air Conditioning Solutions
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>CoolTech AC Services - Professional Air Conditioning Solutions</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto+Slab:wght@400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand" href="#home"> <i class="fas fa-snowflake"></i> CoolTech AC Services </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> <li class="nav-item"> <button class="btn emergency-btn" onclick="callEmergency()"> <i class="fas fa-phone"></i> Emergency 24/7 </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="hero-content"> <h1 class="hero-title">Expert AC Services You Can Trust</h1> <p class="hero-subtitle">Professional air conditioning repair, installation, and maintenance services. Available 24/7 for emergencies with certified technicians and guaranteed satisfaction.</p> <div class="hero-buttons"> <a href="#booking" class="btn btn-custom btn-primary-custom">Book Service Now</a> <a href="#services" class="btn btn-custom btn-secondary-custom">View Services</a> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Our AC Services</h2> <p class="section-subtitle animate-on-scroll">Comprehensive air conditioning solutions for residential and commercial properties</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-tools"></i> </div> <h4 class="mb-3">AC Repair & Diagnosis</h4> <p class="mb-3">Expert diagnosis and repair of all AC issues including cooling problems, strange noises, electrical faults, and refrigerant leaks.</p> <div class="service-price">Starting ā¹499</div> <button class="btn btn-custom btn-primary-custom mt-3" onclick="bookService('AC Repair')">Book Repair</button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-download"></i> </div> <h4 class="mb-3">AC Installation</h4> <p class="mb-3">Professional installation of new AC units with proper sizing, positioning, and electrical connections for optimal performance.</p> <div class="service-price">Starting ā¹1,999</div> <button class="btn btn-custom btn-primary-custom mt-3" onclick="bookService('AC Installation')">Book Installation</button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-broom"></i> </div> <h4 class="mb-3">AC Cleaning & Maintenance</h4> <p class="mb-3">Regular maintenance including filter cleaning, coil cleaning, gas refilling, and performance optimization.</p> <div class="service-price">Starting ā¹799</div> <button class="btn btn-custom btn-primary-custom mt-3" onclick="bookService('AC Maintenance')">Book Cleaning</button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-thermometer-half"></i> </div> <h4 class="mb-3">Gas Refilling</h4> <p class="mb-3">Professional refrigerant gas refilling and leak detection to restore your AC's cooling efficiency.</p> <div class="service-price">Starting ā¹1,299</div> <button class="btn btn-custom btn-primary-custom mt-3" onclick="bookService('Gas Refilling')">Book Gas Fill</button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-exchange-alt"></i> </div> <h4 class="mb-3">AC Uninstallation</h4> <p class="mb-3">Safe removal and uninstallation of AC units with proper gas recovery and electrical disconnection.</p> <div class="service-price">Starting ā¹699</div> <button class="btn btn-custom btn-primary-custom mt-3" onclick="bookService('AC Uninstallation')">Book Removal</button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-phone-alt"></i> </div> <h4 class="mb-3">Emergency Service</h4> <p class="mb-3">24/7 emergency AC repair service for urgent cooling issues, especially during extreme weather conditions.</p> <div class="service-price">Starting ā¹899</div> <button class="btn btn-custom btn-primary-custom mt-3" onclick="callEmergency()">Call Emergency</button> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section section-padding"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="about-image animate-on-scroll"> <img src="https://images.unsplash.com/photo-1621905251189-08b45d6a269e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="AC Technician at Work" class="img-fluid"> </div> </div> <div class="col-lg-6"> <div class="animate-on-scroll"> <h2 class="section-title text-start">15+ Years of Cooling Excellence</h2> <p class="mb-4">CoolTech AC Services has been the trusted choice for air conditioning solutions since 2008. Our team of certified technicians provides reliable, efficient, and affordable AC services across the city.</p> <p class="mb-4">We specialize in all major AC brands and models, offering comprehensive solutions from installation to emergency repairs. Our commitment to quality service and customer satisfaction has made us the preferred AC service provider.</p> <ul class="feature-list mb-4"> <li><i class="fas fa-certificate"></i> Certified & Licensed Technicians</li> <li><i class="fas fa-clock"></i> 24/7 Emergency Service Available</li> <li><i class="fas fa-shield-alt"></i> 6 Month Service Warranty</li> <li><i class="fas fa-tools"></i> All Brands & Models Supported</li> <li><i class="fas fa-thumbs-up"></i> 10,000+ Satisfied Customers</li> <li><i class="fas fa-money-bill-wave"></i> Transparent & Affordable Pricing</li> </ul> <div class="d-flex align-items-center mb-4"> <div class="status-badge status-available me-3">Available Now</div> <span class="text-muted">Response time: 30 minutes</span> </div> <a href="#contact" class="btn btn-custom btn-primary-custom">Get Free Quote</a> </div> </div> </div> </div> </section> <!-- Booking Section --> <section id="booking" class="booking-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Book Your AC Service</h2> <p class="section-subtitle animate-on-scroll">Schedule your AC service online and get instant confirmation</p> </div> </div> <div class="row"> <div class="col-lg-8 mx-auto"> <div class="booking-form animate-on-scroll"> <form id="bookingForm"> <div class="row mb-4"> <div class="col-md-6 mb-3"> <label class="form-label fw-bold">Full Name</label> <input type="text" class="form-control form-control-custom" placeholder="Enter your full name" required> </div> <div class="col-md-6 mb-3"> <label class="form-label fw-bold">Phone Number</label> <input type="tel" class="form-control form-control-custom" placeholder="Enter your phone number" required> </div> </div> <div class="row mb-4"> <div class="col-md-6 mb-3"> <label class="form-label fw-bold">Email Address</label> <input type="email" class="form-control form-control-custom" placeholder="Enter your email"> </div> <div class="col-md-6 mb-3"> <label class="form-label fw-bold">Preferred Date</label> <input type="date" class="form-control form-control-custom" required> </div> </div> <div class="mb-4"> <label class="form-label fw-bold">Service Address</label> <textarea class="form-control form-control-custom" rows="3" placeholder="Enter complete address with landmarks" required></textarea> </div> <div class="mb-4"> <label class="form-label fw-bold">Select Service Type</label> <div class="row"> <div class="col-md-4 mb-3"> <div class="service-type-card" onclick="selectServiceType(this, 'AC Repair')"> <div class="service-type-icon"> <i class="fas fa-tools"></i> </div> <h6>AC Repair</h6> <small class="text-muted">Fix cooling issues</small> </div> </div> <div class="col-md-4 mb-3"> <div class="service-type-card" onclick="selectServiceType(this, 'AC Installation')"> <div class="service-type-icon"> <i class="fas fa-download"></i> </div> <h6>Installation</h6> <small class="text-muted">New AC setup</small> </div> </div> <div class="col-md-4 mb-3"> <div class="service-type-card" onclick="selectServiceType(this, 'AC Maintenance')"> <div class="service-type-icon"> <i class="fas fa-broom"></i> </div> <h6>Maintenance</h6> <small class="text-muted">Cleaning & service</small> </div> </div> </div> </div> <div class="row mb-4"> <div class="col-md-6 mb-3"> <label class="form-label fw-bold">AC Brand</label> <select class="form-control form-control-custom" required> <option value="">Select AC Brand</option> <option value="LG">LG</option> <option value="Samsung">Samsung</option> <option value="Daikin">Daikin</option> <option value="Voltas">Voltas</option> <option value="Hitachi">Hitachi</option> <option value="Blue Star">Blue Star</option> <option value="Carrier">Carrier</option> <option value="Godrej">Godrej</option> <option value="Other">Other</option> </select> </div> <div class="col-md-6 mb-3"> <label class="form-label fw-bold">AC Capacity</label> <select class="form-control form-control-custom" required> <option value="">Select Capacity</option> <option value="1 Ton">1 Ton</option> <option value="1.5 Ton">1.5 Ton</option> <option value="2 Ton">2 Ton</option> <option value="2.5 Ton">2.5 Ton</option> <option value="3 Ton">3 Ton</option> <option value="Other">Other</option> </select> </div> </div> <div class="mb-4"> <label class="form-label fw-bold">Problem Description</label> <textarea class="form-control form-control-custom" rows="4" placeholder="Describe the AC problem or service requirements in detail..."></textarea> </div> <div class="mb-4"> <label class="form-label fw-bold">Preferred Time Slot</label> <div class="row"> <div class="col-md-4"> <div class="form-check"> <input class="form-check-input" type="radio" name="timeSlot" value="morning" id="morning"> <label class="form-check-label" for="morning"> Morning (9 AM - 12 PM) </label> </div> </div> <div class="col-md-4"> <div class="form-check"> <input class="form-check-input" type="radio" name="timeSlot" value="afternoon" id="afternoon"> <label class="form-check-label" for="afternoon"> Afternoon (12 PM - 4 PM) </label> </div> </div> <div class="col-md-4"> <div class="form-check"> <input class="form-check-input" type="radio" name="timeSlot" value="evening" id="evening"> <label class="form-check-label" for="evening"> Evening (4 PM - 8 PM) </label> </div> </div> </div> </div> <button type="submit" class="btn btn-custom btn-primary-custom btn-lg w-100"> <i class="fas fa-calendar-check me-2"></i>Book Service Now </button> </form> </div> </div> </div> </div> </section> <!-- Emergency Service Section --> <section class="emergency-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto"> <div class="emergency-card animate-on-scroll"> <div class="emergency-icon"> <i class="fas fa-phone-alt"></i> </div> <h2 class="mb-3">24/7 Emergency AC Service</h2> <p class="mb-4 fs-5">AC breakdown during extreme weather? Don't sweat it! Our emergency technicians are available round the clock to restore your comfort.</p> <div class="row text-center mb-4"> <div class="col-md-4"> <h4 class="text-warning">ā” 30 Min</h4> <p>Response Time</p> </div> <div class="col-md-4"> <h4 class="text-warning">? Expert</h4> <p>Technicians</p> </div> <div class="col-md-4"> <h4 class="text-warning">? 24/7</h4> <p>Availability</p> </div> </div> <button class="btn btn-danger btn-lg emergency-btn" onclick="callEmergency()"> <i class="fas fa-phone me-2"></i>Call Emergency: +91 98765 43210 </button> </div> </div> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="pricing-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Service Pricing</h2> <p class="section-subtitle animate-on-scroll">Transparent and affordable pricing for all AC services</p> </div> </div> <div class="row"> <div class="col-lg-4 mb-4"> <div class="pricing-card animate-on-scroll"> <h4 class="mb-3">Basic Service</h4> <div class="pricing-price">ā¹799</div> <p class="text-muted mb-4">Perfect for regular maintenance</p> <ul class="pricing-features"> <li><i class="fas fa-check"></i> Filter Cleaning</li> <li><i class="fas fa-check"></i> Basic Inspection</li> <li><i class="fas fa-check"></i> Performance Check</li> <li><i class="fas fa-check"></i> 1 Month Warranty</li> <li><i class="fas fa-times text-muted"></i> Gas Refilling</li> <li><i class="fas fa-times text-muted"></i> Deep Cleaning</li> </ul> <button class="btn btn-custom btn-primary-custom w-100" onclick="bookService('Basic Service')">Choose Basic</button> </div> </div> <div class="col-lg-4 mb-4"> <div class="pricing-card featured animate-on-scroll"> <div class="pricing-badge">Most Popular</div> <h4 class="mb-3">Complete Service</h4> <div class="pricing-price">ā¹1,499</div> <p class="text-muted mb-4">Comprehensive AC maintenance</p> <ul class="pricing-features"> <li><i class="fas fa-check"></i> Deep Filter Cleaning</li> <li><i class="fas fa-check"></i> Coil Cleaning</li> <li><i class="fas fa-check"></i> Gas Level Check</li> <li><i class="fas fa-check"></i> Electrical Check</li> <li><i class="fas fa-check"></i> 3 Month Warranty</li> <li><i class="fas fa-check"></i> Performance Report</li> </ul> <button class="btn btn-custom btn-primary-custom w-100" onclick="bookService('Complete Service')">Choose Complete</button> </div> </div> <div class="col-lg-4 mb-4"> <div class="pricing-card animate-on-scroll"> <h4 class="mb-3">Premium Service</h4> <div class="pricing-price">ā¹2,299</div> <p class="text-muted mb-4">Ultimate AC care package</p> <ul class="pricing-features"> <li><i class="fas fa-check"></i> Complete Deep Cleaning</li> <li><i class="fas fa-check"></i> Gas Refilling (if needed)</li> <li><i class="fas fa-check"></i> Electrical Repairs</li> <li><i class="fas fa-check"></i> Spare Parts (basic)</li> <li><i class="fas fa-check"></i> 6 Month Warranty</li> <li><i class="fas fa-check"></i> Priority Support</li> </ul> <button class="btn btn-custom btn-primary-custom w-100" onclick="bookService('Premium Service')">Choose Premium</button> </div> </div> </div> <!-- Service Tracking Demo --> <div class="row mt-5"> <div class="col-lg-8 mx-auto"> <h4 class="text-center mb-4">Track Your Service Status</h4> <div class="tracking-card"> <div class="tracking-status"> <div class="tracking-icon status-completed"> <i class="fas fa-check"></i> </div> <div> <h6 class="mb-1">Service Booked</h6> <small class="text-muted">Today, 10:30 AM - Booking confirmed</small> </div> </div> </div> <div class="tracking-card"> <div class="tracking-status"> <div class="tracking-icon status-in-progress"> <i class="fas fa-truck"></i> </div> <div> <h6 class="mb-1">Technician Assigned</h6> <small class="text-muted">Today, 11:15 AM - Rajesh Kumar is on the way</small> </div> </div> </div> <div class="tracking-card"> <div class="tracking-status"> <div class="tracking-icon status-pending"> <i class="fas fa-tools"></i> </div> <div> <h6 class="mb-1">Service in Progress</h6> <small class="text-muted">Estimated completion: 2:00 PM</small> </div> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Happy Customers</h2> <p class="section-subtitle animate-on-scroll">See what our customers say about our AC services</p> </div> </div> <div class="row"> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-quote">"</div> <p class="testimonial-text">Excellent service! My AC was not cooling properly and they fixed it within an hour. The technician was very professional and explained everything clearly. Highly recommended!</p> <div class="customer-info"> <div class="customer-avatar"> <i class="fas fa-user"></i> </div> <div class="customer-details"> <h6>Priya Sharma</h6> <small>Residential Customer</small> <div class="rating-stars"> <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> </div> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-quote">"</div> <p class="testimonial-text">CoolTech installed 3 ACs in our office. The installation was clean, professional, and completed on time. Their maintenance service is also excellent. Great value for money!</p> <div class="customer-info"> <div class="customer-avatar"> <i class="fas fa-user"></i> </div> <div class="customer-details"> <h6>Rajesh Kumar</h6> <small>Business Owner</small> <div class="rating-stars"> <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> </div> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-quote">"</div> <p class="testimonial-text">Emergency service at 2 AM! My AC stopped working during a hot summer night. They came within 30 minutes and fixed it. Truly 24/7 service. Thank you CoolTech!</p> <div class="customer-info"> <div class="customer-avatar"> <i class="fas fa-user"></i> </div> <div class="customer-details"> <h6>Anjali Patel</h6> <small>Emergency Service</small> <div class="rating-stars"> <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> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll text-white">Get In Touch</h2> <p class="section-subtitle animate-on-scroll text-white-50">Contact us for AC service quotes and technical support</p> </div> </div> <div class="row"> <div class="col-lg-8"> <div class="contact-form animate-on-scroll"> <h4 class="mb-4 text-white">Send Us a Message</h4> <form id="contactForm"> <div class="row"> <div class="col-md-6 mb-3"> <input type="text" class="form-control form-control-dark" placeholder="Your Name" required> </div> <div class="col-md-6 mb-3"> <input type="email" class="form-control form-control-dark" placeholder="Email Address" required> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <input type="tel" class="form-control form-control-dark" placeholder="Phone Number" required> </div> <div class="col-md-6 mb-3"> <select class="form-control form-control-dark" required> <option value="">Select Service</option> <option value="ac-repair">AC Repair</option> <option value="ac-installation">AC Installation</option> <option value="ac-maintenance">AC Maintenance</option> <option value="gas-refilling">Gas Refilling</option> <option value="emergency">Emergency Service</option> <option value="quote">Get Quote</option> </select> </div> </div> <div class="mb-3"> <textarea class="form-control form-control-dark" rows="4" placeholder="Describe your AC problem or service requirements..." required></textarea> </div> <button type="submit" class="btn btn-custom btn-primary-custom btn-lg">Send Message</button> </form> </div> </div> <div class="col-lg-4"> <div class="contact-info animate-on-scroll"> <h4 class="mb-4 text-white">Contact Information</h4> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div> <h6 class="text-white mb-1">Service Area</h6> <p class="text-white-50 mb-0">All areas in Mumbai, Navi Mumbai<br>& Thane. Free home visits.</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div> <h6 class="text-white mb-1">Phone Numbers</h6> <p class="text-white-50 mb-0">+91 98765 43210 (24/7)<br>+91 87654 32109 (Office)</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div> <h6 class="text-white mb-1">Service Hours</h6> <p class="text-white-50 mb-0">Mon - Sat: 8:00 AM - 8:00 PM<br>Emergency: 24/7 Available</p> </div> </div> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4"> <div class="footer-brand">āļø CoolTech AC Services</div> <p class="text-muted mb-4 footerp">Your trusted partner for all air conditioning needs. Professional, reliable, and affordable AC services with 24/7 emergency support.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> <a href="#"><i class="fab fa-whatsapp"></i></a> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Quick Links</h5> <div class="footer-links"> <a href="#home">Home</a> <a href="#services">Services</a> <a href="#about">About Us</a> <a href="#booking">Book Service</a> <a href="#pricing">Pricing</a> <a href="#contact">Contact</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Our Services</h5> <div class="footer-links"> <a href="#">AC Repair</a> <a href="#">AC Installation</a> <a href="#">AC Maintenance</a> <a href="#">Gas Refilling</a> <a href="#">Emergency Service</a> <a href="#">AMC Plans</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Emergency Contact</h5> <div class="footer-links"> <a href="tel:+919876543210">? +91 98765 43210</a> <a href="mailto:emergency@cooltechac.com">āļø emergency@cooltechac.com</a> <a href="#">? 24/7 Available</a> <a href="#">ā” 30 Min Response</a> <a href="#">?ļø Licensed & Insured</a> <a href="#">? Satisfaction Guaranteed</a> </div> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6"> <p class="text-muted mb-0 footerp">© 2024 CoolTech AC Services. All rights reserved.</p> </div> <div class="col-md-6 text-md-end "> <a href="#" class="text-muted me-3 footerp">Privacy Policy</a> <a href="#" class="text-muted me-3 footerp">Terms & Conditions</a> <a href="#" class="text-muted footerp">Service Warranty</a> </div> </div> </div> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <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:'9769124242d63d2b',t:'MTc1NjQzOTI5MS4wMDAwMDA='};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
:root { --primary-blue: #1e40af; --secondary-blue: #3b82f6; --accent-blue: #60a5fa; --light-blue: #dbeafe; --dark-blue: #1e3a8a; --cool-gray: #64748b; --light-gray: #f8fafc; --white: #ffffff; --success-green: #10b981; --warning-orange: #f59e0b; --danger-red: #ef4444; --gradient-blue: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); --gradient-light: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); --gradient-cool: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; overflow-x: hidden; background-color: var(--light-gray); } h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', serif; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--light-blue); } ::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: 4px; } /* Navigation */ .navbar-custom { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; padding: 1rem 0; } .navbar-brand { font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 2rem; background: var(--gradient-blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; } .navbar-brand i { color: var(--accent-blue); margin-right: 10px; font-size: 1.8rem; } .nav-link { font-weight: 500; color: var(--cool-gray) !important; margin: 0 0.5rem; transition: all 0.3s ease; position: relative; } .nav-link:hover { color: var(--primary-blue) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-blue); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } /* Emergency Button */ .emergency-btn { background: var(--danger-red); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; animation: pulse 2s infinite; margin-left: 15px; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(rgba(30, 64, 175, 0.357), rgba(30, 64, 175, 0.3)), url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 2; } .hero-title { font-size: 4rem; font-weight: 700; color: white; margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); animation: fadeInUp 1s ease-out; } .hero-subtitle { font-size: 1.3rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 3rem; animation: fadeInUp 1s ease-out 0.3s both; } .hero-buttons { animation: fadeInUp 1s ease-out 0.6s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } /* Floating AC Icons */ .floating-icons { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .ac-icon { position: absolute; color: rgba(219, 234, 254, 0.3); font-size: 2rem; animation: floatIcon 15s infinite linear; } @keyframes floatIcon { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } } .btn-custom { padding: 15px 35px; font-weight: 600; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; border: none; margin: 0 10px; } .btn-primary-custom { background: var(--gradient-light); color: var(--dark-blue); } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(96, 165, 250, 0.4); } .btn-secondary-custom { background: transparent; color: white; border: 2px solid white; } .btn-secondary-custom:hover { background: white; color: var(--dark-blue); transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; color: var(--dark-blue); text-align: center; } .section-subtitle { font-size: 1.2rem; color: var(--cool-gray); margin-bottom: 4rem; text-align: center; } /* Services Section */ .services-section { background: white; } .service-card { background: var(--light-gray); border-radius: 20px; padding: 3rem 2rem; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); transition: all 0.4s ease; height: 100%; position: relative; overflow: hidden; border: 1px solid rgba(30, 64, 175, 0.1); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-blue); transform: scaleX(0); transition: transform 0.3s ease; } .service-card:hover::before { transform: scaleX(1); } .service-card:hover { transform: translateY(-15px); box-shadow: 0 25px 80px rgba(30, 64, 175, 0.15); background: white; } .service-icon { width: 80px; height: 80px; background: var(--gradient-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2rem; color: white; transition: transform 0.3s ease; } .service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); } .service-price { font-size: 1.5rem; font-weight: 700; color: var(--success-green); margin-top: 1rem; } /* About Section */ .about-section { background: var(--light-blue); } .about-image { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); position: relative; } .about-image img { width: 100%; height: 500px; object-fit: cover; transition: transform 0.3s ease; } .about-image:hover img { transform: scale(1.05); } .feature-list { list-style: none; padding: 0; } .feature-list li { padding: 12px 0; display: flex; align-items: center; font-size: 1.1rem; } .feature-list li i { color: var(--success-green); margin-right: 15px; font-size: 1.3rem; } /* Booking Section */ .booking-section { background: white; } .booking-form { background: var(--light-gray); border-radius: 20px; padding: 3rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05); border: 1px solid rgba(30, 64, 175, 0.1); } .form-control-custom { background: white; border: 2px solid rgba(30, 64, 175, 0.1); border-radius: 10px; padding: 15px 20px; font-size: 1rem; transition: all 0.3s ease; } .form-control-custom:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25); } .service-type-card { background: white; border: 2px solid rgba(30, 64, 175, 0.1); border-radius: 15px; padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.3s ease; margin-bottom: 1rem; } .service-type-card:hover { border-color: var(--accent-blue); background: var(--light-blue); } .service-type-card.selected { border-color: var(--primary-blue); background: var(--light-blue); } .service-type-icon { font-size: 2rem; color: var(--primary-blue); margin-bottom: 1rem; } /* Emergency Service */ .emergency-section { background: var(--gradient-cool); color: white; } .emergency-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: 20px; padding: 3rem; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); } .emergency-icon { width: 100px; height: 100px; background: var(--danger-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 3rem; color: white; animation: pulse 2s infinite; } /* Pricing Section */ .pricing-section { background: var(--light-blue); } .pricing-card { background: white; border-radius: 20px; padding: 3rem 2rem; text-align: center; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08); transition: all 0.4s ease; position: relative; border: 2px solid transparent; } .pricing-card.featured { border-color: var(--primary-blue); transform: scale(1.05); } .pricing-card:hover { transform: translateY(-10px); box-shadow: 0 25px 80px rgba(30, 64, 175, 0.15); } .pricing-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--gradient-blue); color: white; padding: 8px 25px; border-radius: 25px; font-size: 0.9rem; font-weight: 600; } .pricing-price { font-size: 3rem; font-weight: 700; color: var(--primary-blue); margin: 1rem 0; } .pricing-features { list-style: none; padding: 0; margin: 2rem 0; } .pricing-features li { padding: 8px 0; display: flex; align-items: center; } .pricing-features li i { color: var(--success-green); margin-right: 10px; } /* Testimonials */ .testimonials-section { background: white; } .testimonial-card { background: var(--light-gray); border-radius: 20px; padding: 3rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); margin: 1rem; text-align: center; position: relative; transition: transform 0.3s ease; border: 1px solid rgba(30, 64, 175, 0.1); } .testimonial-card:hover { transform: translateY(-5px); } .testimonial-quote { font-size: 4rem; color: var(--accent-blue); opacity: 0.3; position: absolute; top: 1rem; left: 2rem; } .testimonial-text { font-style: italic; margin-bottom: 2rem; color: var(--cool-gray); font-size: 1.1rem; position: relative; z-index: 2; } .customer-info { display: flex; align-items: center; justify-content: center; } .customer-avatar { width: 60px; height: 60px; border-radius: 50%; margin-right: 1rem; background: var(--gradient-blue); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; } .rating-stars { color: #fbbf24; margin-top: 0.5rem; } /* Contact Section */ .contact-section { background: var(--gradient-cool); color: white; } .contact-form { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: 20px; padding: 3rem; border: 1px solid rgba(255, 255, 255, 0.2); } .contact-info { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border-radius: 20px; padding: 3rem; border: 1px solid rgba(255, 255, 255, 0.1); } .form-control-dark { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; padding: 15px 20px; color: white; font-size: 1rem; } .form-control-dark::placeholder { color: rgba(255, 255, 255, 0.7); } .form-control-dark:focus { background: rgba(255, 255, 255, 0.2); border-color: var(--accent-blue); box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25); color: white; } .contact-item { display: flex; align-items: center; margin-bottom: 2rem; } .contact-icon { width: 60px; height: 60px; background: var(--gradient-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1.5rem; font-size: 1.5rem; color: white; } /* Footer */ .footer-section { background: #0f172a; color: white; padding: 80px 0 40px; } .footer-brand { font-family: 'Roboto Slab', serif; font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; background: var(--gradient-light); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-links a { color: #9ca3af; text-decoration: none; transition: color 0.3s ease; display: block; margin-bottom: 0.5rem; } .footer-links a:hover { color: var(--accent-blue); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--gradient-blue); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(96, 165, 250, 0.4); } .footerp{ color: white !important; } /* Status Badges */ .status-badge { padding: 6px 15px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; } .status-available { background: rgba(16, 185, 129, 0.1); color: var(--success-green); border: 1px solid var(--success-green); } .status-busy { background: rgba(245, 158, 11, 0.1); color: var(--warning-orange); border: 1px solid var(--warning-orange); } .status-emergency { background: rgba(239, 68, 68, 0.1); color: var(--danger-red); border: 1px solid var(--danger-red); } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .section-title { font-size: 2.2rem; } .service-card, .pricing-card { margin-bottom: 2rem; } } /* Service Tracking */ .tracking-card { background: white; border-radius: 15px; padding: 2rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); margin-bottom: 1.5rem; border-left: 5px solid var(--primary-blue); } .tracking-status { display: flex; align-items: center; margin-bottom: 1rem; } .tracking-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-size: 1.2rem; } .status-completed { background: var(--success-green); color: white; } .status-in-progress { background: var(--warning-orange); color: white; } .status-pending { background: var(--cool-gray); color: white; }
JavaScript
// Smooth scrolling for navigation links 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' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 2px 30px rgba(0, 0, 0, 0.15)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.95)'; navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)'; } animateOnScroll(); }); // Emergency call function function callEmergency() { const phoneNumber = '+919876543210'; const message = `? EMERGENCY AC SERVICE REQUEST ?\n\nThis will connect you to our 24/7 emergency hotline.\n\nPhone: ${phoneNumber}\n\nā” Average Response Time: 30 minutes\n? Certified Technicians Available\n? Emergency Service Guarantee\n\nWould you like to call now?`; if (confirm(message)) { window.location.href = `tel:${phoneNumber}`; } } // Service booking function function bookService(serviceType) { alert(`Booking ${serviceType}...\n\nYou will be redirected to the booking form with ${serviceType} pre-selected.\n\nOur team will contact you within 15 minutes to confirm your appointment.`); // Scroll to booking section document.getElementById('booking').scrollIntoView({ behavior: 'smooth' }); // Pre-select service type setTimeout(() => { const serviceCards = document.querySelectorAll('.service-type-card'); serviceCards.forEach(card => { card.classList.remove('selected'); if (card.textContent.includes(serviceType.split(' ')[1] || serviceType)) { card.classList.add('selected'); } }); }, 1000); } // Service type selection function selectServiceType(element, serviceType) { // Remove selected class from all cards document.querySelectorAll('.service-type-card').forEach(card => { card.classList.remove('selected'); }); // Add selected class to clicked card element.classList.add('selected'); // Store selected service type element.closest('form').setAttribute('data-selected-service', serviceType); } // Booking form submission document.getElementById('bookingForm').addEventListener('submit', function(e) { e.preventDefault(); const name = this.querySelector('input[placeholder="Enter your full name"]').value; const phone = this.querySelector('input[type="tel"]').value; const date = this.querySelector('input[type="date"]').value; const selectedService = this.getAttribute('data-selected-service') || 'AC Service'; const timeSlot = this.querySelector('input[name="timeSlot"]:checked')?.value || 'Not specified'; // Generate booking ID const bookingId = 'CT' + Date.now().toString().slice(-6); // Show success message const button = this.querySelector('button[type="submit"]'); const originalText = button.innerHTML; button.innerHTML = '<i class="fas fa-check me-2"></i>Booking Confirmed!'; button.style.background = 'var(--success-green)'; alert(`? BOOKING CONFIRMED! ?\n\nBooking ID: ${bookingId}\nCustomer: ${name}\nService: ${selectedService}\nDate: ${date}\nTime: ${timeSlot}\nPhone: ${phone}\n\nā SMS confirmation sent to ${phone}\n? Email confirmation will follow\n? Technician will be assigned shortly\n\n? For any changes, call: +91 98765 43210\n\nThank you for choosing CoolTech AC Services!`); setTimeout(() => { button.innerHTML = originalText; button.style.background = ''; this.reset(); // Remove selected service type document.querySelectorAll('.service-type-card').forEach(card => { card.classList.remove('selected'); }); }, 3000); }); // Contact form submission document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); const name = this.querySelector('input[placeholder="Your Name"]').value; const email = this.querySelector('input[type="email"]').value; const phone = this.querySelector('input[type="tel"]').value; const service = this.querySelector('select').value; // Show success message const button = this.querySelector('button[type="submit"]'); const originalText = button.textContent; button.textContent = 'Message Sent!'; button.style.background = 'var(--success-green)'; alert(`? MESSAGE SENT SUCCESSFULLY! ?\n\nDear ${name},\n\nThank you for contacting CoolTech AC Services!\n\n? Your inquiry about "${service}" has been received.\n? We will call you at ${phone} within 2 hours.\nāļø Confirmation email sent to ${email}\n\n? Our team works:\nMon-Sat: 8 AM - 8 PM\nEmergency: 24/7\n\nFor urgent issues, call: +91 98765 43210`); setTimeout(() => { button.textContent = originalText; button.style.background = ''; this.reset(); }, 3000); }); // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); // Create floating AC icons dynamically function createFloatingIcon() { const icon = document.createElement('div'); icon.className = 'ac-icon'; const icons = ['fas fa-snowflake', 'fas fa-fan', 'fas fa-thermometer-half', 'fas fa-tools']; icon.innerHTML = `<i class="${icons[Math.floor(Math.random() * icons.length)]}"></i>`; icon.style.left = Math.random() * 100 + '%'; icon.style.animationDelay = Math.random() * 15 + 's'; icon.style.fontSize = (Math.random() * 1.5 + 1.5) + 'rem'; const iconsContainer = document.querySelector('.floating-icons'); if (iconsContainer) { iconsContainer.appendChild(icon); // Remove icon after animation setTimeout(() => { if (icon.parentNode) { icon.parentNode.removeChild(icon); } }, 15000); } } // Create icons periodically setInterval(createFloatingIcon, 2000); // Set minimum date for booking to today const dateInput = document.querySelector('input[type="date"]'); if (dateInput) { const today = new Date().toISOString().split('T')[0]; dateInput.setAttribute('min', today); dateInput.value = today; } }); // Service card hover effects document.querySelectorAll('.service-card').forEach(card => { card.addEventListener('mouseenter', function() { const icon = this.querySelector('.service-icon'); icon.style.transform = 'scale(1.1) rotate(5deg)'; }); card.addEventListener('mouseleave', function() { const icon = this.querySelector('.service-icon'); icon.style.transform = 'scale(1) rotate(0deg)'; }); }); // Pricing card interactions document.querySelectorAll('.pricing-card').forEach(card => { card.addEventListener('mouseenter', function() { if (!this.classList.contains('featured')) { this.style.transform = 'translateY(-10px) scale(1.02)'; } }); card.addEventListener('mouseleave', function() { if (!this.classList.contains('featured')) { this.style.transform = 'translateY(0) scale(1)'; } }); }); // Auto-update service status (demo) function updateServiceStatus() { const statusElements = document.querySelectorAll('.tracking-icon'); // This would typically connect to a real tracking API console.log('Service status updated'); } // Update status every 30 seconds (demo) setInterval(updateServiceStatus, 30000); // WhatsApp integration (demo) function openWhatsApp() { const message = encodeURIComponent("Hi! I need AC service. Please provide more details about your services and pricing."); window.open(`https://wa.me/919876543210?text=${message}`, '_blank'); } // Add WhatsApp button functionality document.addEventListener('DOMContentLoaded', function() { // Add WhatsApp floating button (optional) const whatsappBtn = document.createElement('div'); whatsappBtn.innerHTML = '<i class="fab fa-whatsapp"></i>'; whatsappBtn.style.cssText = ` position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; cursor: pointer; z-index: 1000; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: all 0.3s ease; `; whatsappBtn.addEventListener('click', openWhatsApp); whatsappBtn.addEventListener('mouseenter', function() { this.style.transform = 'scale(1.1)'; }); whatsappBtn.addEventListener('mouseleave', function() { this.style.transform = 'scale(1)'; }); document.body.appendChild(whatsappBtn); });
Output Preview
Desktop
Mobile
Fullscreen