Hospital Banner Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Hospital Banner</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

</head>
<body>
    <div class="banner-container">
        
        <div class="floating-element circle" style="top: 10%; left: 5%; animation-delay: 0s;"></div>
        <div class="floating-element plus" style="top: 80%; right: 15%; animation-delay: 1s;">+</div>
        <div class="floating-element circle" style="bottom: 15%; right: 5%; width: 150px; height: 150px; animation-delay: 0.5s;"></div>
        <div class="floating-element plus" style="top: 30%; left: 10%; animation-delay: 1.5s;">+</div>

<div class="content-wrapper">
            <div class="text-content">
                <h1>Advanced Healthcare For A Healthier Life</h1>
                <p>Our hospital provides world-class medical services with cutting-edge technology and compassionate care. Trust our team of experts for your health and wellness needs.</p>
                
                <div class="btn-group">
                    <a href="#" class="btn btn-primary">Book Appointment</a>
                    <a href="#" class="btn btn-secondary">Learn More</a>
                </div>

<div class="features">
                    <div class="feature-item" style="--delay: 1">
                        <span class="feature-icon">?</span>
                        <span>24/7 Emergency Care</span>
                    </div>
                    <div class="feature-item" style="--delay: 2">
                        <span class="feature-icon">?‍⚕️</span>
                        <span>Expert Doctors</span>
                    </div>
                    <div class="feature-item" style="--delay: 3">
                        <span class="feature-icon">?</span>
                        <span>Pharmacy Services</span>
                    </div>
                    <div class="feature-item" style="--delay: 4">
                        <span class="feature-icon">?</span>
                        <span>Advanced Lab Tests</span>
                    </div>
                    <div class="feature-item" style="--delay: 5">
                        <span class="feature-icon">?</span>
                        <span>Health Checkups</span>
                    </div>
                    <div class="feature-item" style="--delay: 6">
                        <span class="feature-icon">?</span>
                        <span>Ambulance Service</span>
                    </div>
                </div>

<div class="stats">
                    <div class="stat-item" style="--delay: 1">
                        <h3>250+</h3>
                        <p>Expert Doctors</p>
                    </div>
                    <div class="stat-item" style="--delay: 2">
                        <h3>10K+</h3>
                        <p>Patients Yearly</p>
                    </div>
                    <div class="stat-item" style="--delay: 3">
                        <h3>99%</h3>
                        <p>Patient Satisfaction</p>
                    </div>
                </div>
            </div>

</body>
</html>

CSS

/* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            overflow-x: hidden;
        }

/* Banner Container */
        .banner-container {
            width: 100%;
            min-height: 100vh;
            background: linear-gradient(135deg, #0077b6 0%, #03045e 100%);
            color: white;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 2rem;
        }

/* Content Wrapper */
        .content-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            position: relative;
            z-index: 2;
        }

/* Text Content */
        .text-content {
            flex: 1;
            min-width: 300px;
            padding: 2rem;
            animation: fadeInLeft 1.5s ease-out;
        }

.text-content h1 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 700;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            animation: textGlow 3s infinite alternate;
        }

.text-content p {
            font-size: clamp(1rem, 1.5vw, 1.2rem);
            margin-bottom: 2rem;
            line-height: 1.6;
            opacity: 0.9;
        }

/* Buttons */
        .btn-group {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

.btn {
            padding: 0.8rem 1.8rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
            text-align: center;
            font-size: 1rem;
            cursor: pointer;
            border: 2px solid transparent;
            animation: pulse 2s infinite;
        }

.btn-primary {
            background-color: #fff;
            color: #0077b6;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

.btn-primary:hover {
            background-color: #0077b6;
            color: white;
            border-color: white;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

.btn-secondary {
            background-color: transparent;
            color: white;
            border-color: white;
        }

.btn-secondary:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }

/* Stats */
        .stats {
            display: flex;
            gap: 2rem;
            margin-top: 3rem;
            flex-wrap: wrap;
        }

.stat-item {
            animation: fadeInUp 1s ease-out;
            animation-delay: calc(var(--delay) * 0.2s);
        }

.stat-item h3 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #90e0ef;
        }

.stat-item p {
            font-size: 0.9rem;
            opacity: 0.8;
            margin: 0;
        }

/* Image Content */
        .image-content {
            flex: 1;
            min-width: 300px;
            position: relative;
            height: 500px;
            animation: fadeInRight 1.5s ease-out;
        }

.main-image {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: contain;
            animation: float 6s ease-in-out infinite;
        }

.doctor-image {
            width: 80%;
            max-width: 400px;
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 3;
            animation: float 4s ease-in-out infinite;
            animation-delay: 0.5s;
        }

.nurse-image {
            width: 60%;
            max-width: 300px;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 2;
            animation: float 5s ease-in-out infinite;
            animation-delay: 0.3s;
        }

.equipment-image {
            width: 40%;
            max-width: 200px;
            position: absolute;
            top: 20%;
            right: 10%;
            z-index: 1;
            animation: rotate 15s linear infinite;
        }

/* Floating Elements */
        .floating-element {
            position: absolute;
            opacity: 0.7;
            z-index: 1;
        }

.floating-element.circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 8s ease-in-out infinite, scalePulse 4s infinite alternate;
        }

.floating-element.plus {
            font-size: 2rem;
            color: rgba(255, 255, 255, 0.3);
            animation: float 7s ease-in-out infinite, rotate 10s linear infinite;
        }

/* Animation Keyframes */
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0px);
            }
        }

@keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }

@keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

@keyframes scalePulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }

@keyframes textGlow {
            0% {
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
            }
            100% {
                text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
            }
        }

@keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

@keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-30px);
            }
            60% {
                transform: translateY(-15px);
            }
        }

@keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                transform: translateX(-5px);
            }
            20%, 40%, 60%, 80% {
                transform: translateX(5px);
            }
        }

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

@keyframes slideUp {
            from {
                transform: translateY(100px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

@keyframes zoomIn {
            from {
                transform: scale(0.5);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

@keyframes wave {
            0% {
                transform: rotate(0deg);
            }
            10% {
                transform: rotate(14deg);
            }
            20% {
                transform: rotate(-8deg);
            }
            30% {
                transform: rotate(14deg);
            }
            40% {
                transform: rotate(-4deg);
            }
            50% {
                transform: rotate(10deg);
            }
            60% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }

/* Features List */
        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 2rem;
        }

.feature-item {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            padding: 1rem;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            width: calc(50% - 0.5rem);
            min-width: 200px;
            animation: fadeIn 1s ease-out;
            animation-delay: calc(var(--delay) * 0.1s);
            transition: all 0.3s ease;
        }

.feature-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-5px);
        }

.feature-icon {
            font-size: 1.5rem;
            color: #90e0ef;
            animation: bounce 2s infinite;
        }

/* Responsive Adjustments */
        @media (max-width: 992px) {
            .content-wrapper {
                flex-direction: column;
                text-align: center;
            }

.text-content, .image-content {
                width: 100%;
                text-align: center;
            }

.btn-group {
                justify-content: center;
            }

.stats {
                justify-content: center;
            }

.feature-item {
                width: 100%;
            }

.doctor-image, .nurse-image {
                position: relative;
                margin: 0 auto;
            }
        }

@media (max-width: 576px) {
            .banner-container {
                padding: 1rem;
            }

.text-content {
                padding: 1rem;
            }

.stats {
                flex-direction: column;
                gap: 1rem;
            }

.image-content {
                height: 400px;
            }
        }

JavaScript

// Additional animations with JavaScript
        document.addEventListener('DOMContentLoaded', function() {
            // Animate features on hover
            const features = document.querySelectorAll('.feature-item');
            features.forEach(feature => {
                feature.addEventListener('mouseenter', function() {
                    this.style.animation = 'shake 0.5s ease';
                });
                feature.addEventListener('mouseleave', function() {
                    this.style.animation = 'fadeIn 1s ease-out';
                });
            });

// Animate buttons differently
            const buttons = document.querySelectorAll('.btn');
            buttons.forEach((button, index) => {
                button.style.animationDelay = `${index * 0.1}s`;
            });

// Parallax effect for floating elements
            window.addEventListener('mousemove', function(e) {
                const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
                const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
                const floatingElements = document.querySelectorAll('.floating-element');
                floatingElements.forEach(el => {
                    el.style.transform = `translate(${xAxis}px, ${yAxis}px)`;
                });
            });

// Wave animation for doctor image on click
            const doctorImage = document.querySelector('.doctor-image');
            if (doctorImage) {
                doctorImage.addEventListener('click', function() {
                    this.style.animation = 'wave 1s ease';
                    setTimeout(() => {
                        this.style.animation = 'float 4s ease-in-out infinite';
                    }, 1000);
                });
            }
        });

Hospital Banner Template Preview

Download Options