Our Services Hospital HTML CSS Template Free Download

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Our Services - Hospital</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 
</head>
<body>

<section class="services-section">
    <h2 data-animate>Our Medical Services</h2>
    <p data-animate>Providing compassionate care with modern facilities & expert doctors ?‍⚕️?‍⚕️. Your health is our priority.</p>

<div class="services-container">
      <div class="service-card" data-animate>
        <i class="fas fa-stethoscope"></i>
        <h3>General Checkup</h3>
        <p>Routine health examinations and personalized consultations with expert physicians.</p>
      </div>

<div class="service-card" data-animate>
        <i class="fas fa-x-ray"></i>
        <h3>Diagnostics</h3>
        <p>Advanced lab tests, X-rays, MRI, and ultrasound facilities for accurate diagnosis.</p>
      </div>

<div class="service-card" data-animate>
        <i class="fas fa-heartbeat"></i>
        <h3>Cardiology</h3>
        <p>Complete heart care including ECG, echo tests, and expert cardiologist consultations.</p>
      </div>

<div class="service-card" data-animate>
        <i class="fas fa-ambulance"></i>
        <h3>24/7 Emergency</h3>
        <p>Quick response emergency department with ambulance support available day & night.</p>
      </div>

<div class="service-card" data-animate>
        <i class="fas fa-syringe"></i>
        <h3>Vaccinations</h3>
        <p>Comprehensive vaccination programs for children, adults, and travelers.</p>
      </div>

<div class="service-card" data-animate>
        <i class="fas fa-procedures"></i>
        <h3>Inpatient Care</h3>
        <p>Comfortable wards, ICU, and specialized treatment rooms with round-the-clock care.</p>
      </div>
    </div>
  </section>

</body>
</html>

CSS

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}

body{
      background: linear-gradient(135deg,#e6f0ff,#ffffff);
      color:#333;
      overflow-x:hidden;
    }

.services-section{
      padding:90px 8%;
      text-align:center;
      position:relative;
    }

.services-section h2{
      font-size:2.8rem;
      font-weight:700;
      margin-bottom:15px;
      color:#004aad;
    }

.services-section p{
      font-size:1.05rem;
      color:#555;
      margin-bottom:55px;
      max-width:720px;
      margin-left:auto;
      margin-right:auto;
      line-height:1.6;
    }

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

.service-card{
      background:#fff;
      border-radius:15px;
      padding:35px 25px;
      border:1px solid rgba(0,74,173,0.15);
      box-shadow:0 6px 20px rgba(0,0,0,0.08);
      transition: all 0.4s ease;
      position:relative;
      overflow:hidden;
    }

.service-card::before{
      content:"";
      position:absolute;
      top:-100%;
      left:0;
      width:100%;
      height:100%;
      background: linear-gradient(135deg,rgba(0,74,173,0.9),rgba(0,200,255,0.8));
      transition:0.5s ease;
      z-index:0;
    }

.service-card:hover::before{
      top:0;
    }

.service-card i{
      font-size:2.8rem;
      color:#004aad;
      margin-bottom:20px;
      z-index:1;
      position:relative;
      transition:0.4s;
    }

.service-card h3{
      font-size:1.4rem;
      font-weight:600;
      margin-bottom:15px;
      z-index:1;
      position:relative;
      color:#004aad;
    }

.service-card p{
      font-size:0.95rem;
      color:#666;
      line-height:1.6;
      z-index:1;
      position:relative;
    }

.service-card:hover{
      transform: translateY(-12px);
      color:#fff;
    }

.service-card:hover h3,
    .service-card:hover p,
    .service-card:hover i{
      color:#fff;
    }

/* Scroll Animation */
    [data-animate]{
      opacity:0;
      transform:translateY(40px);
      transition:all 0.8s ease;
    }
    [data-animate].active{
      opacity:1;
      transform:translateY(0);
    }

@media(max-width:768px){
      .services-section h2{font-size:2.2rem;}
      .services-section p{font-size:0.95rem;}
      .service-card{padding:25px 20px;}
    }

JavaScript

Our Services Hospital Preview

Download Options