Webleb - Code-Snippets - Kardiologie-Klinik: Herzgesundheit und kardiologische Versorgung

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CardioCare Clinic - Your Heart Health Partner</title>
    <meta name="description" content="CardioCare Clinic offers expert cardiology services, from preventative checkups to advanced cardiac surgery. Trust our experienced team with your heart health.">
    <meta name="keywords" content="Cardiology, Heart Doctor, Clinic, ECG, Cardiac Surgery, Heart Health, Blood Pressure">
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

/* --- Base & Typography --- */
        body {
            font-family: var(--font-main);
            color: var(--text-color);
            line-height: 1.7;
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
            background-color: #f9f9f9;
        }

h1, h2, h3, h4 {
            font-family: var(--font-heading);
            font-weight: 700;
            color: var(--primary-color);
            margin-top: 0;
        }

p {
            margin-bottom: 1rem;
        }

a {
            text-decoration: none;
            color: var(--secondary-color);
            transition: color 0.3s ease;
        }

a:hover {
            color: var(--primary-color);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

/* --- Helper Classes --- */
        .text-center { text-align: center; }
        .section-padding { padding: 80px 0; }
        .section-bg { background-color: var(--light-gray); }
        .btn {
            display: inline-block;
            padding: 12px 28px;
            background-color: var(--secondary-color);
            color: var(--white);
            border-radius: 50px;
            font-weight: 600;
            font-family: var(--font-heading);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .btn:hover {
            background-color: var(--primary-color);
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 90, 156, 0.3);
        }
        .btn-accent {
            background-color: var(--accent-color);
        }
        .btn-accent:hover {
            background-color: #c0000d;
        }

/* --- Top Information Bar --- */
        .top-info-bar {
            background-color: var(--primary-color);
            color: var(--white);
            padding: 10px 0;
            font-size: 0.9em;
        }
        .top-info-bar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .top-info-bar a {
            color: var(--white);
            font-weight: 600;
        }
        .top-info-bar i {
            margin-right: 8px;
            color: var(--secondary-color);
        }

/* --- Navigation Bar --- */
        .navbar {
            background-color: var(--white);
            padding: 15px 0;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar .logo {
            font-family: var(--font-heading);
            font-size: 1.8em;
            font-weight: 700;
            color: var(--primary-color);
        }
        .navbar .logo i { color: var(--accent-color); }
        .nav-links {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }
        .nav-links li {
            margin-left: 25px;
        }
        .nav-links a {
            color: var(--text-color);
            font-weight: 600;
            font-family: var(--font-heading);
            position: relative;
            padding: 5px 0;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--accent-color);
            transition: width 0.3s ease;
        }
        .nav-links a:hover::after, .nav-links a.active::after {
            width: 100%;
        }
        .menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; }

/* --- Hero Section (Vitrin) --- */
        .vitrin {
            height: 90vh;
            background: linear-gradient(rgba(0, 90, 156, 0.7), rgba(0, 20, 40, 0.8)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            text-align: center;
        }
        .vitrin-content {
            max-width: 800px;
        }
        .vitrin h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: var(--white);
            font-weight: 700;
        }
        .vitrin .animated-text {
            font-weight: 300;
            border-right: 2px solid rgba(255, 255, 255, 0.75);
            white-space: nowrap;
            overflow: hidden;
            margin: 0 auto;
            animation: typing 4s steps(40, end) forwards, blink-caret .75s step-end infinite;
        }

/* --- Services Section (Sutun) --- */
        .sutun {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        .service-card {
            background: var(--white);
            padding: 30px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            text-align: center;
            transition: all 0.3s ease;
        }
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        .service-card .icon {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 20px;
        }
        .service-card h3 {
            margin-bottom: 15px;
            font-size: 1.4rem;
        }

/* --- About Us Section (OA - Ortak Alan) --- */
        .oa {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        .oa .oa-image {
            flex: 1;
            max-width: 50%;
        }
        .oa .oa-image img {
            width: 100%;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }
        .oa .oa-content {
            flex: 1;
        }
        .oa .oa-content h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        .animated-counter {
            display: flex;
            gap: 40px;
            margin-top: 30px;
        }
        .counter-item {
            text-align: center;
        }
        .counter-item .number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }
        .counter-item .text {
            font-weight: 600;
            color: #666;
        }

/* --- Video Module --- */
        .video-module {
            position: relative;
            padding: 100px 0;
            background: linear-gradient(rgba(0, 90, 156, 0.8), rgba(0, 20, 40, 0.9)), url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1753&q=80') no-repeat center center/cover;
            background-attachment: fixed;
            color: var(--white);
            text-align: center;
        }
        .video-module h2 {
            color: var(--white);
            margin-bottom: 30px;
        }
        .play-button {
            width: 90px;
            height: 90px;
            background: var(--accent-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .play-button:hover {
            transform: scale(1.1);
            background: #c0000d;
        }
        .play-button i {
            font-size: 2.5rem;
            color: var(--white);
        }
        .video-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .video-popup.show { display: flex; }
        .video-popup-content {
            position: relative;
            width: 90%;
            max-width: 900px;
            aspect-ratio: 16 / 9;
        }
        .video-popup iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        .video-popup .close-btn {
            position: absolute;
            top: -40px;
            right: 0;
            font-size: 2rem;
            color: var(--white);
            cursor: pointer;
        }

/* --- Testimonials Section --- */
        .testimonial-slider {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            overflow: hidden;
        }
        .testimonial-slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .testimonial-slide {
            min-width: 100%;
            box-sizing: border-box;
            padding: 40px;
            text-align: center;
        }
        .testimonial-slide img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 20px;
            object-fit: cover;
        }
        .testimonial-slide .quote {
            font-style: italic;
            font-size: 1.1rem;
            margin-bottom: 20px;
            color: #555;
        }
        .testimonial-slide .author {
            font-weight: 700;
            color: var(--primary-color);
        }
        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .slider-nav button {
            background: var(--white);
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 10px 15px;
            border-radius: 50%;
            box-shadow: var(--shadow);
            color: var(--primary-color);
        }
        
        /* --- Blog/News Section --- */
        .blog-card {
            background: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .blog-card:hover {
            transform: translateY(-10px);
        }
        .blog-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .blog-content {
            padding: 25px;
        }
        .blog-meta {
            font-size: 0.8em;
            color: #777;
            margin-bottom: 10px;
        }
        .blog-meta span { margin-right: 15px; }
        .blog-card h3 { font-size: 1.3rem; }
        .blog-card .read-more { font-weight: 700; }

/* --- Appointment Form (Modul-Form) --- */
        .modul-form {
            background: var(--white);
            padding: 40px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            max-width: 700px;
            margin: 0 auto;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }
        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
            transition: border-color 0.3s ease;
        }
        .form-control:focus {
            outline: none;
            border-color: var(--secondary-color);
        }
        .form-error {
            color: var(--accent-color);
            font-size: 0.8em;
            display: none;
        }
        
        /* --- Doctor Profile Section --- */
        .doctor-profile {
            display: flex;
            gap: 40px;
            align-items: flex-start;
        }
        .doctor-photo {
            flex-basis: 300px;
        }
        .doctor-photo img {
            width: 100%;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }
        .doctor-info {
            flex: 1;
        }
        .doctor-info h2 { font-size: 2.5rem; }
        .doctor-info .specialty {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 20px;
        }
        .doctor-info .certifications { list-style: none; padding: 0; }
        .doctor-info .certifications li { margin-bottom: 5px; }
        .doctor-info .certifications i { color: var(--primary-color); margin-right: 10px; }

/* --- Google Maps --- */
        .map-container {
            width: 100%;
            height: 450px;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        .map-container iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

/* --- Footer --- */
        .footer {
            background: #1c2833;
            color: #aeb6bf;
            padding: 60px 0 20px;
        }
        .footer .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }
        .footer h4 {
            color: var(--white);
            margin-bottom: 20px;
        }
        .footer a { color: #aeb6bf; }
        .footer a:hover { color: var(--white); }
        .footer ul { list-style: none; padding: 0; }
        .footer ul li { margin-bottom: 10px; }
        .social-links a {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #2c3e50;
            color: var(--white);
            border-radius: 50%;
            margin-right: 10px;
            transition: all 0.3s ease;
        }
        .social-links a:hover {
            background: var(--secondary-color);
            transform: translateY(-3px);
        }
        .footer-bottom {
            text-align: center;
            padding-top: 40px;
            margin-top: 40px;
            border-top: 1px solid #2c3e50;
            font-size: 0.9em;
        }

/* --- Animations & Effects --- */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: rgba(255, 255, 255, 0.75); }
        }

/* --- Responsive Design --- */
        @media (max-width: 992px) {
            .oa { flex-direction: column; }
            .oa .oa-image { max-width: 100%; }
            .doctor-profile { flex-direction: column; }
            .doctor-photo { flex-basis: auto; width: 100%; max-width: 300px; margin: 0 auto 30px; }
        }
        @media (max-width: 768px) {
            .nav-links {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: var(--white);
                flex-direction: column;
                text-align: center;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.5s ease-out;
            }
            .nav-links.active {
                max-height: 500px; /* Adjust as needed */
                padding: 20px 0;
            }
            .nav-links li { margin: 10px 0; }
            .menu-toggle { display: block; }
            .top-info-bar .container { flex-direction: column; gap: 10px; }
            .vitrin h1 { font-size: 2.5rem; }
            .section-padding { padding: 60px 0; }
        }
    </style>
</head>
<body>

<div class="top-info-bar">
        <div class="container">
            <div class="contact-info">
                <span><i class="fas fa-clock"></i>Mon - Fri: 9:00 AM - 5:00 PM</span>
                <span style="margin-left: 20px;"><i class="fas fa-phone-alt"></i>Emergency: (123) 456-7890</span>
            </div>
            <div class="patient-login">
                <a href="#"><i class="fas fa-user"></i>Patient Login</a>
            </div>
        </div>
    </div>

<nav class="navbar" id="navbar">
        <div class="container">
            <a href="#home" class="logo"><i class="fas fa-heartbeat"></i> CardioCare</a>
            <div class="menu-toggle" id="menu-toggle">
                <i class="fas fa-bars"></i>
            </div>
            <ul class="nav-links" id="nav-links">
                <li><a href="#home" class="active">Home</a></li>
                <li><a href="#about">About Us</a></li>
                <li><a href="#services">Our Services</a></li>
                <li><a href="#doctor">Meet the Doctor</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

<header class="vitrin" id="home">
        <div class="vitrin-content fade-in">
            <h1>Expert Care for Your Heart's Health</h1>
            <p class="animated-text">Compassionate Cardiology. Advanced Treatments.</p>
            <br><br>
            <a href="#appointment" class="btn">Book an Appointment</a>
        </div>
    </header>

<main>
        
        <section id="services" class="section-padding">
            <div class="container">
                <div class="text-center fade-in">
                    <h2 style="font-size: 2.5rem;">Our Comprehensive Cardiology Services</h2>
                    <p style="max-width: 700px; margin: 0 auto 50px;">We provide a full spectrum of cardiac care, from preventative measures to complex surgical procedures.</p>
                </div>
                <div class="sutun">
                    <div class="service-card fade-in">
                        <div class="icon"><i class="fas fa-stethoscope"></i></div>
                        <h3>Heart Checkups</h3>
                        <p>Comprehensive screenings and preventative care to assess and maintain your cardiovascular health.</p>
                    </div>
                    <div class="service-card fade-in" style="transition-delay: 0.1s;">
                        <div class="icon"><i class="fas fa-wave-square"></i></div>
                        <h3>ECG & Holter Monitor</h3>
                        <p>Advanced diagnostic tools to monitor your heart's rhythm and electrical activity accurately.</p>
                    </div>
                    <div class="service-card fade-in" style="transition-delay: 0.2s;">
                        <div class="icon"><i class="fas fa-tachometer-alt"></i></div>
                        <h3>Blood Pressure</h3>
                        <p>Expert management of hypertension through lifestyle coaching and medical treatment.</p>
                    </div>
                    <div class="service-card fade-in" style="transition-delay: 0.3s;">
                        <div class="icon"><i class="fas fa-procedures"></i></div>
                        <h3>Cardiac Surgery</h3>
                        <p>State-of-the-art surgical interventions performed by our highly skilled cardiac surgeons.</p>
                    </div>
                    <div class="service-card fade-in" style="transition-delay: 0.4s;">
                        <div class="icon"><i class="fas fa-ambulance"></i></div>
                        <h3>Emergency Care</h3>
                        <p>Rapid response and critical care for acute cardiac events, available 24/7 for your peace of mind.</p>
                    </div>
                     <div class="service-card fade-in" style="transition-delay: 0.5s;">
                        <div class="icon"><i class="fas fa-heart-pulse"></i></div>
                        <h3>Rehabilitation</h3>
                        <p>Personalized programs to help you recover strength and confidence after a cardiac event.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="about" class="section-padding section-bg">
            <div class="container">
                <div class="oa fade-in">
                    <div class="oa-image">
                        <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Doctor consulting with a patient">
                    </div>
                    <div class="oa-content">
                        <h2>Your Trusted Partner in Heart Health Since 1998</h2>
                        <p>At CardioCare Clinic, we are dedicated to providing the highest standard of cardiovascular care. Our patient-centric approach combines cutting-edge technology with compassionate, personalized attention. We believe in empowering our patients through education and collaborative treatment planning.</p>
                        <p>Our mission is to improve lives by preventing, diagnosing, and treating heart disease with excellence and integrity.</p>
                        <div class="animated-counter">
                            <div class="counter-item">
                                <span class="number" data-target="5000">0</span>+
                                <span class="text">Surgeries Performed</span>
                            </div>
                            <div class="counter-item">
                                <span class="number" data-target="15000">0</span>+
                                <span class="text">Happy Patients</span>
                            </div>
                            <div class="counter-item">
                                <span class="number" data-target="25">0</span>+
                                <span class="text">Years of Experience</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <section class="video-module">
            <div class="container text-center fade-in">
                <h2>Understanding Common Heart Conditions</h2>
                <p>Knowledge is the first step towards a healthier heart. Watch our short video to learn more.</p>
                <div class="play-button" id="play-video-btn">
                    <i class="fas fa-play"></i>
                </div>
            </div>
        </section>
        <div class="video-popup" id="video-popup">
            <div class="video-popup-content">
                <span class="close-btn" id="close-video-btn">×</span>
                <iframe id="youtube-video" src="https://www.youtube.com/embed/a-z_H_e4-MI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>

<section id="doctor" class="section-padding">
            <div class="container">
                <div class="text-center fade-in" style="margin-bottom: 50px;">
                    <h2 style="font-size: 2.5rem;">Meet Our Lead Cardiologist</h2>
                </div>
                <div class="doctor-profile fade-in">
                    <div class="doctor-photo">
                        <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Dr. Evelyn Reed">
                    </div>
                    <div class="doctor-info">
                        <h2>Dr. Evelyn Reed, M.D., F.A.C.C.</h2>
                        <p class="specialty">Board-Certified Interventional Cardiologist</p>
                        <p>With over 20 years of experience, Dr. Reed is a renowned expert in interventional cardiology and preventative heart care. She earned her medical degree from Johns Hopkins University School of Medicine and completed her cardiology fellowship at the Cleveland Clinic. Dr. Reed is passionate about utilizing the latest medical advancements to provide her patients with the best possible outcomes.</p>
                        <h4>Certifications & Affiliations</h4>
                        <ul class="certifications">
                            <li><i class="fas fa-award"></i>Fellow of the American College of Cardiology (FACC)</li>
                            <li><i class="fas fa-award"></i>Board Certified in Internal Medicine</li>
                            <li><i class="fas fa-award"></i>Board Certified in Cardiovascular Disease</li>
                            <li><i class="fas fa-award"></i>Member of the American Heart Association</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

<section id="testimonials" class="section-padding section-bg">
            <div class="container text-center fade-in">
                <h2 style="font-size: 2.5rem;">What Our Patients Say</h2>
                <p style="max-width: 700px; margin: 0 auto 50px;">Their health and trust are our greatest rewards.</p>
                <div class="testimonial-slider">
                    <div class="testimonial-slides">
                        <div class="testimonial-slide">
                            <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Patient John D.">
                            <p class="quote">"Dr. Reed and her team are exceptional. They took the time to explain everything clearly and made me feel comfortable throughout my treatment. I'm back to my active lifestyle thanks to them!"</p>
                            <p class="author">- John D.</p>
                        </div>
                        <div class="testimonial-slide">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Patient Sarah L.">
                            <p class="quote">"The level of care and professionalism at CardioCare Clinic is second to none. From the front desk to the medical staff, everyone is so friendly and supportive. Highly recommended."</p>
                            <p class="author">- Sarah L.</p>
                        </div>
                        <div class="testimonial-slide">
                            <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Patient Michael P.">
                            <p class="quote">"After my heart surgery, the rehabilitation program was fantastic. The team guided me every step of the way. I feel stronger and more confident than ever before."</p>
                            <p class="author">- Michael P.</p>
                        </div>
                    </div>
                    <div class="slider-nav">
                        <button class="prev-slide"><i class="fas fa-chevron-left"></i></button>
                        <button class="next-slide"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
            </div>
        </section>

<section id="blog" class="section-padding">
            <div class="container">
                <div class="text-center fade-in">
                    <h2 style="font-size: 2.5rem;">Heart Health Insights</h2>
                    <p style="max-width: 700px; margin: 0 auto 50px;">Stay informed with our latest articles and tips for a healthier lifestyle.</p>
                </div>
                <div class="sutun">
                    <div class="blog-card fade-in">
                        <img src="https://images.unsplash.com/photo-1490818387583-1baba5e638af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Healthy food">
                        <div class="blog-content">
                            <div class="blog-meta">
                                <span><i class="fas fa-calendar-alt"></i> Aug 15, 2025</span>
                                <span><i class="fas fa-user-edit"></i> Dr. Reed</span>
                            </div>
                            <h3>Top 5 Heart-Healthy Foods You Should Eat Daily</h3>
                            <p>Discover the simple dietary changes that can make a big difference for your cardiovascular health.</p>
                            <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="blog-card fade-in" style="transition-delay: 0.1s;">
                        <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1820&q=80" alt="Person exercising">
                        <div class="blog-content">
                            <div class="blog-meta">
                                <span><i class="fas fa-calendar-alt"></i> Aug 05, 2025</span>
                                <span><i class="fas fa-user-edit"></i> CardioCare Team</span>
                            </div>
                            <h3>The Importance of Regular Exercise for Your Heart</h3>
                            <p>Learn how even moderate physical activity can significantly reduce your risk of heart disease.</p>
                            <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="blog-card fade-in" style="transition-delay: 0.2s;">
                        <img src="https://images.unsplash.com/photo-1556742044-538253a6c624?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Person checking blood pressure">
                        <div class="blog-content">
                            <div class="blog-meta">
                                <span><i class="fas fa-calendar-alt"></i> Jul 28, 2025</span>
                                <span><i class="fas fa-user-edit"></i> Dr. Reed</span>
                            </div>
                            <h3>Understanding Your Blood Pressure Numbers</h3>
                            <p>Demystifying what systolic and diastolic numbers mean and why keeping them in check is vital.</p>
                            <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" class="section-padding section-bg">
            <div class="container">
                <div class="oa">
                    
                    <div id="appointment" class="modul-form fade-in">
                        <h3>Request an Appointment</h3>
                        <form id="appointment-form" novalidate>
                            <div class="form-group">
                                <label for="name">Full Name</label>
                                <input type="text" id="name" name="name" class="form-control" required>
                                <div class="form-error">Please enter your full name.</div>
                            </div>
                            <div class="form-group">
                                <label for="email">Email Address</label>
                                <input type="email" id="email" name="email" class="form-control" required>
                                <div class="form-error">Please enter a valid email address.</div>
                            </div>
                            <div class="form-group">
                                <label for="phone">Phone Number</label>
                                <input type="tel" id="phone" name="phone" class="form-control" required>
                                <div class="form-error">Please enter your phone number.</div>
                            </div>
                            <div class="form-group">
                                <label for="date">Preferred Date</label>
                                <input type="text" id="date" name="date" class="form-control" placeholder="Select a date" required>
                                <div class="form-error">Please select a date.</div>
                            </div>
                            <div class="form-group">
                                <label for="message">Message (Optional)</label>
                                <input id="message" name="message" rows="4" class="form-control"/>
                            </div>
                            <button type="submit" class="btn btn-accent" style="width: 100%;">Submit Request</button>
                        </form>
                    </div>
                    
                    <div class="map-container fade-in" style="transition-delay: 0.2s;">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3125.130699969988!2d-77.03687008466305!3d38.90719227956938!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b7bcdecbb1df%3A0x715969d86d0b7a0!2sThe%20White%20House!5e0!3m2!1sen!2sus!4v1692716447535!5m2!1sen!2sus" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </section>
    </main>

<footer class="footer">
        <div class="container">
            <div class="footer-col">
                <h4><i class="fas fa-heartbeat"></i> CardioCare Clinic</h4>
                <p>Providing expert and compassionate heart care to our community. Your health is our priority.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="footer-col">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#doctor">Meet the Doctor</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Contact Info</h4>
                <ul>
                    <li><i class="fas fa-map-marker-alt"></i> 123 Health St, MedCity, USA</li>
                    <li><i class="fas fa-phone"></i> (123) 456-7890</li>
                    <li><i class="fas fa-envelope"></i> contact@cardiocare.com</li>
                    <li><i class="fas fa-clock"></i> Mon - Fri: 9am - 5pm</li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Certifications</h4>
                
                <img src="https://placehold.co/100x50/ffffff/333333?text=AHA" alt="American Heart Association" style="margin-right: 10px; border-radius: 5px;">
                <img src="https://placehold.co/100x50/ffffff/333333?text=ACC" alt="American College of Cardiology" style="border-radius: 5px;">
            </div>
        </div>
        <div class="footer-bottom">
            <p>© <span id="current-year"></span> CardioCare Clinic. All Rights Reserved. | Designed with Care</p>
        </div>
    </footer>

// --- Mobile Menu Toggle ---
        const menuToggle = document.getElementById('menu-toggle');
        const navLinks = document.getElementById('nav-links');
        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });

// --- Active Nav Link on Scroll ---
        const sections = document.querySelectorAll('section[id]');
        const navLi = document.querySelectorAll('.nav-links a');
        window.addEventListener('scroll', () => {
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                if (pageYOffset >= sectionTop - 70) {
                    current = section.getAttribute('id');
                }
            });

navLi.forEach(a => {
                a.classList.remove('active');
                if (a.getAttribute('href').substring(1) === current) {
                    a.classList.add('active');
                }
            });
        });

// --- Fade-in Animation on Scroll ---
        const faders = document.querySelectorAll('.fade-in');
        const appearOptions = {
            threshold: 0.2,
            rootMargin: "0px 0px -50px 0px"
        };
        const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
            entries.forEach(entry => {
                if (!entry.isIntersecting) {
                    return;
                } else {
                    entry.target.classList.add('visible');
                    appearOnScroll.unobserve(entry.target);
                }
            });
        }, appearOptions);

faders.forEach(fader => {
            appearOnScroll.observe(fader);
        });

// --- Animated Counters ---
        const counters = document.querySelectorAll('.number');
        const speed = 200; // The lower the slower

const startCounter = (counter) => {
            const target = +counter.getAttribute('data-target');
            const updateCount = () => {
                const count = +counter.innerText;
                const inc = target / speed;

if (count < target) {
                    counter.innerText = Math.ceil(count + inc);
                    setTimeout(updateCount, 1);
                } else {
                    counter.innerText = target;
                }
            };
            updateCount();
        };

counters.forEach(counter => {
            counterObserver.observe(counter);
        });

// --- Testimonial Slider ---
        const slides = document.querySelector('.testimonial-slides');
        const slide = document.querySelectorAll('.testimonial-slide');
        const prevBtn = document.querySelector('.prev-slide');
        const nextBtn = document.querySelector('.next-slide');
        let currentIndex = 0;
        const totalSlides = slide.length;

function updateSlider() {
            slides.style.transform = `translateX(-${currentIndex * 100}%)`;
        }

nextBtn.addEventListener('click', () => {
            currentIndex = (currentIndex + 1) % totalSlides;
            updateSlider();
        });

prevBtn.addEventListener('click', () => {
            currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
            updateSlider();
        });
        
        setInterval(() => {
            currentIndex = (currentIndex + 1) % totalSlides;
            updateSlider();
        }, 5000); // Auto-slide every 5 seconds

// --- Video Popup ---
        const playBtn = document.getElementById('play-video-btn');
        const closeBtn = document.getElementById('close-video-btn');
        const videoPopup = document.getElementById('video-popup');
        const videoIframe = document.getElementById('youtube-video');
        const originalSrc = videoIframe.src;

playBtn.addEventListener('click', () => {
            videoPopup.classList.add('show');
            videoIframe.src = originalSrc + "?autoplay=1";
        });

closeBtn.addEventListener('click', () => {
            videoPopup.classList.remove('show');
            videoIframe.src = originalSrc;
        });
        
        videoPopup.addEventListener('click', (e) => {
            if(e.target === videoPopup) {
                videoPopup.classList.remove('show');
                videoIframe.src = originalSrc;
            }
        });

// --- Appointment Form Validation ---
        const form = document.getElementById('appointment-form');
        flatpickr("#date", {
            minDate: "today"
        });

form.addEventListener('submit', function(e) {
            e.preventDefault();
            let isValid = true;
            const inputs = form.querySelectorAll('input[required]');

inputs.forEach(input => {
                const errorDiv = input.nextElementSibling;
                if (!input.value.trim() || (input.type === 'email' && !validateEmail(input.value))) {
                    isValid = false;
                    errorDiv.style.display = 'block';
                } else {
                    errorDiv.style.display = 'none';
                }
            });

if (isValid) {
                alert('Thank you! Your appointment request has been submitted.');
                form.reset();
            }
        });

// --- Set current year in footer ---
        document.getElementById('current-year').textContent = new Date().getFullYear();
    });
    </script>

</body>
</html>

Validating your code, please wait...

HTML

CSS