MediCare Clinic 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>MediCare Clinic - Your Health, Our Priority</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body class="bg-gray-900 text-white overflow-x-hidden"> <!-- Emergency Banner --> <!-- <div class="emergency-pulse text-white text-center py-2 text-sm font-semibold"> <i class="fas fa-phone-alt mr-2"></i>Emergency: +1 (555) 911-HELP | 24/7 Available </div> --> <!-- Navigation --> <nav class="fixed w-full z-50 bg-gray-900/95 backdrop-blur-sm border-b border-yellow-400/20"> <div class="container mx-auto px-4 py-4"> <div class="flex justify-between items-center"> <div class="text-2xl font-bold text-yellow-400 animate-pulse-slow"> <i class="fas fa-heartbeat mr-2"></i>MediCare </div> <div class="hidden md:flex space-x-8"> <a href="#home" class="hover:text-yellow-400 transition-colors duration-300">Home</a> <a href="#about" class="hover:text-yellow-400 transition-colors duration-300">About</a> <a href="#services" class="hover:text-yellow-400 transition-colors duration-300">Services</a> <a href="#doctors" class="hover:text-yellow-400 transition-colors duration-300">Doctors</a> <a href="#appointment" class="hover:text-yellow-400 transition-colors duration-300">Appointment</a> <a href="#contact" class="hover:text-yellow-400 transition-colors duration-300">Contact</a> </div> <div class="hidden md:flex"> <button class="bg-yellow-400 text-gray-900 px-6 py-2 rounded-full font-semibold hover:bg-yellow-300 transition-colors duration-300"> Book Appointment </button> </div> <button class="md:hidden text-yellow-400" onclick="toggleMenu()"> <i class="fas fa-bars text-xl"></i> </button> </div> </div> </nav> <!-- Mobile Menu --> <div id="mobileMenu" class="fixed top-0 left-0 w-full h-full bg-gray-900/95 backdrop-blur-sm z-40 transform -translate-x-full transition-transform duration-300 md:hidden"> <div class="flex flex-col items-center justify-center h-full space-y-8 text-xl"> <a href="#home" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Home</a> <a href="#about" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">About</a> <a href="#services" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Services</a> <a href="#doctors" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Doctors</a> <a href="#appointment" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Appointment</a> <a href="#contact" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Contact</a> </div> </div> <!-- Hero Section --> <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-16"> <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"></div> <div class="absolute inset-0 opacity-20"> <img src="https://images.unsplash.com/photo-1606318313647-137d1f3b4d3c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGNsaW5pY3xlbnwwfHwwfHx8MA%3D%3D" alt="Medical Center" class="w-full h-full object-cover"> </div> <div class="container mx-auto px-4 text-center relative z-10"> <div class="animate-slide-up" style="animation-delay: 0.2s;"> <h1 class="text-5xl md:text-7xl font-bold mb-6"> Welcome to <span class="text-yellow-400 typing-animation">MediCare</span> </h1> <p class="text-xl md:text-2xl mb-8 text-gray-300">Your Health, Our Priority - Excellence in Medical Care</p> <div class="space-x-4"> <button class="bg-yellow-400 text-gray-900 px-8 py-4 rounded-full font-semibold hover-scale hover:bg-yellow-300 transition-all duration-300"> Book Appointment </button> <button class="border-2 border-yellow-400 text-yellow-400 px-8 py-4 rounded-full font-semibold hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300"> Our Services </button> </div> </div> </div> <div class="absolute top-32 left-10 text-yellow-400 text-4xl animate-float"> <i class="fas fa-stethoscope"></i> </div> <div class="absolute top-40 right-20 text-yellow-400 text-3xl animate-float heartbeat" style="animation-delay: 1s;"> <i class="fas fa-heartbeat"></i> </div> <div class="absolute bottom-32 left-20 text-yellow-400 text-2xl animate-float" style="animation-delay: 2s;"> <i class="fas fa-user-md"></i> </div> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> <i class="fas fa-chevron-down text-yellow-400 text-2xl"></i> </div> </section> <!-- About Section --> <section id="about" class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-2 gap-12 items-center"> <div class="animate-slide-left"> <h2 class="text-4xl font-bold mb-6 text-yellow-400">About MediCare Clinic</h2> <p class="text-lg mb-6 text-gray-300"> MediCare Clinic has been serving the community for over 25 years, providing comprehensive healthcare services with compassion and excellence. Our state-of-the-art facility and experienced medical professionals ensure you receive the best possible care. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="text-center p-4 bg-gray-700 rounded-lg"> <div class="text-3xl font-bold text-yellow-400">50K+</div> <div class="text-sm text-gray-300">Patients Treated</div> </div> <div class="text-center p-4 bg-gray-700 rounded-lg"> <div class="text-3xl font-bold text-yellow-400">25+</div> <div class="text-sm text-gray-300">Years Experience</div> </div> </div> <button class="bg-yellow-400 text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Learn More </button> </div> <div class="animate-slide-right"> <img src="https://plus.unsplash.com/premium_photo-1682130157004-057c137d96d5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Y2xpbmljfGVufDB8fDB8fHww" alt="Medical Team" class="rounded-lg shadow-2xl hover-scale"> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Our Medical Services</h2> <p class="text-xl text-gray-300">Comprehensive healthcare solutions for all your needs</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="service-card bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1559757175-0eb30cd8c063?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="General Medicine" class="w-full h-48 object-cover"> <div class="service-overlay"> <button class="bg-white text-gray-900 px-6 py-2 rounded-lg font-semibold">Book Now</button> </div> <div class="p-6"> <div class="text-4xl text-yellow-400 mb-4"> <i class="fas fa-stethoscope"></i> </div> <h3 class="text-2xl font-semibold mb-4">General Medicine</h3> <p class="text-gray-300">Comprehensive primary care and preventive medicine services</p> </div> </div> <div class="service-card bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1582750433449-648ed127bb54?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Cardiology" class="w-full h-48 object-cover"> <div class="service-overlay"> <button class="bg-white text-gray-900 px-6 py-2 rounded-lg font-semibold">Book Now</button> </div> <div class="p-6"> <div class="text-4xl text-yellow-400 mb-4 heartbeat"> <i class="fas fa-heartbeat"></i> </div> <h3 class="text-2xl font-semibold mb-4">Cardiology</h3> <p class="text-gray-300">Advanced heart care and cardiovascular disease treatment</p> </div> </div> <div class="service-card bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1606318313647-137d1f3b4d3c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGNsaW5pY3xlbnwwfHwwfHx8MA%3D%3D" alt="Emergency Care" class="w-full h-48 object-cover"> <div class="service-overlay"> <button class="bg-white text-gray-900 px-6 py-2 rounded-lg font-semibold">Emergency</button> </div> <div class="p-6"> <div class="text-4xl text-yellow-400 mb-4"> <i class="fas fa-ambulance"></i> </div> <h3 class="text-2xl font-semibold mb-4">Emergency Care</h3> <p class="text-gray-300">24/7 emergency medical services and urgent care</p> </div> </div> </div> </div> </section> <!-- Doctors Section --> <section id="doctors" class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Meet Our Doctors</h2> <p class="text-xl text-gray-300">Experienced medical professionals dedicated to your health</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-gray-700 rounded-lg overflow-hidden card-hover text-center"> <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Dr. Sarah Johnson" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Dr. Sarah Johnson</h3> <p class="text-yellow-400 mb-2">Chief of Cardiology</p> <p class="text-sm text-gray-300">MD, FACC - 15 years experience</p> <div class="mt-4"> <button class="bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Book Appointment </button> </div> </div> </div> <div class="bg-gray-700 rounded-lg overflow-hidden card-hover text-center"> <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Dr. Michael Chen" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Dr. Michael Chen</h3> <p class="text-yellow-400 mb-2">General Practitioner</p> <p class="text-sm text-gray-300">MD, MRCGP - 12 years experience</p> <div class="mt-4"> <button class="bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Book Appointment </button> </div> </div> </div> <div class="bg-gray-700 rounded-lg overflow-hidden card-hover text-center"> <img src="https://images.unsplash.com/photo-1606318313647-137d1f3b4d3c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGNsaW5pY3xlbnwwfHwwfHx8MA%3D%3D" alt="Dr. Emily Rodriguez" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Dr. Emily Rodriguez</h3> <p class="text-yellow-400 mb-2">Emergency Medicine</p> <p class="text-sm text-gray-300">MD, FACEP - 10 years experience</p> <div class="mt-4"> <button class="bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Book Appointment </button> </div> </div> </div> </div> </div> </section> <!-- Departments Section --> <section class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Medical Departments</h2> <p class="text-xl text-gray-300">Specialized care across multiple medical disciplines</p> </div> <div class="grid md:grid-cols-4 gap-6"> <div class="text-center p-6 bg-gray-800 rounded-lg card-hover"> <div class="text-5xl text-yellow-400 mb-4"> <i class="fas fa-brain"></i> </div> <h3 class="text-xl font-semibold mb-4">Neurology</h3> <p class="text-gray-300 text-sm">Brain and nervous system disorders</p> </div> <div class="text-center p-6 bg-gray-800 rounded-lg card-hover"> <div class="text-5xl text-yellow-400 mb-4"> <i class="fas fa-bone"></i> </div> <h3 class="text-xl font-semibold mb-4">Orthopedics</h3> <p class="text-gray-300 text-sm">Bone, joint, and muscle care</p> </div> <div class="text-center p-6 bg-gray-800 rounded-lg card-hover"> <div class="text-5xl text-yellow-400 mb-4"> <i class="fas fa-lungs"></i> </div> <h3 class="text-xl font-semibold mb-4">Pulmonology</h3> <p class="text-gray-300 text-sm">Respiratory system treatment</p> </div> <div class="text-center p-6 bg-gray-800 rounded-lg card-hover"> <div class="text-5xl text-yellow-400 mb-4"> <i class="fas fa-eye"></i> </div> <h3 class="text-xl font-semibold mb-4">Ophthalmology</h3> <p class="text-gray-300 text-sm">Eye care and vision services</p> </div> </div> </div> </section> <!-- Features Section --> <section class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Why Choose MediCare?</h2> <p class="text-xl text-gray-300">Excellence in healthcare with patient-centered approach</p> </div> <div class="grid md:grid-cols-4 gap-6"> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-award text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">Accredited Care</h4> <p class="text-sm text-gray-300">JCI accredited facility</p> </div> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-clock text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">24/7 Emergency</h4> <p class="text-sm text-gray-300">Round-the-clock care</p> </div> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-microscope text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">Advanced Technology</h4> <p class="text-sm text-gray-300">State-of-the-art equipment</p> </div> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-shield-alt text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">Insurance Accepted</h4> <p class="text-sm text-gray-300">Most insurance plans</p> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Patient Testimonials</h2> <p class="text-xl text-gray-300">Hear from our satisfied patients</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-gray-800 p-6 rounded-lg card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Patient" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">Maria Garcia</h4> <div class="text-yellow-400">★★★★★</div> </div> </div> <p class="text-gray-300">"Exceptional care and compassionate staff. Dr. Johnson saved my life with her expertise in cardiology. Highly recommend MediCare!"</p> </div> <div class="bg-gray-800 p-6 rounded-lg card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Patient" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">Robert Smith</h4> <div class="text-yellow-400">★★★★★</div> </div> </div> <p class="text-gray-300">"Professional, clean, and efficient. The emergency department handled my case perfectly. Thank you to the entire medical team!"</p> </div> <div class="bg-gray-800 p-6 rounded-lg card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Patient" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">Jennifer Lee</h4> <div class="text-yellow-400">★★★★★</div> </div> </div> <p class="text-gray-300">"Outstanding patient care from admission to discharge. The doctors and nurses made me feel comfortable throughout my treatment."</p> </div> </div> </div> </section> <!-- Appointment Section --> <section id="appointment" class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Book an Appointment</h2> <p class="text-xl text-gray-300">Schedule your visit with our medical experts</p> </div> <div class="max-w-2xl mx-auto"> <form class="bg-gray-700 p-8 rounded-lg"> <div class="grid md:grid-cols-2 gap-6 mb-6"> <div> <label class="block text-sm font-medium mb-2">Full Name</label> <input type="text" class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="Your Full Name"> </div> <div> <label class="block text-sm font-medium mb-2">Phone Number</label> <input type="tel" class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="Your Phone"> </div> </div> <div class="grid md:grid-cols-2 gap-6 mb-6"> <div> <label class="block text-sm font-medium mb-2">Department</label> <select class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300"> <option>General Medicine</option> <option>Cardiology</option> <option>Emergency Care</option> <option>Neurology</option> <option>Orthopedics</option> <option>Pulmonology</option> <option>Ophthalmology</option> </select> </div> <div> <label class="block text-sm font-medium mb-2">Preferred Date</label> <input type="date" class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300"> </div> </div> <div class="mb-6"> <label class="block text-sm font-medium mb-2">Reason for Visit</label> <textarea rows="4" class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="Please describe your symptoms or reason for the appointment..."></textarea> </div> <button type="submit" class="w-full bg-yellow-400 text-gray-900 py-4 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Book Appointment </button> </form> </div> </div> </section> <!-- Location Section --> <section class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Visit Our Clinic</h2> <p class="text-xl text-gray-300">Conveniently located in the heart of the city</p> </div> <div class="grid md:grid-cols-2 gap-12 items-center"> <div class="animate-slide-left"> <div class="bg-gray-800 p-8 rounded-lg"> <h3 class="text-2xl font-semibold mb-6 text-yellow-400">MediCare Clinic</h3> <div class="space-y-4"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-yellow-400 mr-4"></i> <span>123 Health Street, Medical District, City 12345</span> </div> <div class="flex items-center"> <i class="fas fa-phone text-yellow-400 mr-4"></i> <span>+1 (555) MEDICARE</span> </div> <div class="flex items-center"> <i class="fas fa-envelope text-yellow-400 mr-4"></i> <span>info@medicareClinic.com</span> </div> <div class="flex items-center"> <i class="fas fa-clock text-yellow-400 mr-4"></i> <span>Mon-Fri: 8AM-8PM, Sat-Sun: 9AM-5PM</span> </div> <div class="flex items-center"> <i class="fas fa-ambulance text-yellow-400 mr-4"></i> <span>Emergency: 24/7 Available</span> </div> </div> </div> </div> <div class="animate-slide-right"> <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Clinic Building" class="w-full h-80 object-cover rounded-lg hover-scale"> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Contact Us</h2> <p class="text-xl text-gray-300">Get in touch for any inquiries or concerns</p> </div> <div class="max-w-2xl mx-auto"> <form class="bg-gray-700 p-8 rounded-lg"> <div class="grid md:grid-cols-2 gap-6 mb-6"> <div> <label class="block text-sm font-medium mb-2">Name</label> <input type="text" class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="Your Name"> </div> <div> <label class="block text-sm font-medium mb-2">Email</label> <input type="email" class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="your@email.com"> </div> </div> <div class="mb-6"> <label class="block text-sm font-medium mb-2">Inquiry Type</label> <select class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300"> <option>General Inquiry</option> <option>Appointment Question</option> <option>Insurance Information</option> <option>Medical Records</option> <option>Billing Question</option> <option>Feedback/Complaint</option> </select> </div> <div class="mb-6"> <label class="block text-sm font-medium mb-2">Message</label> <textarea rows="5" class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="Your message..."></textarea> </div> <button type="submit" class="w-full bg-yellow-400 text-gray-900 py-4 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Send Message </button> </form> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 py-12 border-t border-gray-700"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-4 gap-8"> <div> <div class="text-2xl font-bold text-yellow-400 mb-4"> <i class="fas fa-heartbeat mr-2"></i>MediCare </div> <p class="text-gray-300 mb-4">Providing exceptional healthcare services with compassion and excellence for over 25 years.</p> <div class="flex space-x-4"> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-facebook text-xl"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-twitter text-xl"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-linkedin text-xl"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-youtube text-xl"></i> </a> </div> </div> <div> <h4 class="text-lg font-semibold mb-4 text-yellow-400">Quick Links</h4> <ul class="space-y-2"> <li><a href="#home" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Home</a></li> <li><a href="#about" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">About</a></li> <li><a href="#services" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Services</a></li> <li><a href="#doctors" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Doctors</a></li> </ul> </div> <div> <h4 class="text-lg font-semibold mb-4 text-yellow-400">Services</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">General Medicine</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Cardiology</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Emergency Care</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Neurology</a></li> </ul> </div> <div> <h4 class="text-lg font-semibold mb-4 text-yellow-400">Emergency Contact</h4> <ul class="space-y-2 text-gray-300"> <li><i class="fas fa-map-marker-alt text-yellow-400 mr-2"></i>123 Health Street</li> <li><i class="fas fa-phone text-yellow-400 mr-2"></i>+1 (555) MEDICARE</li> <li><i class="fas fa-ambulance text-yellow-400 mr-2"></i>Emergency: 911</li> <li><i class="fas fa-clock text-yellow-400 mr-2"></i>24/7 Emergency Care</li> </ul> </div> </div> <div class="border-t border-gray-700 mt-8 pt-8 text-center"> <p class="text-gray-300">© 2024 MediCare Clinic. All rights reserved. Your Health, Our Priority.</p> </div> </div> </footer> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'970b88b9603c3af2',t:'MTc1NTQ1ODQ4Mi4wMDAwMDA='};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; } .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-slide-up { animation: slideUp 0.8s ease-out forwards; opacity: 0; transform: translateY(50px); } .animate-slide-left { animation: slideLeft 0.8s ease-out forwards; opacity: 0; transform: translateX(-50px); } .animate-slide-right { animation: slideRight 0.8s ease-out forwards; opacity: 0; transform: translateX(50px); } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } @keyframes slideLeft { to { opacity: 1; transform: translateX(0); } } @keyframes slideRight { to { opacity: 1; transform: translateX(0); } } .gradient-bg { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); } .hover-scale { transition: transform 0.3s ease; } .hover-scale:hover { transform: scale(1.05); } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(251, 191, 36, 0.3); } .typing-animation { overflow: hidden; border-right: 3px solid #fbbf24; white-space: nowrap; animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: #fbbf24; } } .service-card { position: relative; overflow: hidden; } .service-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(245, 158, 11, 0.9)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .service-card:hover .service-overlay { opacity: 1; } .heartbeat { animation: heartbeat 2s ease-in-out infinite; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .emergency-pulse { animation: emergencyPulse 1.5s ease-in-out infinite; } @keyframes emergencyPulse { 0%, 100% { background-color: #dc2626; } 50% { background-color: #ef4444; } }
JavaScript
// Mobile menu toggle function toggleMenu() { const menu = document.getElementById('mobileMenu'); menu.classList.toggle('-translate-x-full'); } // 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' }); } }); }); // 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.style.animationPlayState = 'running'; } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.animate-slide-up, .animate-slide-left, .animate-slide-right').forEach(el => { el.style.animationPlayState = 'paused'; observer.observe(el); }); // Form submissions document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); if (this.querySelector('textarea[placeholder*="symptoms"]')) { alert('Thank you for booking! We\'ll contact you shortly to confirm your appointment.'); } else { alert('Thank you for your message! We\'ll get back to you within 24 hours.'); } this.reset(); }); }); // Add scroll effect to navbar window.addEventListener('scroll', function() { const navbar = document.querySelector('nav'); if (window.scrollY > 100) { navbar.classList.add('bg-gray-900'); } else { navbar.classList.remove('bg-gray-900'); } }); // Service booking functionality document.querySelectorAll('.service-overlay button').forEach(button => { button.addEventListener('click', function() { if (this.textContent.includes('Emergency')) { alert('For medical emergencies, please call 911 or visit our emergency department immediately!'); } else { document.querySelector('#appointment').scrollIntoView({ behavior: 'smooth' }); } }); }); // Doctor appointment booking document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('Book Appointment')) { button.addEventListener('click', function() { document.querySelector('#appointment').scrollIntoView({ behavior: 'smooth' }); }); } }); // Our Services button functionality document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('Our Services')) { button.addEventListener('click', function() { document.querySelector('#services').scrollIntoView({ behavior: 'smooth' }); }); } }); // Emergency banner click document.querySelector('.emergency-pulse').addEventListener('click', function() { alert('Emergency Line: +1 (555) 911-HELP\n\nFor life-threatening emergencies, call 911 immediately!'); }); // Add loading animation window.addEventListener('load', function() { document.body.classList.add('loaded'); });
Output Preview
Desktop
Mobile
Fullscreen