Timeline

Línea de tiempo vertical para mostrar hitos, historial de cambios o procesos paso a paso. HTML y CSS puro, sin JavaScript.

Dependencias Ninguna — HTML y CSS puro.

Descripción

El Timeline es una línea de tiempo vertical: una línea con puntos que va mostrando hechos en orden, uno debajo del otro. Solo usa HTML y CSS, sin JavaScript.

Sirve para mostrar la historia de un proyecto, los pasos de un proceso, o los hitos más importantes de una empresa (por ejemplo: lanzamiento, primer cliente, etc.).

La línea vertical no está escrita en el HTML: la dibuja el CSS solo, usando un truco llamado ::before que agrega un borde a la izquierda del contenedor. Los puntos de cada hito también los dibuja el CSS de la misma forma, y se acomodan justo sobre la línea.

Cada hito puede tener la clase active para destacarlo: el punto de ese hito cambia de color y el título se ve más resaltado que el resto.

Cada bloque de texto tiene un espacio a la izquierda (padding-left) para dejarle lugar a la línea y al punto, sin necesitar tablas ni grillas complicadas.

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

HTML

<section class="timeline-section">
  <div class="timeline-inner">
    <p class="timeline-label">Historia</p>
    <h2 class="timeline-heading">Cómo llegamos hasta acá</h2>

    <div class="timeline">

      <div class="timeline-item active">
        <span class="timeline-date">Enero 2024</span>
        <h3 class="timeline-title">Lanzamiento del producto</h3>
        <p class="timeline-desc">
          Publicamos la primera versión pública después
          de 6 meses de desarrollo privado.
        </p>
      </div>

      <div class="timeline-item">
        <span class="timeline-date">Marzo 2024</span>
        <h3 class="timeline-title">Primer cliente de pago</h3>
        <p class="timeline-desc">
          Cerramos nuestro primer contrato con una empresa
          del sector tecnológico.
        </p>
      </div>

      <div class="timeline-item">
        <span class="timeline-date">Junio 2024</span>
        <h3 class="timeline-title">Integración con APIs externas</h3>
        <p class="timeline-desc">
          Sumamos conectores para las plataformas más
          usadas por nuestros usuarios.
        </p>
      </div>

      <div class="timeline-item">
        <span class="timeline-date">Diciembre 2024</span>
        <h3 class="timeline-title">1000 usuarios activos</h3>
        <p class="timeline-desc">
          Cerramos el año superando el primer millar
          de usuarios activos mensuales.
        </p>
      </div>

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

CSS

/*
|----------------------------------------------------------
| Timeline — Kodeval Pages
| Línea de tiempo vertical. HTML y CSS puro.
| Sin dependencias externas.
|----------------------------------------------------------
*/

:root {
  --tl-accent:      #5865f2;
  --tl-line:        #e2e8f0;
  --tl-dot:         #cbd5e1;
  --tl-dot-active:  #5865f2;
  --tl-dot-size:    12px;
  --tl-text:        #0f172a;
  --tl-muted:       #64748b;
  --tl-date-color:  #94a3b8;
}

.timeline-section {
  background: #f8fafc;
  padding: 5rem 1.5rem;
}

.timeline-inner {
  max-width: 640px;
  margin: 0 auto;
}

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

.timeline-heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--tl-text);
  margin-bottom: 3rem;
  line-height: 1.15;
}

/* Contenedor de la línea */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: calc(var(--tl-dot-size) / 2 - 1px);
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--tl-line);
}

/* Item */
.timeline-item {
  position: relative;
  padding-bottom: 2.5rem;
}

.timeline-item:last-child { padding-bottom: 0; }

/* Punto en la línea */
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-2rem + var(--tl-dot-size) / 2 * -1 + 1px);
  top: 5px;
  width: var(--tl-dot-size);
  height: var(--tl-dot-size);
  border-radius: 50%;
  background: var(--tl-dot);
  border: 2px solid #f8fafc;
  transition: background 0.2s;
}

.timeline-item.active::before {
  background: var(--tl-dot-active);
  box-shadow: 0 0 0 4px rgba(88, 101, 242, 0.12);
}

/* Contenido */
.timeline-date {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--tl-date-color);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.timeline-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tl-text);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.timeline-item.active .timeline-title {
  color: var(--tl-accent);
}

.timeline-desc {
  font-size: 0.88rem;
  color: var(--tl-muted);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 600px) {
  .timeline-section { padding: 3rem 1rem; }
  .timeline { padding-left: 1.5rem; }
}