Pour cette étape, la composante de carte de Bootstrap sera utilisée afin de présenter les membres du groupe sur la page d’accueil.

Aperçu du résultat 👇

Requis de base

  1. Commencez par créer une <section> dans la zone du contenu principal de votre page et insérez-y une nouvelle rangée Bootstrap. Celle-ci vous permettra de gérer le positionnement des éléments qui en feront partie.

  2. Ajoutez le titre: "Membres du groupe". Cet élément devra être seul sur sa rangée.

  3. Commencez par créez une seule carte prenant toute la largeur de sa rangée et ayant une marge verticale de 10px ↕️. Celle-ci servira de gabarit aux cartes subséquentes.

  4. Insérez dans votre carte une image d'un des musicien. Cette image doit prendre toute la largeur de la carte.

  5. Dans le corps de la carte, ajouter le nom du musicien, son rôle au sein du groupe et une brève description.

  6. Dans le pied de la carte, ajoutez un lien "En savoir plus" ayant l'apparence d'un bouton vers un site externe donnant plus d'information sur le musicien. Attention, ce bouton doit prendre toute la largeur de la carte.

  7. Déclinez ensuite toutes les cartes des autres membres à partir de la première carte que vous venez de réaliser.

Requis SM

  1. Affichez deux cartes par rangée.

N'hésitez pas à ajouter des couleurs de texte, de fond, etc. à vos cartes afin de les personnaliser.

Notes de cours 📚