Fitness Web Design

The high-energy hero

Full-bleed action photo (or looping video), a dark overlay so text pops, huge uppercase type, and one loud call to action. It should make you want to move.

<section class="fit-hero">
  <div class="hc">
    <div class="k">Annandale · Open 24/7</div>
    <h3>Stronger<br>starts here.</h3>
    <p>Unlimited classes, expert coaches, and a community that shows up. First week's on us.</p>
    <a href="#" class="cta">Join now</a>
  </div>
</section>

body { background: #0a0a0c; color: #f5f5f7; font-family: sans-serif; margin: 0; }

.fit-hero {
  position: relative; border-radius: 16px; overflow: hidden;
  min-height: 380px; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, rgba(10,10,12,.1), rgba(10,10,12,.92)),  /* dark overlay = readable text */
    url('https://images.unsplash.com/photo-1517649763962-0c623066013b?w=1200&q=80') center/cover;
}
.fit-hero .hc { position: relative; padding: 36px; }
.fit-hero .k  { color: #a3e635; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
.fit-hero h3  { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 900; text-transform: uppercase;
                line-height: .92; letter-spacing: -.02em; margin: 8px 0; }
.fit-hero p   { color: rgba(255,255,255,.75); max-width: 420px; margin-bottom: 18px; }
.fit-hero .cta {
  display: inline-block; background: #a3e635; color: #0a0a0c; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; padding: 13px 30px;
  border-radius: 8px; text-decoration: none; font-size: .9rem;
}

Class schedule

Members want to scan times fast. Show the time, the class, the coach, and a one-tap way to book — no digging through PDFs.

<div class="sched">
  <div class="cls">
    <span class="time">6:00<br>AM</span>
    <div><div class="nm">Sunrise HIIT</div><div class="meta">45 min · Coach Maya</div></div>
    <a href="#" class="book">Book</a>
  </div>
  <div class="cls">
    <span class="time">9:30<br>AM</span>
    <div><div class="nm">Power Yoga</div><div class="meta">60 min · Coach Sam</div></div>
    <a href="#" class="book">Book</a>
  </div>
  <div class="cls">
    <span class="time">12:15<br>PM</span>
    <div><div class="nm">Express Strength</div><div class="meta">30 min · Coach Theo</div></div>
    <a href="#" class="book">Book</a>
  </div>
  <div class="cls">
    <span class="time">6:00<br>PM</span>
    <div><div class="nm">Spin & Beats</div><div class="meta">45 min · Coach Rae</div></div>
    <a href="#" class="book">Book</a>
  </div>
</div>

body { background: #0a0a0c; color: #f5f5f7; font-family: sans-serif; margin: 0; }

.sched { display: grid; gap: 10px; }
.cls {
  display: grid;
  grid-template-columns: 84px 1fr auto;   /* time | details | book */
  gap: 16px; align-items: center;
  background: #16161b; border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 14px 18px;
}
.cls .time { font-weight: 800; color: #a3e635; font-size: .95rem; }
.cls .nm   { font-weight: 700; }
.cls .meta { font-size: .8rem; color: #86868b; }
.cls .book {
  background: rgba(163,230,53,.14); color: #a3e635; border: 1px solid rgba(163,230,53,.3);
  font-weight: 700; font-size: .78rem; padding: 7px 14px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
}
@media (max-width: 600px) {
  .cls { grid-template-columns: 70px 1fr; }
  .cls .book { grid-column: 2; justify-self: start; margin-top: 4px; }
}

Trainer profiles

People join for the coaches. A photo, a name, a specialty, and a one-line bio build trust before anyone walks in.

Maya R.

HIIT & Conditioning

Former track athlete. Lives for the 6am crew.

Sam T.

Yoga & Mobility

200-hr RYT. Makes flexibility feel possible.

Rae K.

Spin & Cardio

Brings the playlists and the energy.

<div class="trainers">
  <div class="trainer">
    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&q=80" alt="Coach Maya">
    <h4>Maya R.</h4>
    <div class="sp">HIIT & Conditioning</div>
    <p>Former track athlete. Lives for the 6am crew.</p>
  </div>
  <div class="trainer">
    <img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=200&q=80" alt="Coach Sam">
    <h4>Sam T.</h4>
    <div class="sp">Yoga & Mobility</div>
    <p>200-hr RYT. Makes flexibility feel possible.</p>
  </div>
  <div class="trainer">
    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=200&q=80" alt="Coach Rae">
    <h4>Rae K.</h4>
    <div class="sp">Spin & Cardio</div>
    <p>Brings the playlists and the energy.</p>
  </div>
</div>

body { background: #0a0a0c; color: #f5f5f7; font-family: sans-serif; margin: 0; }

.trainers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.trainer {
  background: #16161b; border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 22px; text-align: center;
}
.trainer img {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 12px; border: 3px solid rgba(163,230,53,.4);
}
.trainer h4 { font-size: 1rem; }
.trainer .sp { color: #a3e635; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.trainer p  { color: #86868b; font-size: .82rem; margin-top: 8px; }

Membership pricing

Show real prices, not "Contact us." Three clear tiers with the recommended one highlighted removes hesitation.

<!-- the ✓ marks use a plain text character so no icon font is needed -->
<div class="tiers">
  <div class="tier">
    <div class="pl">Starter</div>
    <div class="pr">$29<span>/mo</span></div>
    <ul>
      <li><i>✓</i> Gym access</li>
      <li><i>✓</i> 2 classes / week</li>
      <li><i>✓</i> App workouts</li>
    </ul>
    <a href="#" class="pick ghost">Choose</a>
  </div>

  <div class="tier feat">
    <div class="tag">Most popular</div>
    <div class="pl">Unlimited</div>
    <div class="pr">$59<span>/mo</span></div>
    <ul>
      <li><i>✓</i> Everything in Starter</li>
      <li><i>✓</i> Unlimited classes</li>
      <li><i>✓</i> 1 PT session / mo</li>
      <li><i>✓</i> Guest passes</li>
    </ul>
    <a href="#" class="pick solid">Choose</a>
  </div>

  <div class="tier">
    <div class="pl">Elite</div>
    <div class="pr">$99<span>/mo</span></div>
    <ul>
      <li><i>✓</i> Everything in Unlimited</li>
      <li><i>✓</i> Weekly PT</li>
      <li><i>✓</i> Nutrition plan</li>
    </ul>
    <a href="#" class="pick ghost">Choose</a>
  </div>
</div>

body { background: #0a0a0c; color: #f5f5f7; font-family: sans-serif; margin: 0; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier {
  background: #16161b; border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 26px 22px; text-align: center;
}
.tier.feat {                                       /* highlight the nudge */
  border-color: #a3e635; transform: scale(1.03); position: relative;
  background: linear-gradient(180deg, rgba(163,230,53,.08), #16161b);
}
.tier.feat .tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #a3e635; color: #0a0a0c; font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px; border-radius: 999px;
}
.tier .pl { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: #cbd5e1; }
.tier .pr { font-size: 2.4rem; font-weight: 900; margin: 8px 0; }
.tier .pr span { font-size: .9rem; color: #86868b; font-weight: 500; }
.tier ul { list-style: none; text-align: left; display: grid; gap: 8px; margin: 16px 0; padding: 0; }
.tier li { font-size: .85rem; color: #a1a1aa; display: flex; gap: 8px; }
.tier li i { color: #a3e635; font-style: normal; }
.tier .pick {
  display: block; padding: 11px; border-radius: 8px; text-decoration: none;
  font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em;
}
.tier .pick.solid { background: #a3e635; color: #0a0a0c; }
.tier .pick.ghost { border: 1px solid rgba(255,255,255,.2); color: #fff; }
@media (max-width: 680px) { .tiers { grid-template-columns: 1fr; } }

Results & testimonials

Proof sells. Big numbers plus real member quotes show the gym actually delivers.

<div class="stats">
  <div class="stat"><div class="n">12k+</div><div class="l">Members</div></div>
  <div class="stat"><div class="n">40+</div><div class="l">Classes / week</div></div>
  <div class="stat"><div class="n">4.9★</div><div class="l">Avg rating</div></div>
  <div class="stat"><div class="n">15</div><div class="l">Expert coaches</div></div>
</div>

<div class="quotes">
  <div class="quote">
    <div class="stars">★★★★★</div>
    <p>"Lost 20 lbs and actually look forward to mornings now. The coaches know my name."</p>
    <div class="who"><span class="av"></span><div><b>Jordan P.</b><small>Member, 1 year</small></div></div>
  </div>
  <div class="quote">
    <div class="stars">★★★★★</div>
    <p>"Best community I've found. The class booking is so easy I never miss a session."</p>
    <div class="who"><span class="av"></span><div><b>Priya S.</b><small>Member, 8 months</small></div></div>
  </div>
</div>

body { background: #0a0a0c; color: #f5f5f7; font-family: sans-serif; margin: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat {
  background: #16161b; border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 22px 12px; text-align: center;
}
.stat .n { font-size: 2rem; font-weight: 900; color: #a3e635; }
.stat .l { font-size: .76rem; color: #86868b; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.quote {
  background: #16161b; border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 20px;
}
.quote .stars { color: #fbbf24; margin-bottom: 8px; letter-spacing: 2px; }
.quote p { color: #cbd5e1; font-size: .9rem; font-style: italic; margin-bottom: 12px; }
.quote .who { display: flex; align-items: center; gap: 10px; }
.quote .who .av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #a3e635, #ef4444); }
.quote .who b { font-size: .85rem; display: block; }
.quote .who small { color: #86868b; }

// Make the big stat numbers count up when the section scrolls into view.
// Drop this at the bottom of your page (before </body>).
(function () {
  function animate(el, target) {
    var start = 0;
    var dur = 1200;          // ms
    var t0 = performance.now();
    function step(now) {
      var p = Math.min(1, (now - t0) / dur);
      var val = Math.round(start + (target - start) * p);
      // keep any trailing text like "+" or "k+"
      el.textContent = val + (el.dataset.suffix || '');
      if (p < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }

  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) return;
      var n = entry.target;
      var raw = n.textContent.trim();
      var num = parseInt(raw, 10);
      n.dataset.suffix = raw.replace(/^[0-9]+/, '');  // "k+", "+", "★"
      animate(n, isNaN(num) ? 0 : num);
      io.unobserve(n);
    });
  }, { threshold: 0.3 });

  document.querySelectorAll('.stat .n').forEach(function (n) { io.observe(n); });
})();

The closing call to action

End every fitness page with one obvious next step — usually a free trial or a booked intro session.

<section class="book-cta">
  <h3>Your first class is free.</h3>
  <p>No contracts, no pressure. Come see what all the energy is about.</p>
  <a href="#" class="cta">Book a free session</a>
</section>

body { background: #0a0a0c; color: #f5f5f7; font-family: sans-serif; margin: 0; }

.book-cta {
  text-align: center; padding: 48px 32px; border-radius: 16px;
  background: linear-gradient(120deg, #1a2e05, #3f1212);   /* energetic gradient */
  border: 1px solid rgba(163,230,53,.2);
}
.book-cta h3 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 8px; }
.book-cta p  { color: #a1a1aa; max-width: 420px; margin: 0 auto 22px; }
.book-cta .cta {
  display: inline-block; background: #a3e635; color: #0a0a0c; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 14px 34px; border-radius: 8px; text-decoration: none;
}