Page témoignages
L'objectif de la mise en forme sera de ne pas toucher au Markdown/HTML et de te baser uniquement sur :
- CSS Grid
- des sélecteurs de type
:nth-child()
pour cibler les éléments souhaités du tableau
Quelques étapes pour guider tes commits :
-
récupérer la branche feature/temoignages
sur ton ordinateur à l'aide des commandes Git que tu connais déjà -
donner la couleur bleue aux 3ème et 6ème <li>
-
donner la couleur gris clair aux 1ère, 5ème et 7ème <li>
-
donner la couleur gris foncée aux 2ème, 4èmes et 8ème <li>
-
utiliser text-align: right
sur les<li>
concernés -
utiliser la propriété grid-template-columns
pour spécifier qu'il y a 3 colonnes, d'une taille de1fr
chacune -
pour le 1er <li>
, utilisergrid-column
pour spécifier qu'elle s'étale sur 2 colonnes (span 2
) -
pour le 3ème <li>
, idem mais avec un étalement sur 3 colonnes -
pour le 4ème <li>
, utilisergrid-row
pour spécifier qu'elle s'étale sur 2 lignes (span 2
) -
pour les 5èmes et 6ème <li>
, spécifier qu'elles s'étalent sur 2 colonnes -
pour les 7èmes et 8èmes<li>
, spécifier qu'elles s'étalent sur 1.5 colonnes (c'est pas dit que ça marche, pas essayé) -
transformer le template de grille pour passer de 3 à 6 colonnes -
adapter les dimensions de colonnes -
pour les 7èmes et 8èmes <li>
, spécifier qu'elles s'étalent sur 3 colonnes
Edited by Thomas Parisot