← 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>