Cartes, listes et organisation du contenu

Chronologie verticale

Chronologie adaptative pour afficher l’avancement d’un projet et ses étapes clés.

HTMLCSSchronologiemise en page

Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :

<!doctype html>
<html lang="fr" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Chronologie verticale</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>Le voyage d’une graine</h1><p>De la première esquisse jusqu’au moment où le produit parvient réellement entre les mains des utilisateurs, chaque étape mérite d’être consignée avec soin.</p></header>
    <section class="timeline" aria-label="Chronologie du projet">
      <article><time datetime="2026-01">01 / JAN</time><i class="marker" aria-hidden="true"></i><div class="event"><small>IDEA</small><h2>Germe de concept</h2><p>L’équipe a mené des entretiens avec douze utilisateurs pendant trois jours et a dégagé les scénarios d’utilisation et les hypothèses clés les plus importants.</p><span class="tag">Confirmation de direction</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>Prototype de première version</h2><p>Le prototype basse fidélité est terminé ; après deux séries de tests, le parcours critique est passé de sept étapes à quatre.</p><span class="tag">Validation de l’expérience</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>Accéder au développement</h2><p>Le système de design, le modèle de données et les composants de base ont été déployés en synchronisation, et la première chaîne métier complète a été officiellement mise en service.</p><span class="tag">Fonctionnalité terminée</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>Prêt à partir</h2><p>Après avoir terminé les vérifications de performance et d’accessibilité, inviter les premiers utilisateurs à tester : un nouveau voyage est sur le point de commencer.</p><span class="tag">Bientôt disponible</span></div></article>
    </section>
  </main>
</body>
</html>