Cartes et navbar

Pour cet exercice vous devrez recréer une mise en page responsive constituée de composantes Bootstrap.

Aperçu du résultat 👇

Matériel

Pen de départ 

Cartes

  1. Ajoutez en CSS 10px verticalement à l'extérieur des cartes afin d'éviter qu'elles ne se touchent.

  2. Chaque carte doit prendre toute la largeur disponible par défaut.

  3. À partir du breakpoint sm, deux cartes doivent afficher par ligne.

  4. À partir du breakpoint md, les 4 premières cartes doivent afficher sur une ligne et les deux dernières sur une autre.

  5. À partir du breakpoint lg, les 2 dernières cartes doivent afficher en format horizontal.

Navbar

  1. Ajoutez en CSS la couleur de fond #f08a30 à la navbar.

  2. Ajustez son thème de couleur pour que le texte devienne blanc et contraste plus avec le fond orange.

  3. Ajoutez un logo textuel avec la mention "Démo".

  4. Ajoutez un menu déroulant intitulé "Sous-menu".

  5. À l'intérieur du menu déroulant, ajoutez 6 liens vides (#):

    • Titre 1

    • Titre 2

    • …

    • Titre 6

Notes de cours 📚