← All elements

CSS-Only Testimonials Using Scroll Snap

by @admin · 6 views

<div class="controls">
	<label for="toggle-spy">
		
		Toggle carousel spy
	</label>
</div>


<h1>What others say...</h1>
<p class="msg-supports">Sorry, your browser doesn't support <code>::scroll-*</code></p>

  <section class="carousel">
    <blockquote>
    <div>
      <p>“The coaches here actually listen and build a plan that fits my life. I’m stronger, faster, and finally enjoy training again.”</p>
      <cite>— Max Powerlift</cite>
    </div>
  </blockquote>

  <blockquote>
    <div>
      <p>“Fantastic facilities and a real sense of community. The group sessions push me but never leave me behind.”</p>
      <cite>— Gina Sprintwell</cite>
    </div>
  </blockquote>

  <blockquote>
    <div>
      <p>“After just three months my sprint times dropped and my confidence skyrocketed. The personalized attention makes all the difference.”</p>
      <cite>— Brock Ironson</cite>
    </div>
  </blockquote>

  <blockquote class="scroll-start">
    <div>
      <p>“Clean, modern gym, smart programming, and trainers who care about technique. I finally fixed nagging knee pain while getting fitter.”</p>
      <cite>— Felicity Flexor</cite>
    </div>
  </blockquote>

  <blockquote>
    <div>
      <p>“Their youth program is top notch — my son loves the drills and has improved so much both on and off the field.”</p>
      <cite>— Tommy Touchdown</cite>
    </div>
  </blockquote>

  <blockquote>
    <div>
      <p>“Great variety of classes, flexible scheduling, and trainers who actually explain why we do each exercise. Highly recommend.”</p>
      <cite>— Sofia Martinez</cite> <!-- kept one "realistic" name -->
    </div>
  </blockquote>

  <blockquote>
    <div>
      <p>“I joined for performance training and stayed for the community. Real results, zero ego — exactly what I needed.”</p>
      <cite>— Benny Benchpress</cite>
    </div>
  </blockquote>
  </section>