Que ce soit pour montrer un processus d'achat, les points importants de votre carrière sur votre portfolio, ou toute autre chose, apprenez à créer une timeline épurée et moderne pour le mettre en valeur !
Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram.
1ère étape
Commençons par le code HTML.
<div class="timeline">
<div class="timeline-object complete">
<div class="timeline-status"></div>
<div class="timeline-content">
<h3>Début de la formation</h3>
<span>19.06.2020</span>
</div>
</div>
<div class="timeline-object complete">
<div class="timeline-status"></div>
<div class="timeline-content">
<h3>Projet final</h3>
<span>05.07.2020</span>
</div>
</div>
<div class="timeline-object">
<div class="timeline-status"></div>
<div class="timeline-content">
<h3>Remise de diplômes</h3>
<span>17.09.2020</span>
</div>
</div>
</div>Chaque élément de la timeline dispose de son propre objet timeline-object.
2ème étape
Evitons les problèmes de padding.
* {
box-sizing: border-box;
}Cette petite astuce permet de dire que tous les éléments du site ( * ) doivent intégrer leurs padding dans leur taille.
3ème étape
Stylisons maintenant chaque objet de la timeline.
.timeline-object {
display: flex;
align-items: center;
margin-top: 50px;
position: relative;
}Rien de très particulier à ajouter : on utilise flexbox pour centrer les éléments ensemble.
4ème étape
Attaquons maintenant l'affichage des objets lorsqu'ils sont complétés.
.timeline-object.complete::after {
content: '';
display: block;
position: absolute;
width: 4px;
height: 100px;
background-color: #1DBF73;
left: 23px;
top: 50px;
transform: translateX(-50%);
}
5ème étape
On s'occupe du status des éléments.
.timeline-status {
height: 46px;
width: 46px;
border-radius: 50%;
background-color: #1DBF73;
}Chaque élément sera représenté par une petite icône en forme de rond.
6ème étape
Il faut maintenant s'occuper du status des éléments non complétés.
.timeline-object:not(.complete) .timeline-status {
background: #ffffff;
border: 4px solid #C5C5C5;
}Les éléments non complétés sont maintenant représentés par un cercle aux bordures grises.
7ème étape
Stylisons maintenant le contenu de chacun des objets : le titre et la balise span.
.timeline-content {
margin-left: 15px;
}
.timeline-content h3 {
color: #1DBF73;
background: #CFF6CF;
padding: 5px 10px;
border-radius: 5px;
margin-bottom: 10px;
}
.timeline-content span {
color: #103B27;
font-size: .9em;
font-weight: bold;
}
8ème étape
Il suffit maintenant de s'occuper du cas d'un titre non complété pour finir notre timeline.
.timeline-object:not(.complete) .timeline-content h3 {
color: #8A8A8A;
background: #E1E1DF;
}Les éléments non complétés ont enfin un titre grisé.