Clínica de Cardiologia: Cuidados Cardíacos, Serviços e Consultas

1045 Metehan

Abrir no Editor Video Publique Seu Código

Clínica de Cardiologia: Cuidados Cardíacos, Serviços e Consultas

Recomendado

15 September 2025

Exemplo de animação de grade CSS

1 June 2025

UNIVERSO

26 March 2025

Formulário de várias etapas com barra de progresso usando jQuery e CSS3

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HeartLife Cardiology | Advanced Cardiac Care</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #e63946;
            --secondary: #457b9d;
            --dark: #1d3557;
            --light: #f1faee;
            --accent: #a8dadc;
            --gray: #8d99ae;
            --white: #ffffff;
            --transition: all 0.3s ease;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Open Sans', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: var(--white);
            overflow-x: hidden;
        }

h1, h2, h3, h4, h5 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            color: var(--dark);
        }

.container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

/* Top Information Bar */
        .top-bar {
            background-color: var(--dark);
            color: var(--white);
            padding: 8px 0;
            font-size: 14px;
        }

.top-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.contact-info span {
            margin-right: 20px;
            display: inline-flex;
            align-items: center;
        }

.contact-info i {
            margin-right: 8px;
            color: var(--accent);
        }

.emergency {
            color: var(--primary);
            font-weight: 600;
        }

.patient-login a {
            color: var(--accent);
            text-decoration: none;
            transition: var(--transition);
        }

.patient-login a:hover {
            color: var(--white);
        }

/* Sticky Navigation */
        .navbar {
            background-color: var(--white);
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

.nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

.logo {
            display: flex;
            align-items: center;
        }

.logo img {
            height: 50px;
            margin-right: 10px;
        }

.logo-text {
            font-size: 24px;
            font-weight: 700;
            color: var(--dark);
        }

.logo-text span {
            color: var(--primary);
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            font-size: 16px;
            transition: var(--transition);
            position: relative;
        }

.nav-links a:hover {
            color: var(--primary);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--primary);
            transition: var(--transition);
        }

.nav-links a:hover::after {
            width: 100%;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--dark);
            cursor: pointer;
        }

/* Hero Section */
        .hero {
            height: 90vh;
            background: linear-gradient(rgba(29, 53, 87, 0.7), rgba(29, 53, 87, 0.7)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            text-align: center;
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            z-index: 2;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: var(--white);
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s forwards 0.5s;
        }

.hero p {
            font-size: 1.3rem;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s forwards 0.8s;
        }

.hero-btns {
            display: flex;
            justify-content: center;
            gap: 20px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s forwards 1.1s;
        }

.btn {
            display: inline-block;
            padding: 14px 32px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: var(--transition);
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            cursor: pointer;
        }

.btn-primary {
            background-color: var(--primary);
            color: var(--white);
        }

.btn-primary:hover {
            background-color: #c1121f;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

.btn-outline {
            background-color: transparent;
            color: var(--white);
            border: 2px solid var(--white);
        }

.btn-outline:hover {
            background-color: var(--white);
            color: var(--dark);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

/* Services Section */
        .section {
            padding: 100px 0;
        }

.section-header {
            text-align: center;
            margin-bottom: 60px;
        }

.section-title {
            font-size: 2.5rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

.section-title::after {
            content: '';
            position: absolute;
            width: 70px;
            height: 4px;
            background-color: var(--primary);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

.section-subtitle {
            font-size: 1.2rem;
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.service-card {
            background: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            text-align: center;
            padding: 40px 25px;
            border-top: 4px solid var(--primary);
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.service-icon {
            font-size: 50px;
            color: var(--primary);
            margin-bottom: 20px;
        }

.service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

/* Video Module */
        .video-module {
            background-color: var(--light);
            padding: 100px 0;
        }

.video-container {
            display: flex;
            align-items: center;
            gap: 50px;
        }

.video-content {
            flex: 1;
        }

.video-player {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            position: relative;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }

.video-player iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

/* Testimonials */
        .testimonials {
            background-color: var(--dark);
            color: var(--white);
            padding: 100px 0;
        }

.testimonials .section-title {
            color: var(--white);
        }

.testimonials .section-subtitle {
            color: var(--accent);
        }

.testimonial-slider {
            max-width: 800px;
            margin: 50px auto 0;
            position: relative;
        }

.testimonial-slide {
            text-align: center;
            padding: 30px;
            opacity: 0;
            transition: opacity 0.5s ease;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }

.testimonial-slide.active {
            opacity: 1;
            position: relative;
        }

.quote-icon {
            font-size: 50px;
            color: var(--accent);
            margin-bottom: 20px;
        }

.testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            margin-bottom: 30px;
        }

.client-info {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.client-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 15px;
            border: 3px solid var(--accent);
        }

.client-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.client-name {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

.slider-nav {
            display: flex;
            justify-content: center;
            margin-top: 40px;
        }

.slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--gray);
            margin: 0 5px;
            cursor: pointer;
            transition: var(--transition);
        }

.slider-dot.active {
            background-color: var(--primary);
            transform: scale(1.2);
        }

/* Stats Counter */
        .stats {
            background-color: var(--primary);
            color: var(--white);
            padding: 80px 0;
            text-align: center;
        }

.stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }

.stat-item {
            padding: 20px;
        }

.stat-number {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

.stat-label {
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

/* Blog Section */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }

.blog-card {
            background: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }

.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.blog-img {
            height: 250px;
            overflow: hidden;
        }

.blog-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.blog-card:hover .blog-img img {
            transform: scale(1.05);
        }

.blog-content {
            padding: 25px;
        }

.blog-date {
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 10px;
            display: block;
        }

.blog-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

.blog-excerpt {
            margin-bottom: 20px;
            color: var(--gray);
        }

.read-more {
            color: var(--primary);
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: var(--transition);
        }

.read-more i {
            margin-left: 5px;
            transition: var(--transition);
        }

.read-more:hover {
            color: var(--dark);
        }

.read-more:hover i {
            transform: translateX(5px);
        }

/* Appointment Section */
        .appointment {
            background-color: var(--light);
            padding: 100px 0;
        }

.appointment-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

.appointment-form {
            background: var(--white);
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark);
        }

.form-control {
            width: 100%;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: var(--transition);
        }

.form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.2);
        }

.form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

.btn-block {
            display: block;
            width: 100%;
            padding: 16px;
            font-size: 18px;
        }

.appointment-info {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

.info-box {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

.info-icon {
            font-size: 36px;
            color: var(--primary);
            min-width: 50px;
            text-align: center;
        }

.info-content h3 {
            margin-bottom: 10px;
        }

/* Doctor Profile */
        .doctor-profile {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

.doctor-img {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.doctor-img img {
            width: 100%;
            display: block;
        }

.doctor-bio h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

.doctor-bio h3 {
            color: var(--primary);
            margin-bottom: 15px;
        }

.certifications {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 30px;
        }

.cert-badge {
            background-color: var(--light);
            color: var(--dark);
            padding: 8px 15px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
        }

.reviews {
            margin-top: 40px;
        }

.review-item {
            background: var(--white);
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

.review-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

.review-name {
            font-weight: 600;
        }

.review-date {
            color: var(--gray);
        }

.review-stars {
            color: #ffc107;
            margin-bottom: 10px;
        }

/* Map Section */
        .map-section {
            padding: 100px 0 0;
        }

.map-container {
            height: 500px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

.location-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.location-card {
            display: flex;
            gap: 15px;
            align-items: center;
            background: var(--white);
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }

.location-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

.location-icon {
            font-size: 24px;
            color: var(--primary);
            min-width: 50px;
            text-align: center;
        }

/* Footer */
        .footer {
            background-color: var(--dark);
            color: var(--white);
            padding: 80px 0 0;
        }

.footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 60px;
        }

.footer-col h3 {
            color: var(--white);
            font-size: 1.5rem;
            margin-bottom: 25px;
            position: relative;
        }

.footer-col h3::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 3px;
            background-color: var(--primary);
            bottom: -10px;
            left: 0;
        }

.footer-about p {
            margin-bottom: 20px;
        }

.social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

.social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--white);
            transition: var(--transition);
            font-size: 18px;
        }

.social-link:hover {
            background-color: var(--primary);
            transform: translateY(-3px);
        }

.footer-links li {
            list-style: none;
            margin-bottom: 15px;
        }

.footer-links a {
            color: var(--accent);
            text-decoration: none;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
        }

.footer-links a:hover {
            color: var(--white);
            transform: translateX(5px);
        }

.footer-links a i {
            margin-right: 10px;
            font-size: 14px;
        }

.footer-contact li {
            list-style: none;
            display: flex;
            margin-bottom: 15px;
        }

.footer-contact i {
            color: var(--primary);
            min-width: 25px;
            margin-top: 5px;
        }

.footer-bottom {
            background-color: rgba(0, 0, 0, 0.2);
            padding: 20px 0;
            text-align: center;
        }

.footer-bottom p {
            font-size: 14px;
            color: var(--accent);
        }

/* Animations */
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

.fade-in.appear {
            opacity: 1;
            transform: translateY(0);
        }

/* Responsive Design */
        @media (max-width: 992px) {
            .appointment-container,
            .doctor-profile,
            .video-container {
                grid-template-columns: 1fr;
            }
            
            .video-content {
                order: 2;
            }
            
            .video-player {
                order: 1;
            }
        }

@media (max-width: 768px) {
            .top-info {
                flex-direction: column;
                gap: 10px;
            }
            
            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: var(--white);
                flex-direction: column;
                padding: 20px 0;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            }
            
            .nav-links.active {
                display: flex;
            }
            
            .nav-links li {
                margin: 0;
                padding: 10px 20px;
            }
            
            .nav-links li:hover {
                background-color: var(--light);
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            .hero-btns {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            
            .btn {
                width: 80%;
                text-align: center;
            }
            
            .section {
                padding: 70px 0;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 576px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .stat-number {
                font-size: 2.5rem;
            }
            
            .footer-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    
    <div class="top-bar">
        <div class="container top-info">
            <div class="contact-info">
                <span><i class="far fa-clock"></i> Mon-Fri: 9:00 AM - 5:00 PM, Sat: 10:00 AM - 2:00 PM</span>
                <span class="emergency"><i class="fas fa-phone-alt"></i> 24/7 Emergency: (123) 456-7890</span>
            </div>
            <div class="patient-login">
                <a href="#"><i class="fas fa-user"></i> Patient Portal Login</a>
            </div>
        </div>
    </div>

<nav class="navbar">
        <div class="container nav-container">
            <div class="logo">
                <div class="logo-text">Heart<span>Life</span></div>
            </div>
            <ul class="nav-links">
                <li><a href="#home">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="#patient-info">Patient Info</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <button class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </nav>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Your Heart, Our Priority</h1>
            <p>Advanced cardiology care with compassion and cutting-edge technology for healthier hearts and longer lives.</p>
            <div class="hero-btns">
                <a href="#appointment" class="btn btn-primary">Book an Appointment</a>
                <a href="#services" class="btn btn-outline">Our Services</a>
            </div>
        </div>
    </section>

<section class="section" id="services">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Our Cardiology Services</h2>
                <p class="section-subtitle">Comprehensive cardiac care using the latest diagnostic tools and treatment approaches</p>
            </div>
            <div class="services-grid">
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <h3>Heart Checkups</h3>
                    <p>Comprehensive cardiovascular evaluations including stress tests, echocardiograms, and advanced screenings.</p>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h3>ECG & EKG</h3>
                    <p>Advanced electrocardiography services with immediate interpretation and follow-up care planning.</p>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-stethoscope"></i>
                    </div>
                    <h3>Blood Pressure Monitoring</h3>
                    <p>24-hour ambulatory monitoring and personalized hypertension management programs.</p>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-procedures"></i>
                    </div>
                    <h3>Cardiac Surgery</h3>
                    <p>Minimally invasive procedures including angioplasty, stent placement, and bypass surgery.</p>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-ambulance"></i>
                    </div>
                    <h3>Emergency Care</h3>
                    <p>24/7 cardiac emergency services with rapid response teams and advanced life support.</p>
                </div>
                <div class="service-card fade-in">
                    <div class="service-icon">
                        <i class="fas fa-file-medical-alt"></i>
                    </div>
                    <h3>Rehabilitation</h3>
                    <p>Personalized cardiac rehab programs to improve cardiovascular health after treatment.</p>
                </div>
            </div>
        </div>
    </section>

<section class="section video-module">
        <div class="container">
            <div class="video-container">
                <div class="video-content">
                    <h2>Understanding Heart Health</h2>
                    <p>Heart disease remains the leading cause of death worldwide. In this video, Dr. Emily Roberts explains common cardiac conditions, warning signs to watch for, and modern treatment approaches that are saving lives every day.</p>
                    <p>Learn about preventive measures you can take and how our clinic provides personalized care for each patient's unique cardiovascular needs.</p>
                    <a href="#services" class="btn btn-primary" style="margin-top: 20px;">Learn More</a>
                </div>
                <div class="video-player">
                    <iframe src="https://www.youtube.com/embed/GMBSU-2GK3E" title="Heart Health Explained" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </section>

<section class="section testimonials">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Patient Testimonials</h2>
                <p class="section-subtitle">Hear from our patients about their experiences at HeartLife Cardiology</p>
            </div>
            <div class="testimonial-slider">
                <div class="testimonial-slide active">
                    <div class="quote-icon">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <p class="testimonial-text">"Dr. Roberts saved my life. After experiencing chest pains, her quick diagnosis and treatment prevented what could have been a massive heart attack. The entire team was compassionate and professional throughout my recovery."</p>
                    <div class="client-info">
                        <div class="client-avatar">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="John Smith">
                        </div>
                        <div class="client-name">John Smith</div>
                        <div>Cardiac Surgery Patient</div>
                    </div>
                </div>
                <div class="testimonial-slide">
                    <div class="quote-icon">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <p class="testimonial-text">"The cardiac rehabilitation program completely changed my life. After my heart attack, I thought I'd never be active again. Thanks to their personalized approach, I'm now hiking and playing with my grandchildren."</p>
                    <div class="client-info">
                        <div class="client-avatar">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mary Johnson">
                        </div>
                        <div class="client-name">Mary Johnson</div>
                        <div>Rehabilitation Program</div>
                    </div>
                </div>
                <div class="testimonial-slide">
                    <div class="quote-icon">
                        <i class="fas fa-quote-left"></i>
                    </div>
                    <p class="testimonial-text">"As someone with a family history of heart disease, the preventive care at HeartLife has been invaluable. Their thorough screenings detected early signs of trouble and their treatment plan has kept me healthy."</p>
                    <div class="client-info">
                        <div class="client-avatar">
                            <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Robert Davis">
                        </div>
                        <div class="client-name">Robert Davis</div>
                        <div>Preventive Care Patient</div>
                    </div>
                </div>
            </div>
            <div class="slider-nav">
                <div class="slider-dot active"></div>
                <div class="slider-dot"></div>
                <div class="slider-dot"></div>
            </div>
        </div>
    </section>

<section class="stats">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-number" data-count="5000">0</div>
                    <div class="stat-label">Surgeries Performed</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="12000">0</div>
                    <div class="stat-label">Patients Treated</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="25">0</div>
                    <div class="stat-label">Years of Experience</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" data-count="98">0</div>
                    <div class="stat-label">Patient Satisfaction</div>
                </div>
            </div>
        </div>
    </section>

<section class="section" id="blog">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Latest Heart Health News</h2>
                <p class="section-subtitle">Stay informed with the latest research, tips, and treatments for cardiovascular health</p>
            </div>
            <div class="blog-grid">
                <div class="blog-card fade-in">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1581595219319-5b0b1bce1c78?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Heart Healthy Diet">
                    </div>
                    <div class="blog-content">
                        <span class="blog-date">June 12, 2023</span>
                        <h3 class="blog-title">Top 10 Foods for a Healthy Heart</h3>
                        <p class="blog-excerpt">Discover the best foods to incorporate into your diet to improve cardiovascular health and reduce heart disease risk.</p>
                        <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="blog-card fade-in">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1517962847327-e8032e806fcc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Exercise for Heart Health">
                    </div>
                    <div class="blog-content">
                        <span class="blog-date">May 28, 2023</span>
                        <h3 class="blog-title">Exercise Routines That Strengthen Your Heart</h3>
                        <p class="blog-excerpt">Learn which exercises provide the most cardiovascular benefits and how to create a heart-healthy fitness routine.</p>
                        <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="blog-card fade-in">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Heart Technology">
                    </div>
                    <div class="blog-content">
                        <span class="blog-date">May 15, 2023</span>
                        <h3 class="blog-title">New Advances in Cardiac Treatment Technology</h3>
                        <p class="blog-excerpt">Explore the latest innovations in heart care technology that are improving outcomes for patients with cardiovascular disease.</p>
                        <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section appointment" id="appointment">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Book an Appointment</h2>
                <p class="section-subtitle">Schedule your consultation with our cardiac specialists today</p>
            </div>
            <div class="appointment-container">
                <div class="appointment-form">
                    <form id="bookingForm">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="name">Full Name</label>
                                <input type="text" id="name" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email Address</label>
                                <input type="email" id="email" class="form-control" required>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="phone">Phone Number</label>
                                <input type="tel" id="phone" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label for="date">Preferred Date</label>
                                <input type="date" id="date" class="form-control" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="service">Service Required</label>
                            <select id="service" class="form-control" required>
                                <option value="">Select a Service</option>
                                <option value="checkup">Cardiac Checkup</option>
                                <option value="ecg">ECG/EKG</option>
                                <option value="monitoring">Blood Pressure Monitoring</option>
                                <option value="consultation">Cardiology Consultation</option>
                                <option value="surgery">Surgical Consultation</option>
                                <option value="rehab">Rehabilitation Program</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="message">Additional Information</label>
                            <input id="message" class="form-control" rows="4"/>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">Request Appointment</button>
                    </form>
                </div>
                <div class="appointment-info">
                    <div class="info-box">
                        <div class="info-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="info-content">
                            <h3>Working Hours</h3>
                            <p>Monday - Friday: 9:00 AM - 5:00 PM</p>
                            <p>Saturday: 10:00 AM - 2:00 PM</p>
                            <p>Emergency Services: 24/7</p>
                        </div>
                    </div>
                    <div class="info-box">
                        <div class="info-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div class="info-content">
                            <h3>Contact Information</h3>
                            <p><strong>Phone:</strong> (123) 456-7890</p>
                            <p><strong>Emergency:</strong> (123) 456-7891</p>
                            <p><strong>Email:</strong> info@heartlifecardiology.com</p>
                        </div>
                    </div>
                    <div class="info-box">
                        <div class="info-icon">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div class="info-content">
                            <h3>What to Bring</h3>
                            <p>• Photo ID and Insurance Card</p>
                            <p>• List of Current Medications</p>
                            <p>• Previous Medical Records</p>
                            <p>• Recent Test Results</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section" id="doctor">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Meet Our Lead Cardiologist</h2>
                <p class="section-subtitle">Board-certified expertise with a compassionate approach to cardiac care</p>
            </div>
            <div class="doctor-profile">
                <div class="doctor-img fade-in">
                    <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Dr. Emily Roberts">
                </div>
                <div class="doctor-bio">
                    <h2>Dr. Emily Roberts, MD</h2>
                    <h3>Cardiologist & Medical Director</h3>
                    <p>Dr. Roberts is a board-certified cardiologist with over 15 years of experience in diagnosing and treating complex cardiovascular conditions. She completed her residency at Johns Hopkins Hospital and fellowship in Interventional Cardiology at Mayo Clinic.</p>
                    <p>Specializing in minimally invasive cardiac procedures, Dr. Roberts has performed over 2,000 successful interventions. Her research on preventive cardiology has been published in numerous peer-reviewed journals.</p>
                    <p>Dr. Roberts believes in a patient-centered approach, combining cutting-edge technology with personalized care plans tailored to each patient's unique needs and lifestyle.</p>
                    
                    <div class="certifications">
                        <span class="cert-badge">Board Certified Cardiologist</span>
                        <span class="cert-badge">FACC</span>
                        <span class="cert-badge">FSCAI</span>
                        <span class="cert-badge">MD, PhD</span>
                    </div>
                    
                    <div class="reviews">
                        <div class="review-item">
                            <div class="review-header">
                                <div class="review-name">Sarah Thompson</div>
                                <div class="review-date">June 5, 2023</div>
                            </div>
                            <div class="review-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p>"Dr. Roberts took the time to explain my condition in terms I could understand. Her expertise and caring approach made all the difference in my recovery."</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section map-section" id="contact">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Our Location</h2>
                <p class="section-subtitle">Visit our state-of-the-art cardiac care facility</p>
            </div>
            <div class="map-container">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.184133404672!2d-73.98757492356967!3d40.75802802828415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2sTimes%20Square!5e0!3m2!1sen!2sus!4v1689273469538!5m2!1sen!2sus" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
            <div class="location-info">
                <div class="location-card">
                    <div class="location-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div>
                        <h3>Address</h3>
                        <p>123 Heart Health Avenue, New York, NY 10001</p>
                    </div>
                </div>
                <div class="location-card">
                    <div class="location-icon">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <div>
                        <h3>Phone</h3>
                        <p>(123) 456-7890</p>
                        <p>Emergency: (123) 456-7891</p>
                    </div>
                </div>
                <div class="location-card">
                    <div class="location-icon">
                        <i class="far fa-clock"></i>
                    </div>
                    <div>
                        <h3>Working Hours</h3>
                        <p>Mon-Fri: 9:00 AM - 5:00 PM</p>
                        <p>Sat: 10:00 AM - 2:00 PM</p>
                    </div>
                </div>
                <div class="location-card">
                    <div class="location-icon">
                        <i class="fas fa-parking"></i>
                    </div>
                    <div>
                        <h3>Parking</h3>
                        <p>Valet parking available</p>
                        <p>Underground garage with patient discount</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col footer-about">
                    <h3>About HeartLife</h3>
                    <p>HeartLife Cardiology is a premier cardiac care center dedicated to providing comprehensive cardiovascular services with cutting-edge technology and compassionate care.</p>
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home"><i class="fas fa-chevron-right"></i> Home</a></li>
                        <li><a href="#about"><i class="fas fa-chevron-right"></i> About Us</a></li>
                        <li><a href="#services"><i class="fas fa-chevron-right"></i> Services</a></li>
                        <li><a href="#doctor"><i class="fas fa-chevron-right"></i> Meet the Doctor</a></li>
                        <li><a href="#patient-info"><i class="fas fa-chevron-right"></i> Patient Information</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Services</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Heart Checkups</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> ECG & EKG</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Blood Pressure Monitoring</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Cardiac Surgery</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Emergency Care</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Contact Us</h3>
                    <ul class="footer-contact">
                        <li><i class="fas fa-map-marker-alt"></i> 123 Heart Health Avenue, NY 10001</li>
                        <li><i class="fas fa-phone-alt"></i> (123) 456-7890</li>
                        <li><i class="fas fa-envelope"></i> info@heartlifecardiology.com</li>
                        <li><i class="fas fa-ambulance"></i> Emergency: (123) 456-7891</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <p>© 2023 HeartLife Cardiology. All Rights Reserved. | Accredited by the American Board of Cardiology</p>
            </div>
        </div>
    </footer>

Recomendado

Exemplo de animação de grade CSS

UNIVERSO

Formulário de várias etapas com barra de progresso usando jQuery e CSS3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS