Yoga Class Slider | QuickCoder | The frontend studio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Yoga Class Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<div class="heading">
    <h2>Find Your <span>Inner Balance</span></h2>
    <p>
      Join our yoga sessions designed to calm your mind,
      strengthen your body and restore inner peace.
    </p>
  </div>

<div class="card">
        <img src="https://images.unsplash.com/photo-1552196563-55cd4e45efb3?auto=format&fit=crop&w=900&q=80">
        <div class="card-body">
          <h3>Morning Flow Yoga</h3>
          <p>
            Gentle movements to energize your body
            and start your day with clarity.
          </p>
          <div class="meta">
            <span>⏱ 45 Minutes</span>
            <a class="btn">Join Class</a>
          </div>
        </div>
      </div>

<div class="card">
        <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=900&q=80">
        <div class="card-body">
          <h3>Hatha Yoga</h3>
          <p>
            Focus on posture, breathing and balance
            to improve flexibility and strength.
          </p>
          <div class="meta">
            <span>⏱ 60 Minutes</span>
            <a class="btn">Join Class</a>
          </div>
        </div>
      </div>

<div class="card">
        <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?auto=format&fit=crop&w=900&q=80">
        <div class="card-body">
          <h3>Meditation & Breath</h3>
          <p>
            Slow down, breathe deeply and reconnect
            with your inner self.
          </p>
          <div class="meta">
            <span>⏱ 30 Minutes</span>
            <a class="btn">Join Class</a>
          </div>
        </div>
      </div>

</div>

</div>

</section>

</body>
</html>

CSS

:root{
  --bg:#f4f7f3;
  --primary:#6b8e7d;
  --dark:#1f2933;
  --muted:#6b7280;
  --card:#ffffff;
}

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

body{
  background:var(--bg);
  color:var(--dark);
}

/* SECTION */
.section{
  padding:90px 6%;
}

.heading{
  max-width:700px;
  margin-bottom:60px;
}

.heading h2{
  font-size:42px;
  font-weight:600;
  line-height:1.2;
}

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

.heading p{
  margin-top:14px;
  color:var(--muted);
  font-size:16px;
}

/* SLIDER */
.slider-wrap{
  position:relative;
}

.slider{
  display:flex;
  gap:40px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom:20px;
}

.slider::-webkit-scrollbar{
  height:4px;
}
.slider::-webkit-scrollbar-thumb{
  background:var(--primary);
  border-radius:10px;
}

/* CARD */
.card{
  min-width:380px;
  background:var(--card);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.08);
  transition:.6s;
}

.card:hover{
  transform:translateY(-10px);
}

/* IMAGE */
.card img{
  width:100%;
  height:260px;
  object-fit:cover;
  transition:1s;
}

.card:hover img{
  transform:scale(1.08);
}

/* CONTENT */
.card-body{
  padding:32px;
}

.card-body h3{
  font-size:24px;
  font-weight:500;
  margin-bottom:10px;
}

.card-body p{
  font-size:15px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:22px;
}

/* META */
.meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.meta span{
  font-size:14px;
  color:var(--muted);
}

/* BUTTON */
.btn{
  padding:10px 22px;
  border-radius:30px;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  font-size:14px;
  transition:.3s;
}

.btn:hover{
  opacity:.9;
}

/* ARROWS */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.arrow svg{
  width:18px;
  stroke:var(--dark);
  stroke-width:2;
  fill:none;
}

.arrow.left{ left:-25px; }
.arrow.right{ right:-25px; }

/* MOBILE */
@media(max-width:768px){
  .heading h2{ font-size:30px; }
  .card{ min-width:280px; }
  .arrow{ display:none; }
}

JavaScript

Yoga Class Slider Preview

Download Options