DébutantNon commencé

Exercice 7.6 · 10 min · 0 tentative

Défi : ton blog typographié

🎯 Objectif

Le grand final du module : habiller tout un article, avec une typographie pilotée par deux variables.

📝 Consigne

Ton premier article est écrit. Il ressemble encore à un devoir rendu en Times New Roman — on va régler ça.

Le HTML est figé, n'y touche pas ; la classe signature est déjà posée. Tout se passe dans l'onglet CSS, quatre blocs à écrire :

  1. Un bloc :root avec deux variables : --couleur-titre, de valeur #226347, et --police, de valeur Georgia, serif
  2. Une règle sur le sélecteur body : la police relue depuis ta variable avec var(), une taille de 20px, et un interligne de 1.6 — sans unité
  3. Une règle sur le sélecteur h1 : la couleur relue depuis ta variable, une taille de 44px, un texte centré
  4. Une règle sur la classe .signature : la même couleur de variable, un texte poussé à droite

💡 Une fois le rendu terminé, teste ta télécommande : change la valeur de --couleur-titre en #561E46 et regarde — deux endroits basculent, une seule ligne touchée. ♿ Et souviens-toi du module 4 : ce vert foncé est une couleur de texte sur fond clair, jamais un fond sous du texte.

Résultat attendu

Un article qu'on a envie de lire :

  • le titre en vert foncé, centré et bien plus grand
  • le texte à empattements, largement aéré
  • la signature verte, poussée en bas à droite 🎉

Ce qui est vérifié

  • Déclarer la variable de couleur dans le bloc :root
  • Déclarer la variable de police dans le bloc :root
  • Relire la police depuis la variable
  • Habiller la page en Georgia
  • Régler le corps du texte à 20 pixels
  • Aérer les lignes du corps de la page
  • Relire la couleur depuis la variable dans le titre
  • Colorer le titre en vert foncé
  • Agrandir le titre de l'article
  • Centrer le titre
  • Colorer la signature avec la même variable
  • Pousser la signature à droite
  • Écrire un code HTML bien formé
  • Respecter la structure de la page (doctype, head, body)

Indices (0/3)

Indice 1 verrouillé
Indice 2 verrouillé
Indice 3 verrouillé