WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dr. Ahmet Yılmaz - Cardiology Specialist</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> /* Custom animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.8s ease-out forwards; } .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } /* Hamburger menu animation */ .hamburger span { display: block; width: 28px; height: 3px; margin-bottom: 5px; background: #fff; transition: all 0.3s ease-in-out; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Navbar scroll effect */ .navbar { transition: all 0.3s ease; } .navbar.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .navbar.scrolled .nav-link { color: #333; } .navbar.scrolled .logo-text { color: #1a365d; } /* Service card hover effect */ .service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Testimonial slider */ .testimonial-slide { transition: all 0.5s ease; } .active-slide { opacity: 1; transform: scale(1); z-index: 10; } .inactive-slide { opacity: 0; transform: scale(0.8); z-index: 1; } </style> </head> <body class="font-sans bg-gray-50"> <!-- Header & Navigation --> <header class="fixed w-full z-50"> <nav class="navbar bg-gradient-to-r from-blue-900 to-blue-700 text-white"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <!-- Logo & Doctor Info --> <div class="flex items-center space-x-2"> <i class="fas fa-heartbeat text-3xl text-red-500"></i> <div> <h1 class="logo-text text-xl font-bold">Dr. Ahmet Yılmaz</h1> <p class="text-xs opacity-80">Cardiology Specialist</p> </div> </div> <!-- Desktop Navigation --> <div class="hidden md:flex space-x-8"> <a href="#home" class="nav-link hover:text-red-300 transition">Home</a> <a href="#about" class="nav-link hover:text-red-300 transition">About</a> <a href="#services" class="nav-link hover:text-red-300 transition">Treatments</a> <a href="#patient-services" class="nav-link hover:text-red-300 transition">Patient Services</a> <a href="#blog" class="nav-link hover:text-red-300 transition">Blog</a> <a href="#contact" class="nav-link hover:text-red-300 transition">Contact</a> </div> <!-- Mobile Menu Button --> <div class="md:hidden"> <button class="hamburger focus:outline-none"> <span></span> <span></span> <span></span> </button> </div> </div> <!-- Mobile Menu --> <div class="mobile-menu hidden md:hidden bg-blue-800"> <div class="container mx-auto px-4 py-2 flex flex-col"> <a href="#home" class="py-2 border-b border-blue-700 hover:text-red-300 transition">Home</a> <a href="#about" class="py-2 border-b border-blue-700 hover:text-red-300 transition">About</a> <a href="#services" class="py-2 border-b border-blue-700 hover:text-red-300 transition">Treatments</a> <a href="#patient-services" class="py-2 border-b border-blue-700 hover:text-red-300 transition">Patient Services</a> <a href="#blog" class="py-2 border-b border-blue-700 hover:text-red-300 transition">Blog</a> <a href="#contact" class="py-2 hover:text-red-300 transition">Contact</a> </div> </div> </nav> </header> <!-- Hero Section --> <section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 bg-blue-900 text-white relative overflow-hidden"> <div class="absolute inset-0 bg-black opacity-40 z-0"></div> <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Heart health background" class="absolute inset-0 w-full h-full object-cover z-0"> <div class="container mx-auto px-4 relative z-10"> <div class="max-w-2xl"> <h1 class="text-4xl md:text-5xl font-bold mb-4 fade-in">Your Heart, Our Priority</h1> <p class="text-xl md:text-2xl mb-8 opacity-90 fade-in delay-1">Expert cardiology care with trust, compassion, and technology</p> <div class="flex flex-col sm:flex-row gap-4 fade-in delay-2"> <a href="#appointment" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 text-center">Book an Appointment</a> <a href="#services" class="bg-white hover:bg-gray-100 text-blue-900 px-6 py-3 rounded-lg font-medium transition duration-300 text-center">Learn More</a> </div> </div> </div> </section> <!-- About the Doctor --> <section id="about" class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">About Dr. Ahmet Yılmaz</h2> <div class="w-20 h-1 bg-red-600 mx-auto"></div> </div> <div class="flex flex-col md:flex-row gap-12 items-center"> <div class="md:w-1/3 fade-in"> <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dr. Ahmet Yılmaz" class="rounded-lg shadow-xl w-full h-auto max-w-md mx-auto"> </div> <div class="md:w-2/3 fade-in delay-1"> <h3 class="text-2xl font-bold text-blue-900 mb-4">Board Certified Cardiologist</h3> <p class="text-gray-700 mb-6">Dr. Ahmet Yılmaz is a highly respected cardiologist with over 15 years of experience in diagnosing and treating heart conditions. His patient-centered approach combines cutting-edge technology with compassionate care to deliver the best possible outcomes.</p> <div class="mb-6"> <h4 class="text-xl font-semibold text-blue-900 mb-2">Education & Certifications</h4> <ul class="space-y-2"> <li class="flex items-start"> <i class="fas fa-graduation-cap text-red-600 mt-1 mr-2"></i> <span>MD, Istanbul University Faculty of Medicine</span> </li> <li class="flex items-start"> <i class="fas fa-certificate text-red-600 mt-1 mr-2"></i> <span>Board Certified in Cardiology</span> </li> <li class="flex items-start"> <i class="fas fa-award text-red-600 mt-1 mr-2"></i> <span>Fellow of the European Society of Cardiology</span> </li> </ul> </div> <div> <h4 class="text-xl font-semibold text-blue-900 mb-2">Hospital Affiliations</h4> <ul class="space-y-2"> <li class="flex items-start"> <i class="fas fa-hospital text-red-600 mt-1 mr-2"></i> <span>Istanbul Heart Hospital - Chief of Cardiology</span> </li> <li class="flex items-start"> <i class="fas fa-hospital text-red-600 mt-1 mr-2"></i> <span>American Hospital Istanbul - Consulting Physician</span> </li> </ul> </div> </div> </div> </div> </section> <!-- Services / Treatments Section --> <section id="services" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Our Cardiology Services</h2> <p class="text-gray-600 max-w-2xl mx-auto">Comprehensive cardiac care tailored to your needs</p> <div class="w-20 h-1 bg-red-600 mx-auto"></div> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Service 1 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-heartbeat text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Echocardiography</h3> <p class="text-gray-600 text-center">Advanced ultrasound imaging to evaluate your heart's structure and function.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> <!-- Service 2 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in delay-1"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-procedures text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Angiography</h3> <p class="text-gray-600 text-center">Minimally invasive imaging to visualize blood vessels and identify blockages.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> <!-- Service 3 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in delay-2"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-heart text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Hypertension Care</h3> <p class="text-gray-600 text-center">Personalized treatment plans to manage high blood pressure effectively.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> <!-- Service 4 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-user-md text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Heart Surgery Consultation</h3> <p class="text-gray-600 text-center">Expert evaluation and guidance for cardiac surgical interventions.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> <!-- Service 5 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in delay-1"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-heartbeat text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Stress Testing</h3> <p class="text-gray-600 text-center">Evaluating your heart's performance under controlled physical stress.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> <!-- Service 6 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in delay-2"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-heartbeat text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Preventive Cardiology</h3> <p class="text-gray-600 text-center">Comprehensive programs to reduce your risk of heart disease.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> </div> </div> </section> <!-- Patient Testimonials --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Patient Success Stories</h2> <p class="text-gray-600 max-w-2xl mx-auto">Hear from our valued patients about their experiences</p> <div class="w-20 h-1 bg-red-600 mx-auto"></div> </div> <div class="relative max-w-4xl mx-auto"> <div class="testimonial-slider overflow-hidden"> <div class="testimonial-slide active-slide p-6 bg-gray-50 rounded-lg shadow-md transition duration-500"> <div class="flex flex-col md:flex-row items-center"> <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Patient" class="w-24 h-24 rounded-full object-cover mb-4 md:mb-0 md:mr-6"> <div> <p class="text-gray-700 italic mb-4">"Dr. Yılmaz's expertise and compassionate care helped me through my recovery after bypass surgery. His attention to detail and clear explanations made me feel confident in my treatment every step of the way."</p> <h4 class="font-bold text-blue-900">Mehmet Kaya</h4> <p class="text-sm text-gray-600">Hypertension Patient</p> </div> </div> </div> <div class="testimonial-slide inactive-slide absolute inset-0 p-6 bg-gray-50 rounded-lg shadow-md transition duration-500"> <div class="flex flex-col md:flex-row items-center"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Patient" class="w-24 h-24 rounded-full object-cover mb-4 md:mb-0 md:mr-6"> <div> <p class="text-gray-700 italic mb-4">"After being diagnosed with arrhythmia, I was terrified. Dr. Yılmaz not only provided excellent medical care but also took the time to educate me about my condition. My quality of life has improved dramatically."</p> <h4 class="font-bold text-blue-900">Ayşe Demir</h4> <p class="text-sm text-gray-600">Arrhythmia Patient</p> </div> </div> </div> <div class="testimonial-slide inactive-slide absolute inset-0 p-6 bg-gray-50 rounded-lg shadow-md transition duration-500"> <div class="flex flex-col md:flex-row items-center"> <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Patient" class="w-24 h-24 rounded-full object-cover mb-4 md:mb-0 md:mr-6"> <div> <p class="text-gray-700 italic mb-4">"The preventive cardiology program at Dr. Yılmaz's clinic helped me identify risk factors I didn't know I had. With his guidance, I've made lifestyle changes that have given me more energy and peace of mind."</p> <h4 class="font-bold text-blue-900">Emre Şahin</h4> <p class="text-sm text-gray-600">Preventive Care Patient</p> </div> </div> </div> </div> <div class="flex justify-center mt-8 space-x-2"> <button class="testimonial-dot w-3 h-3 rounded-full bg-blue-300 focus:outline-none active-dot"></button> <button class="testimonial-dot w-3 h-3 rounded-full bg-blue-300 focus:outline-none"></button> <button class="testimonial-dot w-3 h-3 rounded-full bg-blue-300 focus:outline-none"></button> </div> </div> </div> </section> <!-- Blog Section --> <section id="blog" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Cardiology Insights</h2> <p class="text-gray-600 max-w-2xl mx-auto">Latest articles on heart health and wellness</p> <div class="w-20 h-1 bg-red-600 mx-auto"></div> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Blog Post 1 --> <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg fade-in"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Heart Health" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-sm text-blue-600 mb-2">June 15, 2023</div> <h3 class="text-xl font-bold text-blue-900 mb-3">Understanding High Blood Pressure</h3> <p class="text-gray-600 mb-4">Learn about the silent killer that affects millions and how to manage it effectively through lifestyle changes and medical interventions.</p> <a href="#" class="text-red-600 hover:text-red-800 font-medium flex items-center"> Read More <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> <!-- Blog Post 2 --> <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg fade-in delay-1"> <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Healthy Heart" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-sm text-blue-600 mb-2">May 28, 2023</div> <h3 class="text-xl font-bold text-blue-900 mb-3">10 Foods for a Healthy Heart</h3> <p class="text-gray-600 mb-4">Discover the top 10 foods that can help improve your cardiovascular health and reduce your risk of heart disease.</p> <a href="#" class="text-red-600 hover:text-red-800 font-medium flex items-center"> Read More <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> <!-- Blog Post 3 --> <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg fade-in delay-2"> <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Exercise for Heart" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-sm text-blue-600 mb-2">April 10, 2023</div> <h3 class="text-xl font-bold text-blue-900 mb-3">The Best Exercises for Heart Health</h3> <p class="text-gray-600 mb-4">Explore the most effective types of exercise for improving cardiovascular fitness and maintaining a healthy heart at any age.</p> <a href="#" class="text-red-600 hover:text-red-800 font-medium flex items-center"> Read More <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> </div> <div class="text-center mt-10 fade-in"> <a href="#" class="inline-block bg-blue-900 hover:bg-blue-800 text-white px-6 py-3 rounded-lg font-medium transition duration-300"> View All Articles </a> </div> </div> </section> <!-- Appointment Form --> <section id="appointment" class="py-16 bg-blue-900 text-white"> <div class="container mx-auto px-4"> <div class="max-w-4xl mx-auto"> <div class="text-center mb-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Book an Appointment</h2> <p class="opacity-90 max-w-2xl mx-auto">Schedule your consultation with Dr. Yılmaz for personalized cardiac care</p> <div class="w-20 h-1 bg-red-600 mx-auto"></div> </div> <form class="bg-white rounded-lg shadow-xl p-6 md:p-8 text-gray-800 fade-in delay-1"> <div class="grid md:grid-cols-2 gap-6"> <div> <label for="name" class="block text-sm font-medium mb-1">Full Name</label> <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> </div> <div> <label for="email" class="block text-sm font-medium mb-1">Email Address</label> <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> </div> <div> <label for="phone" class="block text-sm font-medium mb-1">Phone Number</label> <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> </div> <div> <label for="date" class="block text-sm font-medium mb-1">Preferred Date</label> <input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> </div> <div class="md:col-span-2"> <label for="message" class="block text-sm font-medium mb-1">Reason for Visit</label> <input id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"/> </div> </div> <div class="mt-6"> <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 transform hover:scale-105"> Request Appointment </button> </div> </form> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white pt-16 pb-8"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> <!-- Contact Info --> <div> <h3 class="text-xl font-bold mb-4">Contact Us</h3> <ul class="space-y-3"> <li class="flex items-start"> <i class="fas fa-map-marker-alt mt-1 mr-3 text-red-600"></i> <span>123 Heart Street, Istanbul, Turkey</span> </li> <li class="flex items-start"> <i class="fas fa-phone-alt mt-1 mr-3 text-red-600"></i> <span>+90 212 123 4567</span> </li> <li class="flex items-start"> <i class="fas fa-envelope mt-1 mr-3 text-red-600"></i> <span>info@dryilmazcardiology.com</span> </li> </ul> </div> <!-- Quick Links --> <div> <h3 class="text-xl font-bold mb-4">Quick Links</h3> <ul class="space-y-3"> <li><a href="#home" class="hover:text-red-400 transition">Home</a></li> <li><a href="#about" class="hover:text-red-400 transition">About Dr. Yılmaz</a></li> <li><a href="#services" class="hover:text-red-400 transition">Services</a></li> <li><a href="#patient-services" class="hover:text-red-400 transition">Patient Services</a></li> <li><a href="#blog" class="hover:text-red-400 transition">Blog</a></li> <li><a href="#contact" class="hover:text-red-400 transition">Contact</a></li> </ul> </div> <!-- Hours --> <div> <h3 class="text-xl font-bold mb-4">Clinic Hours</h3> <ul class="space-y-3"> <li class="flex justify-between"> <span>Monday - Friday</span> <span>9:00 AM - 5:00 PM</span> </li> <li class="flex justify-between"> <span>Saturday</span> <span>10:00 AM - 2:00 PM</span> </li> <li class="flex justify-between"> <span>Sunday</span> <span>Closed</span> </li> </ul> </div> <!-- Social Media --> <div> <h3 class="text-xl font-bold mb-4">Connect With Us</h3> <div class="flex space-x-4 mb-6"> <a href="#" class="w-10 h-10 bg-blue-800 rounded-full flex items-center justify-center hover:bg-blue-700 transition"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="w-10 h-10 bg-blue-400 rounded-full flex items-center justify-center hover:bg-blue-500 transition"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-10 h-10 bg-pink-600 rounded-full flex items-center justify-center hover:bg-pink-700 transition"> <i class="fab fa-instagram"></i> </a> <a href="#" class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center hover:bg-blue-700 transition"> <i class="fab fa-linkedin-in"></i> </a> </div> <div class="bg-gray-800 rounded-lg p-4"> <h4 class="font-medium mb-2">Emergency Contact</h4> <p class="text-sm text-gray-400">For urgent cardiac concerns outside clinic hours, please call our 24/7 emergency line:</p> <div class="flex items-center mt-2"> <i class="fas fa-phone-alt text-red-600 mr-2"></i> <span class="font-bold">+90 212 987 6543</span> </div> </div> </div> </div> <div class="border-t border-gray-800 pt-8 text-center text-gray-400"> <p>© 2023 Dr. Ahmet Yılmaz Cardiology Clinic. All rights reserved.</p> <div class="flex justify-center space-x-4 mt-4"> <a href="#" class="hover:text-white transition">Privacy Policy</a> <a href="#" class="hover:text-white transition">Terms of Service</a> </div> </div> </div> </footer> <script> // Mobile menu toggle const hamburger = document.querySelector('.hamburger'); const mobileMenu = document.querySelector('.mobile-menu'); hamburger.addEventListener('click', () => { hamburger.classList.toggle('active'); mobileMenu.classList.toggle('hidden'); }); // Close mobile menu when clicking a link document.querySelectorAll('.mobile-menu a').forEach(link => { link.addEventListener('click', () => { hamburger.classList.remove('active'); mobileMenu.classList.add('hidden'); }); }); // Navbar scroll effect const navbar = document.querySelector('.navbar'); window.addEventListener('scroll', () => { if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Testimonial slider const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const dots = document.querySelectorAll('.testimonial-dot'); let currentSlide = 0; function showSlide(index) { testimonialSlides.forEach((slide, i) => { if (i === index) { slide.classList.remove('inactive-slide'); slide.classList.add('active-slide'); dots[i].classList.add('bg-blue-600'); dots[i].classList.remove('bg-blue-300'); } else { slide.classList.remove('active-slide'); slide.classList.add('inactive-slide'); dots[i].classList.remove('bg-blue-600'); dots[i].classList.add('bg-blue-300'); } }); } dots.forEach((dot, index) => { dot.addEventListener('click', () => { currentSlide = index; showSlide(currentSlide); }); }); // Auto slide change setInterval(() => { currentSlide = (currentSlide + 1) % testimonialSlides.length; showSlide(currentSlide); }, 5000); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Animation on scroll const fadeElements = document.querySelectorAll('.fade-in'); function checkFade() { fadeElements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementTop < windowHeight - 100) { element.style.opacity = '1'; } }); } window.addEventListener('scroll', checkFade); window.addEventListener('load', checkFade); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dr. Ahmet Yılmaz - Cardiology Specialist</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> /* Custom animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.8s ease-out forwards; } .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } /* Hamburger menu animation */ .hamburger span { display: block; width: 28px; height: 3px; margin-bottom: 5px; background: #fff; transition: all 0.3s ease-in-out; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Navbar scroll effect */ .navbar { transition: all 0.3s ease; } .navbar.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .navbar.scrolled .nav-link { color: #333; } .navbar.scrolled .logo-text { color: #1a365d; } /* Service card hover effect */ .service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Testimonial slider */ .testimonial-slide { transition: all 0.5s ease; } .active-slide { opacity: 1; transform: scale(1); z-index: 10; } .inactive-slide { opacity: 0; transform: scale(0.8); z-index: 1; } </style> </head> <body class="font-sans bg-gray-50"> <!-- Header & Navigation --> <header class="fixed w-full z-50"> <nav class="navbar bg-gradient-to-r from-blue-900 to-blue-700 text-white"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <!-- Logo & Doctor Info --> <div class="flex items-center space-x-2"> <i class="fas fa-heartbeat text-3xl text-red-500"></i> <div> <h1 class="logo-text text-xl font-bold">Dr. Ahmet Yılmaz</h1> <p class="text-xs opacity-80">Cardiology Specialist</p> </div> </div> <!-- Desktop Navigation --> <div class="hidden md:flex space-x-8"> <a href="#home" class="nav-link hover:text-red-300 transition">Home</a> <a href="#about" class="nav-link hover:text-red-300 transition">About</a> <a href="#services" class="nav-link hover:text-red-300 transition">Treatments</a> <a href="#patient-services" class="nav-link hover:text-red-300 transition">Patient Services</a> <a href="#blog" class="nav-link hover:text-red-300 transition">Blog</a> <a href="#contact" class="nav-link hover:text-red-300 transition">Contact</a> </div> <!-- Mobile Menu Button --> <div class="md:hidden"> <button class="hamburger focus:outline-none"> <span></span> <span></span> <span></span> </button> </div> </div> <!-- Mobile Menu --> <div class="mobile-menu hidden md:hidden bg-blue-800"> <div class="container mx-auto px-4 py-2 flex flex-col"> <a href="#home" class="py-2 border-b border-blue-700 hover:text-red-300 transition">Home</a> <a href="#about" class="py-2 border-b border-blue-700 hover:text-red-300 transition">About</a> <a href="#services" class="py-2 border-b border-blue-700 hover:text-red-300 transition">Treatments</a> <a href="#patient-services" class="py-2 border-b border-blue-700 hover:text-red-300 transition">Patient Services</a> <a href="#blog" class="py-2 border-b border-blue-700 hover:text-red-300 transition">Blog</a> <a href="#contact" class="py-2 hover:text-red-300 transition">Contact</a> </div> </div> </nav> </header> <!-- Hero Section --> <section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 bg-blue-900 text-white relative overflow-hidden"> <div class="absolute inset-0 bg-black opacity-40 z-0"></div> <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Heart health background" class="absolute inset-0 w-full h-full object-cover z-0"> <div class="container mx-auto px-4 relative z-10"> <div class="max-w-2xl"> <h1 class="text-4xl md:text-5xl font-bold mb-4 fade-in">Your Heart, Our Priority</h1> <p class="text-xl md:text-2xl mb-8 opacity-90 fade-in delay-1">Expert cardiology care with trust, compassion, and technology</p> <div class="flex flex-col sm:flex-row gap-4 fade-in delay-2"> <a href="#appointment" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 text-center">Book an Appointment</a> <a href="#services" class="bg-white hover:bg-gray-100 text-blue-900 px-6 py-3 rounded-lg font-medium transition duration-300 text-center">Learn More</a> </div> </div> </div> </section> <!-- About the Doctor --> <section id="about" class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">About Dr. Ahmet Yılmaz</h2> <div class="w-20 h-1 bg-red-600 mx-auto"></div> </div> <div class="flex flex-col md:flex-row gap-12 items-center"> <div class="md:w-1/3 fade-in"> <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dr. Ahmet Yılmaz" class="rounded-lg shadow-xl w-full h-auto max-w-md mx-auto"> </div> <div class="md:w-2/3 fade-in delay-1"> <h3 class="text-2xl font-bold text-blue-900 mb-4">Board Certified Cardiologist</h3> <p class="text-gray-700 mb-6">Dr. Ahmet Yılmaz is a highly respected cardiologist with over 15 years of experience in diagnosing and treating heart conditions. His patient-centered approach combines cutting-edge technology with compassionate care to deliver the best possible outcomes.</p> <div class="mb-6"> <h4 class="text-xl font-semibold text-blue-900 mb-2">Education & Certifications</h4> <ul class="space-y-2"> <li class="flex items-start"> <i class="fas fa-graduation-cap text-red-600 mt-1 mr-2"></i> <span>MD, Istanbul University Faculty of Medicine</span> </li> <li class="flex items-start"> <i class="fas fa-certificate text-red-600 mt-1 mr-2"></i> <span>Board Certified in Cardiology</span> </li> <li class="flex items-start"> <i class="fas fa-award text-red-600 mt-1 mr-2"></i> <span>Fellow of the European Society of Cardiology</span> </li> </ul> </div> <div> <h4 class="text-xl font-semibold text-blue-900 mb-2">Hospital Affiliations</h4> <ul class="space-y-2"> <li class="flex items-start"> <i class="fas fa-hospital text-red-600 mt-1 mr-2"></i> <span>Istanbul Heart Hospital - Chief of Cardiology</span> </li> <li class="flex items-start"> <i class="fas fa-hospital text-red-600 mt-1 mr-2"></i> <span>American Hospital Istanbul - Consulting Physician</span> </li> </ul> </div> </div> </div> </div> </section> <!-- Services / Treatments Section --> <section id="services" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Our Cardiology Services</h2> <p class="text-gray-600 max-w-2xl mx-auto">Comprehensive cardiac care tailored to your needs</p> <div class="w-20 h-1 bg-red-600 mx-auto"></div> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Service 1 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-heartbeat text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Echocardiography</h3> <p class="text-gray-600 text-center">Advanced ultrasound imaging to evaluate your heart's structure and function.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> <!-- Service 2 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in delay-1"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-procedures text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Angiography</h3> <p class="text-gray-600 text-center">Minimally invasive imaging to visualize blood vessels and identify blockages.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> <!-- Service 3 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in delay-2"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-heart text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Hypertension Care</h3> <p class="text-gray-600 text-center">Personalized treatment plans to manage high blood pressure effectively.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> <!-- Service 4 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-user-md text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Heart Surgery Consultation</h3> <p class="text-gray-600 text-center">Expert evaluation and guidance for cardiac surgical interventions.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> <!-- Service 5 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in delay-1"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-heartbeat text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Stress Testing</h3> <p class="text-gray-600 text-center">Evaluating your heart's performance under controlled physical stress.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> <!-- Service 6 --> <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in delay-2"> <div class="p-6"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto"> <i class="fas fa-heartbeat text-2xl text-red-600"></i> </div> <h3 class="text-xl font-bold text-center text-blue-900 mb-3">Preventive Cardiology</h3> <p class="text-gray-600 text-center">Comprehensive programs to reduce your risk of heart disease.</p> </div> <div class="px-6 py-3 bg-gray-50 text-center"> <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</a> </div> </div> </div> </div> </section> <!-- Patient Testimonials --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Patient Success Stories</h2> <p class="text-gray-600 max-w-2xl mx-auto">Hear from our valued patients about their experiences</p> <div class="w-20 h-1 bg-red-600 mx-auto"></div> </div> <div class="relative max-w-4xl mx-auto"> <div class="testimonial-slider overflow-hidden"> <div class="testimonial-slide active-slide p-6 bg-gray-50 rounded-lg shadow-md transition duration-500"> <div class="flex flex-col md:flex-row items-center"> <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Patient" class="w-24 h-24 rounded-full object-cover mb-4 md:mb-0 md:mr-6"> <div> <p class="text-gray-700 italic mb-4">"Dr. Yılmaz's expertise and compassionate care helped me through my recovery after bypass surgery. His attention to detail and clear explanations made me feel confident in my treatment every step of the way."</p> <h4 class="font-bold text-blue-900">Mehmet Kaya</h4> <p class="text-sm text-gray-600">Hypertension Patient</p> </div> </div> </div> <div class="testimonial-slide inactive-slide absolute inset-0 p-6 bg-gray-50 rounded-lg shadow-md transition duration-500"> <div class="flex flex-col md:flex-row items-center"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Patient" class="w-24 h-24 rounded-full object-cover mb-4 md:mb-0 md:mr-6"> <div> <p class="text-gray-700 italic mb-4">"After being diagnosed with arrhythmia, I was terrified. Dr. Yılmaz not only provided excellent medical care but also took the time to educate me about my condition. My quality of life has improved dramatically."</p> <h4 class="font-bold text-blue-900">Ayşe Demir</h4> <p class="text-sm text-gray-600">Arrhythmia Patient</p> </div> </div> </div> <div class="testimonial-slide inactive-slide absolute inset-0 p-6 bg-gray-50 rounded-lg shadow-md transition duration-500"> <div class="flex flex-col md:flex-row items-center"> <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Patient" class="w-24 h-24 rounded-full object-cover mb-4 md:mb-0 md:mr-6"> <div> <p class="text-gray-700 italic mb-4">"The preventive cardiology program at Dr. Yılmaz's clinic helped me identify risk factors I didn't know I had. With his guidance, I've made lifestyle changes that have given me more energy and peace of mind."</p> <h4 class="font-bold text-blue-900">Emre Şahin</h4> <p class="text-sm text-gray-600">Preventive Care Patient</p> </div> </div> </div> </div> <div class="flex justify-center mt-8 space-x-2"> <button class="testimonial-dot w-3 h-3 rounded-full bg-blue-300 focus:outline-none active-dot"></button> <button class="testimonial-dot w-3 h-3 rounded-full bg-blue-300 focus:outline-none"></button> <button class="testimonial-dot w-3 h-3 rounded-full bg-blue-300 focus:outline-none"></button> </div> </div> </div> </section> <!-- Blog Section --> <section id="blog" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Cardiology Insights</h2> <p class="text-gray-600 max-w-2xl mx-auto">Latest articles on heart health and wellness</p> <div class="w-20 h-1 bg-red-600 mx-auto"></div> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Blog Post 1 --> <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg fade-in"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Heart Health" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-sm text-blue-600 mb-2">June 15, 2023</div> <h3 class="text-xl font-bold text-blue-900 mb-3">Understanding High Blood Pressure</h3> <p class="text-gray-600 mb-4">Learn about the silent killer that affects millions and how to manage it effectively through lifestyle changes and medical interventions.</p> <a href="#" class="text-red-600 hover:text-red-800 font-medium flex items-center"> Read More <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> <!-- Blog Post 2 --> <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg fade-in delay-1"> <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Healthy Heart" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-sm text-blue-600 mb-2">May 28, 2023</div> <h3 class="text-xl font-bold text-blue-900 mb-3">10 Foods for a Healthy Heart</h3> <p class="text-gray-600 mb-4">Discover the top 10 foods that can help improve your cardiovascular health and reduce your risk of heart disease.</p> <a href="#" class="text-red-600 hover:text-red-800 font-medium flex items-center"> Read More <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> <!-- Blog Post 3 --> <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg fade-in delay-2"> <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Exercise for Heart" class="w-full h-48 object-cover"> <div class="p-6"> <div class="text-sm text-blue-600 mb-2">April 10, 2023</div> <h3 class="text-xl font-bold text-blue-900 mb-3">The Best Exercises for Heart Health</h3> <p class="text-gray-600 mb-4">Explore the most effective types of exercise for improving cardiovascular fitness and maintaining a healthy heart at any age.</p> <a href="#" class="text-red-600 hover:text-red-800 font-medium flex items-center"> Read More <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> </div> <div class="text-center mt-10 fade-in"> <a href="#" class="inline-block bg-blue-900 hover:bg-blue-800 text-white px-6 py-3 rounded-lg font-medium transition duration-300"> View All Articles </a> </div> </div> </section> <!-- Appointment Form --> <section id="appointment" class="py-16 bg-blue-900 text-white"> <div class="container mx-auto px-4"> <div class="max-w-4xl mx-auto"> <div class="text-center mb-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Book an Appointment</h2> <p class="opacity-90 max-w-2xl mx-auto">Schedule your consultation with Dr. Yılmaz for personalized cardiac care</p> <div class="w-20 h-1 bg-red-600 mx-auto"></div> </div> <form class="bg-white rounded-lg shadow-xl p-6 md:p-8 text-gray-800 fade-in delay-1"> <div class="grid md:grid-cols-2 gap-6"> <div> <label for="name" class="block text-sm font-medium mb-1">Full Name</label> <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> </div> <div> <label for="email" class="block text-sm font-medium mb-1">Email Address</label> <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> </div> <div> <label for="phone" class="block text-sm font-medium mb-1">Phone Number</label> <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> </div> <div> <label for="date" class="block text-sm font-medium mb-1">Preferred Date</label> <input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> </div> <div class="md:col-span-2"> <label for="message" class="block text-sm font-medium mb-1">Reason for Visit</label> <input id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"/> </div> </div> <div class="mt-6"> <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 transform hover:scale-105"> Request Appointment </button> </div> </form> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white pt-16 pb-8"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> <!-- Contact Info --> <div> <h3 class="text-xl font-bold mb-4">Contact Us</h3> <ul class="space-y-3"> <li class="flex items-start"> <i class="fas fa-map-marker-alt mt-1 mr-3 text-red-600"></i> <span>123 Heart Street, Istanbul, Turkey</span> </li> <li class="flex items-start"> <i class="fas fa-phone-alt mt-1 mr-3 text-red-600"></i> <span>+90 212 123 4567</span> </li> <li class="flex items-start"> <i class="fas fa-envelope mt-1 mr-3 text-red-600"></i> <span>info@dryilmazcardiology.com</span> </li> </ul> </div> <!-- Quick Links --> <div> <h3 class="text-xl font-bold mb-4">Quick Links</h3> <ul class="space-y-3"> <li><a href="#home" class="hover:text-red-400 transition">Home</a></li> <li><a href="#about" class="hover:text-red-400 transition">About Dr. Yılmaz</a></li> <li><a href="#services" class="hover:text-red-400 transition">Services</a></li> <li><a href="#patient-services" class="hover:text-red-400 transition">Patient Services</a></li> <li><a href="#blog" class="hover:text-red-400 transition">Blog</a></li> <li><a href="#contact" class="hover:text-red-400 transition">Contact</a></li> </ul> </div> <!-- Hours --> <div> <h3 class="text-xl font-bold mb-4">Clinic Hours</h3> <ul class="space-y-3"> <li class="flex justify-between"> <span>Monday - Friday</span> <span>9:00 AM - 5:00 PM</span> </li> <li class="flex justify-between"> <span>Saturday</span> <span>10:00 AM - 2:00 PM</span> </li> <li class="flex justify-between"> <span>Sunday</span> <span>Closed</span> </li> </ul> </div> <!-- Social Media --> <div> <h3 class="text-xl font-bold mb-4">Connect With Us</h3> <div class="flex space-x-4 mb-6"> <a href="#" class="w-10 h-10 bg-blue-800 rounded-full flex items-center justify-center hover:bg-blue-700 transition"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="w-10 h-10 bg-blue-400 rounded-full flex items-center justify-center hover:bg-blue-500 transition"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-10 h-10 bg-pink-600 rounded-full flex items-center justify-center hover:bg-pink-700 transition"> <i class="fab fa-instagram"></i> </a> <a href="#" class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center hover:bg-blue-700 transition"> <i class="fab fa-linkedin-in"></i> </a> </div> <div class="bg-gray-800 rounded-lg p-4"> <h4 class="font-medium mb-2">Emergency Contact</h4> <p class="text-sm text-gray-400">For urgent cardiac concerns outside clinic hours, please call our 24/7 emergency line:</p> <div class="flex items-center mt-2"> <i class="fas fa-phone-alt text-red-600 mr-2"></i> <span class="font-bold">+90 212 987 6543</span> </div> </div> </div> </div> <div class="border-t border-gray-800 pt-8 text-center text-gray-400"> <p>© 2023 Dr. Ahmet Yılmaz Cardiology Clinic. All rights reserved.</p> <div class="flex justify-center space-x-4 mt-4"> <a href="#" class="hover:text-white transition">Privacy Policy</a> <a href="#" class="hover:text-white transition">Terms of Service</a> </div> </div> </div> </footer> <script> // Mobile menu toggle const hamburger = document.querySelector('.hamburger'); const mobileMenu = document.querySelector('.mobile-menu'); hamburger.addEventListener('click', () => { hamburger.classList.toggle('active'); mobileMenu.classList.toggle('hidden'); }); // Close mobile menu when clicking a link document.querySelectorAll('.mobile-menu a').forEach(link => { link.addEventListener('click', () => { hamburger.classList.remove('active'); mobileMenu.classList.add('hidden'); }); }); // Navbar scroll effect const navbar = document.querySelector('.navbar'); window.addEventListener('scroll', () => { if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Testimonial slider const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const dots = document.querySelectorAll('.testimonial-dot'); let currentSlide = 0; function showSlide(index) { testimonialSlides.forEach((slide, i) => { if (i === index) { slide.classList.remove('inactive-slide'); slide.classList.add('active-slide'); dots[i].classList.add('bg-blue-600'); dots[i].classList.remove('bg-blue-300'); } else { slide.classList.remove('active-slide'); slide.classList.add('inactive-slide'); dots[i].classList.remove('bg-blue-600'); dots[i].classList.add('bg-blue-300'); } }); } dots.forEach((dot, index) => { dot.addEventListener('click', () => { currentSlide = index; showSlide(currentSlide); }); }); // Auto slide change setInterval(() => { currentSlide = (currentSlide + 1) % testimonialSlides.length; showSlide(currentSlide); }, 5000); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Animation on scroll const fadeElements = document.querySelectorAll('.fade-in'); function checkFade() { fadeElements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementTop < windowHeight - 100) { element.style.opacity = '1'; } }); } window.addEventListener('scroll', checkFade); window.addEventListener('load', checkFade); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */