Pour cet exercice, vous devrez recréer un mini quiz portant Marc Labrèche à l’aide des balises details et summary.

Aperçu du résultat 👇

Matériel

Couleurs 🎨

Vert foncé #6b9080
Vert pâle #cce3de

Médias 🖼️

Simpsons
https://ex.smnarnold.com/details-summary/labreche/simpsons.webp
Donatello
https://ex.smnarnold.com/details-summary/labreche/donatello.webp

Requis

  1. Créez-vous un pen sur codePen.

  2. Attribuez la couleur de fond vert foncé à la page.

  3. Faites en sorte que le quiz soit blanc ⚪️, qu'il prenne toute la largeur de la page jusqu'à concurrence de 650px, que ses coins soient arrondis de 10px, qu'il soit centré horizontalement ↔️ et affichez-le à 50px du haut de la page.

  4. Tous les textes du quiz doivent avoir une taille de 20px à l'exception du titre qui doit être contenu dans une balise <h1> et avoir la taille automatique que le navigateur lui attribue.

Questions

  1. Affichez les 5 questions suivantes, attribuez leur la couleur de fond vert pâle et une marge intérieure de 10px verticalement et 20px horizontalement ↔️.

    • Quels personnages des Simpsons sont doublés par Marc Labrèche?

    • Quel est le nom du personnage de Marc Labrèche dans la série les Bobos?

    • Quelle tortue ninja était doublé par Marc Labrèche?

    • Pour quelle barre chocolatée Marc Labrèche a-t-il déjà fait une publicité?

    • Combien de personnages Marc Labrèche joue-t-il dans le cœur a ses raisons?

Réponses

  1. Chaque texte de réponse doit-être centré et affiché dans un paragraphe alors que les images et iFrames doivent prendre toute la largeur disponible.

Notes de cours 📚