Pour chaque tâche, crée des classes séparées dans le fichier style.css et applique-les aux balises correspondantes.
📌 Structure des fichiers : index.html + style.css
💡 Règle principale : display: flex s'écrit toujours sur le parent, pas sur l'élément
enfant.
Un bloc haut est à gauche. À droite il y a trois blocs identiques empilés les uns sous les autres. Le premier touche le bord supérieur, le deuxième est centré, le troisième touche le bord inférieur.
Une carte se trouve au centre d'un grand container. À l'intérieur de la carte, un bloc est en haut, en dessous deux blocs côte à côte, et en bas encore un bloc large.
Le container est divisé en trois colonnes. À gauche il y a deux blocs — en haut et en bas. Au centre il y a un bloc au milieu. À droite il y a trois blocs identiques empilés les uns sous les autres.
Un bloc large est en haut. En dessous il y a deux colonnes. La colonne gauche a trois blocs identiques empilés les uns sous les autres. La colonne droite a un bloc haut.
Le container est composé de deux parties. À gauche il y a un bloc carré. À droite il y a deux lignes. Chaque ligne a deux blocs identiques côte à côte.
px pour toutes les tailles.Une carte se trouve au centre d'un grand container. En haut il y a trois petits blocs sur une ligne. Au milieu il y a un bloc large. En bas il y a de nouveau trois petits blocs sur une ligne.
Reproduis la disposition des blocs.
px pour toutes les tailles.
Important :
Chaque classe est écrite séparément dans style.css.
Utilisez uniquement HTML et CSS.
Entraîne-toi sur les propriétés :
display: flex,
flex-direction,
justify-content,
align-items.