Cartões, listas e organização de conteúdo

Linha do tempo vertical

Linha do tempo responsiva para exibir o andamento do projeto e os marcos principais.

HTMLCSSlinha do tempolayout

É possível editar, executar e salvar este exemplo após ativar JavaScript. O código-fonte fixo é o seguinte:

<!doctype html>
<html lang="pt-BR" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Linha do tempo 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>A jornada de uma semente</h1><p>Do primeiro esboço até o produto chegar de fato às mãos dos usuários, cada etapa merece ser registrada com cuidado.</p></header>
    <section class="timeline" aria-label="Cronograma do projeto">
      <article><time datetime="2026-01">01 / JAN</time><i class="marker" aria-hidden="true"></i><div class="event"><small>IDEA</small><h2>Germinação de conceito</h2><p>A equipe entrevistou doze usuários ao longo de três dias e organizou os cenários de uso mais importantes e as hipóteses principais.</p><span class="tag">Confirmação de direção</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>Primeiro protótipo</h2><p>O protótipo de baixa fidelidade foi concluído; após duas rodadas de testes, o caminho crítico foi reduzido de sete etapas para quatro.</p><span class="tag">Validação da experiência</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 no desenvolvimento</h2><p>O sistema de design, o modelo de dados e os componentes básicos foram implementados em conjunto, e o primeiro fluxo de negócio completo entrou oficialmente em operação.</p><span class="tag">Funcionalidade concluída</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>Preparar para partir</h2><p>Concluídas as verificações de desempenho e acessibilidade, os primeiros usuários são convidados a participar da experiência; uma nova jornada está prestes a começar.</p><span class="tag">Em breve</span></div></article>
    </section>
  </main>
</body>
</html>