Tarjetas, listas y organización de contenido

Línea de tiempo vertical

Una línea de tiempo adaptable para mostrar el progreso del proyecto y los hitos clave.

HTMLCSSCronologíamaquetación

Tras activar JavaScript, puedes editar, ejecutar y guardar este ejemplo. El código fuente fijado es el siguiente:

<!doctype html>
<html lang="es" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Línea de tiempo vertical</title>
  <style>
    * { box-sizing: border-box; }
    body { min-height: 100vh; margin: 0; padding: clamp(34px, 7vw, 80px) 20px; color: #f2eee6; font-family: "Optima", "Microsoft YaHei", sans-serif; background: #152d2a; background-image: linear-gradient(30deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%); background-size: 36px 62px; }
    main { width: min(850px, 100%); margin: auto; }
    header { margin-bottom: 44px; }
    .year { color: #eeb95e; font-size: 12px; font-weight: 800; letter-spacing: .25em; }
    h1 { margin: 10px 0 12px; font: 700 clamp(40px, 8vw, 72px)/1 "STKaiti", "KaiTi", serif; }
    header p { max-width: 590px; margin: 0; color: #aebfba; line-height: 1.7; }
    .timeline { position: relative; }
    .timeline::before { content: ""; position: absolute; left: 104px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(#eeb95e, rgba(238,185,94,.1)); }
    article { position: relative; display: grid; grid-template-columns: 82px 1fr; gap: 52px; padding-bottom: 42px; }
    article:last-child { padding-bottom: 0; }
    time { padding-top: 5px; color: #eeb95e; font: 700 13px/1.2 ui-monospace, monospace; text-align: right; }
    .marker { position: absolute; left: 98px; top: 7px; width: 13px; height: 13px; border: 3px solid #152d2a; border-radius: 50%; background: #eeb95e; box-shadow: 0 0 0 1px #eeb95e, 0 0 22px rgba(238,185,94,.5); }
    .event { padding: 0 0 30px; border-bottom: 1px solid rgba(255,255,255,.12); }
    article:last-child .event { border-bottom: 0; }
    .event small { color: #70b8a7; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
    h2 { margin: 8px 0 10px; font: 700 clamp(24px, 4vw, 34px)/1.2 Georgia, "STSong", serif; }
    .event p { margin: 0; color: #aebfba; line-height: 1.7; }
    .tag { display: inline-block; margin-top: 16px; padding: 6px 10px; border: 1px solid rgba(238,185,94,.38); border-radius: 999px; color: #eeb95e; font-size: 11px; }
    @media (max-width: 580px) { .timeline::before { left: 8px; } article { grid-template-columns: 1fr; gap: 8px; padding-left: 34px; } time { text-align: left; } .marker { left: 2px; } }
  </style>
</head>
<body>
  <main>
    <header><span class="year">MILESTONES · 2026</span><h1>El viaje de una semilla</h1><p>Desde el primer boceto hasta que el producto llega realmente a las manos de los usuarios, cada hito merece quedar bien registrado.</p></header>
    <section class="timeline" aria-label="Cronograma del proyecto">
      <article><time datetime="2026-01">01 / JAN</time><i class="marker" aria-hidden="true"></i><div class="event"><small>IDEA</small><h2>Brote de concepto</h2><p>El equipo entrevistó a doce usuarios durante tres días y organizó los escenarios de uso y las hipótesis principales más importantes.</p><span class="tag">Confirmación de dirección</span></div></article>
      <article><time datetime="2026-03">18 / MAR</time><i class="marker" aria-hidden="true"></i><div class="event"><small>PROTOTYPE</small><h2>Prototipo de la primera versión</h2><p>El prototipo de baja fidelidad está listo; tras dos rondas de pruebas, el recorrido clave se redujo de siete pasos a cuatro.</p><span class="tag">Verificación de la experiencia</span></div></article>
      <article><time datetime="2026-05">06 / MAY</time><i class="marker" aria-hidden="true"></i><div class="event"><small>BUILD</small><h2>Entrar en desarrollo</h2><p>El sistema de diseño, el modelo de datos y los componentes básicos se implementaron de forma sincronizada, y por fin se puso en marcha la primera cadena de negocio completa.</p><span class="tag">Funcionalidad completada</span></div></article>
      <article><time datetime="2026-07">20 / JUL</time><i class="marker" aria-hidden="true"></i><div class="event"><small>LAUNCH</small><h2>Listos para partir</h2><p>Se completaron las comprobaciones de rendimiento y accesibilidad, se invitó a los primeros usuarios a participar y pronto comenzará un nuevo viaje.</p><span class="tag">próximamente</span></div></article>
    </section>
  </main>
</body>
</html>