Pour cette étape, la composante de carte de Bootstrap sera utilisée afin de présenter 6 vidéoclips du groupe sur la page de palmarès.

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: "Vidéoclips". Cet élément devra être seul sur sa rangée.

  3. Commencez par créez une seule carte entièrement cliquable pointant vers la page Youtube du vidéoclip en question, 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. Puisque la carte à un affichage vertical ↕️ et horizontal ↔️, il est nécessaire de définir une nouvelle rangée avec deux colonnes à l'intérieur de celle-ci. Par défaut, la carte doit afficher en mode vertical, donc chaque colonne doit prendre toute la largeur de la carte.

  5. Insérez une image en format carré représentant un vidéoclip dans la première colonne. Cette image doit prendre toute la largeur de sa colonne.

  6. Dans l'entête de la carte, ajoutez le nom du vidéo-clip.

  7. Définissez un list-group contenant les informations suivantes:

    • Album

    • Année de parution

    • Durée

  8. Au survole de la carte, celle-ci doit grossir de 2% en l'espace de 0.3s afin de démontrer qu'elle est cliquable.

  9. Déclinez ensuite toutes les 5 autres cartes des vidéoclips à partir de la première que vous venez de réaliser.

Requis SM

  1. La carte doit affichée en format horizontal. La colonne de l'image doit avoir une largeur équivalente à 4 colonnes et celle du contenu à 8 colonnes.

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

Notes de cours 📚