Exercice 8.6 · 10 min · 0 tentative
Défi : les cartes du club photo
🎯 Objectif
Le grand final du module : habiller trois cartes complètes, avec les quatre couches du modèle de boîte — sans exemple sous les yeux.
📝 Consigne
Le programme du club photo est écrit, mais il ressemble à une liste de courses. On va en faire de vraies cartes.
Le HTML est figé, n'y touche pas : la classe carte est déjà posée sur les trois annonces. Tout se passe dans l'onglet CSS, deux règles à écrire :
- Sur le
<body>: un fond couleur #f5f5f4, le crème de la page - Une seule règle pour la classe
carte— elle habillera les trois annonces d'un coup — avec, dans l'ordre :- le mode de calcul de la largeur qui compte tout à l'intérieur (exercice 6.4)
- une largeur de 300 pixels
- l'air intérieur en deux valeurs : 16 pixels en haut et en bas, 24 à gauche et à droite
- un cadre de 2 pixels, en trait continu, couleur #d45e95
- des coins arrondis de 12 pixels
- l'espace extérieur en deux valeurs : 16 pixels en haut et en bas, et le centrage horizontal
- un fond blanc #ffffff
Résultat attendu
Trois cartes blanches identiques, cadrées de rose, aux coins arrondis, centrées les unes sous les autres sur un fond crème — avec 16 pixels entre elles, pas 32 : les marges verticales fusionnent. 🎉
♿ Un dernier mot sur ce cadre rose, parce qu'il ne décore pas : il délimite. Le blanc des cartes sur le crème de la page ne se voit presque pas, et Nuxy n'utilise pas d'ombres — c'est donc la bordure qui porte à elle seule la frontière « ceci est une carte, elle s'arrête là ». Dès qu'un trait porte une information, la règle d'accessibilité lui demande un contraste d'au moins 3:1 avec les deux surfaces qu'il sépare. Notre rose atteint 3,6:1 sur le blanc de la carte et 3,3:1 sur le crème de la page : il passe des deux côtés. Une bordure plus pâle aurait fait joli sur ton écran et disparu sur celui d'à côté, en plein soleil ou après vingt ans de vue qui baisse.
Le réflexe à garder : quand tu choisis une couleur de bordure, demande-toi si elle sépare ou si elle décore. Si elle sépare, elle doit se voir.
Ce qui est vérifié
- Compter la bordure et le padding dans la largeur
- Centrer les cartes avec le mot auto
- Donner aux cartes leur largeur de 300 pixels
- Aérer les côtés de 24 pixels
- Dessiner le cadre rose
- Arrondir les coins des cartes
- Peindre le fond de la page
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)