Testimonios

Grid de testimonios con avatar generado por iniciales, cita, nombre y rol. Ideal para landing pages. HTML y CSS puro.

Dependencias Ninguna — HTML y CSS puro.

Descripción

Esta sección muestra tarjetas con opiniones de tus usuarios o clientes. Sirve para que la gente que visita tu página confíe más en tu producto.

Cada tarjeta tiene la cita (lo que dijo la persona), un círculo de color con sus iniciales, su nombre y su cargo o empresa. Ese círculo con iniciales es el "avatar": una imagen que representa a la persona.

No hace falta subir fotos reales. El avatar se arma solo con las iniciales, y podés cambiar el color de fondo de cada uno con la variable --avatar-bg (una variable es un valor que definís una vez y reusás en varios lugares).

Las tarjetas se acomodan solas según el ancho de la pantalla: 3 columnas en pantallas grandes, 2 en tablet y 1 en celular. Esto lo logra el CSS con grid y auto-fit, sin que vos tengas que hacer nada.

Las comillas grandes que decoran cada tarjeta no están escritas en el HTML: las agrega el CSS automáticamente con ::before, un truco para sumar contenido visual sin tocar el texto.

Para usarlo, pegá el HTML donde quieras mostrar los testimonios y pegá el CSS en tu archivo de estilos (o en un <style> dentro del <head>). No necesita nada más.

HTML

<section class="testimonials">
  <div class="testimonials-inner">
    <p class="testimonials-label">Testimonios</p>
    <h2 class="testimonials-title">Lo que dicen nuestros usuarios</h2>
    <div class="testimonials-grid">

      <div class="testimonial-card">
        <p class="testimonial-quote">
          Cambió completamente la forma en que trabajo.
          En menos de una semana ya recuperé el tiempo
          que venía perdiendo hace meses.
        </p>
        <div class="testimonial-author">
          <div class="testimonial-avatar" style="--avatar-bg:#5865f2">AG</div>
          <div>
            <p class="testimonial-name">Ana Gómez</p>
            <p class="testimonial-role">Diseñadora UX, Startup ABC</p>
          </div>
        </div>
      </div>

      <div class="testimonial-card">
        <p class="testimonial-quote">
          La herramienta más simple que probamos y la
          única que el equipo adoptó sin que tuviera
          que convencer a nadie.
        </p>
        <div class="testimonial-author">
          <div class="testimonial-avatar" style="--avatar-bg:#0ea5e9">MR</div>
          <div>
            <p class="testimonial-name">Martín Rojas</p>
            <p class="testimonial-role">CTO, Empresa XYZ</p>
          </div>
        </div>
      </div>

      <div class="testimonial-card">
        <p class="testimonial-quote">
          Excelente soporte. Cada duda que tuve fue
          respondida en menos de dos horas y siempre
          con una respuesta útil.
        </p>
        <div class="testimonial-author">
          <div class="testimonial-avatar" style="--avatar-bg:#10b981">LF</div>
          <div>
            <p class="testimonial-name">Laura Fernández</p>
            <p class="testimonial-role">Product Manager, Corp DEF</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

CSS

/*
|----------------------------------------------------------
| Testimonios — Kodeval Pages
| Grid de testimonios con avatar por iniciales.
| HTML y CSS puro. Sin dependencias externas.
|----------------------------------------------------------
*/

:root {
  --t-bg:          #f8fafc;
  --t-card-bg:     #ffffff;
  --t-border:      #e2e8f0;
  --t-radius:      16px;
  --t-quote-color: #0f172a;
  --t-meta-color:  #64748b;
  --t-accent:      #5865f2;
}

.testimonials {
  background: var(--t-bg);
  padding: 5rem 1.5rem;
}

.testimonials-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.testimonials-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t-accent);
  margin-bottom: 0.75rem;
}

.testimonials-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3rem;
  line-height: 1.15;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.testimonial-card {
  background: var(--t-card-bg);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
}

/* Comillas decorativas */
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 4rem;
  line-height: 1;
  color: var(--t-border);
  font-family: Georgia, serif;
  pointer-events: none;
}

.testimonial-quote {
  font-size: 0.95rem;
  color: var(--t-quote-color);
  line-height: 1.75;
  margin: 0;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--avatar-bg, #5865f2);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.testimonial-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.1rem;
}

.testimonial-role {
  font-size: 0.78rem;
  color: var(--t-meta-color);
  margin: 0;
}

@media (max-width: 600px) {
  .testimonials { padding: 3rem 1rem; }
}