Our School Programs | QuickCoder | The frontend studio

HTML

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

</head>
<body>

<section class="school-section">
    <h2>Our School Programs</h2>
    <p>Empowering students with education, creativity & life skills for a brighter future.</p>

<div class="service-card">
        <img src="https://plus.unsplash.com/premium_photo-1680807869780-e0876a6f3cd5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8c2Nob29sfGVufDB8fDB8fHww" alt="Primary Education">
        <div class="service-content">
          <h3>Primary Education</h3>
          <p>Strong foundation with engaging activities for kids aged 5-10.</p>
          <a href="#" class="learn-btn">Learn More</a>
        </div>
      </div>

<div class="service-card">
        <img src="https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8c2Nob29sfGVufDB8fDB8fHww" alt="Sports Activities">
        <div class="service-content">
          <h3>Sports & Fitness</h3>
          <p>Dedicated sports programs for physical fitness & team spirit.</p>
          <a href="#" class="learn-btn">Learn More</a>
        </div>
      </div>

<div class="service-card">
        <img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8c2Nob29sfGVufDB8fDB8fHww" alt="Arts & Creativity">
        <div class="service-content">
          <h3>Arts & Creativity</h3>
          <p>Painting, music & theatre programs to build creative skills.</p>
          <a href="#" class="learn-btn">Learn More</a>
        </div>
      </div>

<div class="service-card">
        <img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fHNjaG9vbHxlbnwwfHwwfHx8MA%3D%3D" alt="Science Labs">
        <div class="service-content">
          <h3>Science Labs</h3>
          <p>Modern labs for practical experiments & innovative learning.</p>
          <a href="#" class="learn-btn">Learn More</a>
        </div>
      </div>

</div>
  </section>

</body>
</html>

CSS

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

.school-section{
      padding:90px 8%;
      background:linear-gradient(135deg,#e3f2fd,#fff);
      text-align:center;
    }
    .school-section h2{
      font-size:2.8rem;
      font-weight:700;
      margin-bottom:12px;
      color:#1565c0;
    }
    .school-section p{
      font-size:1.1rem;
      color:#444;
      margin-bottom:60px;
    }

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

.service-card{
      background:#fff;
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 6px 20px rgba(0,0,0,0.08);
      transition:.4s ease;
    }
    .service-card:hover{
      transform:translateY(-12px);
      box-shadow:0 12px 28px rgba(0,0,0,0.15);
    }
    .service-card img{
      width:100%;
      height:200px;
      object-fit:cover;
      transition:.4s ease;
    }
    .service-card:hover img{
      transform:scale(1.08);
    }
    .service-content{
      padding:22px;
      text-align:left;
    }
    .service-content h3{
      font-size:1.4rem;
      margin-bottom:10px;
      color:#0d47a1;
      font-weight:600;
    }
    .service-content p{
      font-size:.95rem;
      color:#555;
      line-height:1.5;
    }
    .learn-btn{
      display:inline-block;
      margin-top:14px;
      padding:10px 20px;
      background:#1565c0;
      color:#fff;
      border-radius:30px;
      font-weight:600;
      text-decoration:none;
      transition:.3s ease;
    }
    .learn-btn:hover{background:#0d47a1;}
    
    @media(max-width:768px){
      .school-section h2{font-size:2rem;}
    }

JavaScript

Our School Programs Preview

Download Options