Testimonials HTML Template

Showcase social proof with quote cards, avatars, and company roles.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Client Testimonials | Halo Studio</title>
  <style>
    body { font-family: 'Inter', sans-serif; background: #040506; color: white; margin: 0; }
    header { text-align: center; padding: 4rem 1.5rem 2rem; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1100px; margin: 0 auto 4rem; padding: 0 1.5rem; }
    blockquote { background: #0f172a; border-radius: 1.5rem; padding: 2rem; border: 1px solid rgba(255,255,255,0.05); min-height: 260px; }
    blockquote p { font-size: 1.1rem; margin-bottom: 1.5rem; }
    .author { display: flex; align-items: center; gap: 0.85rem; }
    .avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
    .author span { display: block; font-size: 0.9rem; color: rgba(255,255,255,0.6); }
  </style>
</head>
<body>
  <header>
    <h1>Trusted by modern product teams</h1>
    <p>Over 800 companies partner with Halo to scale design and engineering.</p>
  </header>
  <section class="grid">
    <blockquote>
      <p>“Halo rebuilt our design system from the ground up and mentored our designers through implementation.”</p>
      <div class="author">
        <img class="avatar" src="https://images.unsplash.com/photo-1504593811423-6dd665756598?auto=format&fit=crop&w=200&q=80" alt="Portrait" />
        <div>
          <strong>Leah Patel</strong>
          <span>VP Product · Merge</span>
        </div>
      </div>
    </blockquote>
    <blockquote>
      <p>“They ship quickly without sacrificing craft. Our activation rate jumped 37% after launch.”</p>
      <div class="author">
        <img class="avatar" src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?auto=format&fit=crop&w=200&q=80" alt="Portrait" />
        <div>
          <strong>Brandon Lee</strong>
          <span>Head of Growth · Ember</span>
        </div>
      </div>
    </blockquote>
    <blockquote>
      <p>“Halo is the rare team that can think through product strategy and own every pixel of execution.”</p>
      <div class="author">
        <img class="avatar" src="https://images.unsplash.com/photo-1544723795-432537dcf17c?auto=format&fit=crop&w=200&q=80" alt="Portrait" />
        <div>
          <strong>Isabelle Crawford</strong>
          <span>CEO · Parkside</span>
        </div>
      </div>
    </blockquote>
  </section>
</body>
</html>

← Back to all templates