Timeline CSS

Créer une timeline en CSS

Source : https://believemy.com/fr/r/creer-une-timeline-epuree-et-moderne

Remise de diplômes

17.03.2026

Projet final

14.02.2026

Projet en cours

03.02.2026

Début de la formation

19.01.2026

Partage pour les utilisateurs confirmés 😀 à chacun de faire appel à ses propres connaissances pour modifier selon les convenances.

Code adapté au visuel de l'exemple ci-dessus.

Code à placer dans un élément HTML

                        <div class="timeline">
                        <div class="timeline-object">
                        <div class="timeline-status"></div>
                        <div class="timeline-content">
                        <h3>Remise de diplômes</h3>
                        <span>17.03.2026</span>
                        </div>
                        </div>
                        
                        <div class="timeline-object complete">
                        <div class="timeline-status"></div>
                        <div class="timeline-content">
                        <h3>Projet final</h3>
                        <span>14.02.2026</span>
                        </div>
                        </div>
                        
                        <div class="timeline-object complete">
                        <div class="timeline-status"></div>
                        <div class="timeline-content">
                        <h3>Projet en cours</h3>
                        <span>03.02.2026</span>
                        </div>
                        </div>
                        
                        <div class="timeline-object complete">
                        <div class="timeline-status"></div>
                        <div class="timeline-content">
                        <h3>Début de la formation</h3>
                        <span>19.01.2026</span>
                        </div>
                        </div>
                        </div>

Code à placer dans le CSS de lélément HTML

                        * {
                          box-sizing: border-box;
                        }
                        .timeline-object {
                          display: flex;
                          align-items: center;
                          margin-top: 50px;
                          position: relative;
                        }
                        .timeline-object.complete::after {
                          content: '';
                          display: block;
                          position: absolute;
                          
                          width: 2px;
                          height: 100px;
                          background-color: #821616;
                          
                          left: 10px;
                          bottom: 36px;
                          transform: translateX(-50%);
                        }
                        .timeline-status {
                          height: 20px;
                          width: 20px;
                          border-radius: 50%;
                          background-color: #821616;
                        }
                        .timeline-object:not(.complete) .timeline-status {
                          background: #ffffff;
                          border: 4px solid #821616;
                        }
                        .timeline-content {
                          margin-left: 15px;
                        }
                        
                        .timeline-content h3 {
                          color: #821616;
                          background: #f4c390;
                         font-size: 1em;
                          padding: 5px 10px;
                          border-radius: 5px;
                          margin-bottom: 10px;
                        }
                        
                        .timeline-content span {
                          color: #103B27;
                          font-size: .9em;
                          font-weight: bold;
                        }
                        .timeline-object:not(.complete) .timeline-content h3 {
                          color: #821616;
                          background: #E1E1DF;
                        }

Validation W3C

Slider et Image

Accordion

Divers 1

Divers 2

Mascarade

Lumière

Couché de soleil

Le Crozon

Remise de diplômes

Projet final

Projet en cours

Début de la formation