3.1
Barre de navigation
Logo à gauche, liens à droite
⏱ 15 min
SOLUTION CSS
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
height: 60px;
background: #1a1d23;
}
.nav-links {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
RENDU EN DIRECT
3.2
Cartes de même hauteur
Footer toujours en bas de chaque carte
⏱ 15 min
SOLUTION CSS
.cards {
display: flex;
gap: 20px;
}
.card {
flex: 1; /* cartes de même largeur */
display: flex;
flex-direction: column; /* empilement vertical */
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.card p {
flex: 1; /* prend tout l'espace → pousse le bouton vers le bas */
}
.card-link {
margin-top: auto; /* alternative à flex:1 sur le paragraphe */
display: block;
padding: 8px 16px;
text-align: center;
}
RENDU EN DIRECT — boutons alignés en bas malgré le contenu variable
Carte 2
Contenu beaucoup plus long pour tester l'alignement vertical des boutons dans les cartes Flexbox.
En savoir plus