Blocs d'albums

Pour cette étape, vous devrez créer des blocs d’albums affichés sur la page de discographie. Ces blocs sont souvent surnommés des “splits” en fonction de leur façon de combiner un texte et une image.

Il ne s’agit d’une composante Bootstrap à strictement parler, mais plutôt d’une technique de mise en page populaire facile à reproduire avec la grille de Bootstrap.

Aperçu du résultat 👇

Requis de base

  1. Commencez par créer une <section> avec une marge verticale de 20px ↕️ correspondant au premier album dans la zone de contenu principal de votre page. Celle-ci servira de gabarit aux albums subséquents.

  2. Insérez ensuite dans cette section une nouvelle rangée Bootstrap vous permettant de gérer le positionnement des éléments qui en feront partie.

  3. Par défaut le "split" doit afficher en mode vertical. Ainsi, chaque colonne doit prendre toute la largeur disponible.

  4. Insérez dans la 1re colonne les informations suivantes:

    • Le titre de l'album.

    • Une liste ordonnée des chansons y figurant.

    • Un lien "En savoir plus" ayant l'apparence d'un bouton vers un site externe donnant plus d'information sur l'album. Par exemple, sa page Wikipédia.

  5. Insérez dans la 2e colonne une image de l'album en question. Cette image doit prendre toute la largeur de sa colonne et avoir une marge de 20px vers le haut ⬆️ afin d'éviter qu'elle touche au bouton de la colonne précédente.

  6. Recopiez cette <section> afin de créez les autres albums du groupe et ajustez leur contenu (texte, image).

Requis SM

  1. À partir du breakpoint sm, le "split" doit afficher en format horizontal. La colonne du contenu texte doit avoir une largeur équivalente à 5 colonnes et celle de l'image de 7 colonnes.

  2. La marge vertical de la section doit passer de 20px à 40px. Tandis que la marge en haut de l'image doit-être retirée.

  3. Les <section> correspondant aux albums impairs doivent afficher l'image de l'album avant le contenu texte. Créant ainsi une alternance.

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

Notes de cours 📚