Aller au contenu

Width/Height - System32

Pour cet exercice, vous devez créer en HTML et CSS une page présentant une bande dessinée d’Andrew AKA system32comics.

Aperçu du résultat 👇

width-height-system32-resultat

Matériel

Couleurs

blanc cassé

#fafafa

Médias

Case 1

https://tim-montmorency.com/compendium/582-111%E2%80%93web1/exercices/images/1.webp

Case 2

https://tim-montmorency.com/compendium/582-111%E2%80%93web1/exercices/images/2.webp

Case 3

https://tim-montmorency.com/compendium/582-111%E2%80%93web1/exercices/images/3.webp

Case 4

https://tim-montmorency.com/compendium/582-111%E2%80%93web1/exercices/images/4.webp

Requis

  • Créez-vous un Pen et attribuez-lui la couleur de fond blanc cassé.
  • Créez ensuite 4 balises images afin d'afficher les cases de la bande dessinée en référence.
  • Ajoutez une classe commune à vos images afin de pouvoir les cibler avec une règle CSS unique.
  • Faites en sorte que les images s'affichent une à côté de l'autre, sans espace vide entre elles (en utilisant la déclaration ===> font-size: 0; dans votre body), et qu'elle mesure le quart de la largeur de la fenêtre. Elles devraient ainsi s'afficher sur une seule ligne et la remplir, peu importe la largeur de la fenêtre.

Notes de cours

icon (24)
Display
block, inline, inline-block, none

icon (30)
Width & Height
Width & Height