Pour cette partie du projet, vous allez réaliser le héros de la page discographie de votre site. Il s’agit en fait d’un grand bloc en début de page contenant un élément visuel fort afin de donner le ton ou de promouvoir un élément.
Créez votre héros en utilisant la balise sémantique appropriée. Celui-ci doit prendre une largeur et une hauteur équivalente à celle d'un écran complet, peu importe la dimension de l'écran.
À l'aide d'une média query détecter si l'orientation de l'écran est en mode paysage (landscape). Si tel est le cas, changer la hauteur du héros pour qu'il corresponde à 56.25% de la largeur de l'écran. Ce pourcentage lui donnera un ratio 16/9.
Insérez une balise picture à l'intérieur du héros et faites en sorte qu'elle couvre l'ensemble du héros, autant sur la largeur ↔️ que la hauteur ↕️.
Sélectionnez une image du premier album du groupe et faites en sorte qu'elle affiche par défaut dans la balise <picture>. À l'aide d'object-fit, assurez-vous que cette image soit entièrement visible et d'aucune façon tronquée. En CSS, ajouter une couleur de fond de votre choix à la balise <picture> afin de combler l'espace vide visible.
Sélectionnez une image du deuxième album du groupe et ajoutez là comme source dans la balise <picture>. Faites en sorte que cette image soit utilisée plutôt que celle du premier lorsque l'écran est d'une largeur de 1000px ou plus.
Après la balise <picture>, mais avant le conteneur Bootstrap, créez un <div>. Son rôle sera d'augmenter le contraste entre l'image de fond et le contenu texte.
Ce <div> doit couvrir l'ensemble du héros et être affiché par dessus la balise <picture>. Ajoutez-lui un dégradé vertical en direction du bas ⬇️ partant de transparent vers une couleur RGBA de votre choix avec ayant un alpha entre 50% et 100%, à votre guise, laissant ainsi visible la majeur partie de l'album.
Toujours à l'intérieur du héros, insérez un conteneur et une rangée Bootstrap. Ajoutez leur du CSS afin que les deux prennent toute la hauteur du héros. À l'intérieur de cette rangée, ajoutez une colonne contenant le contenu texte des étapes suivantes.
Cette colonne doit avoir une largeur de:
12 colonnes par défaut (sur mobile).
8 colonnes à partir du breakpoint sm.
En tout temps, cette colonne doit être positionnée dans le coin inférieur gauche de sa rangée Bootstrap ↙️.
Recherchez dans la documentation officielle comment modifier l'alignement vertical et horizontal à l'aide de classes prédéfinies par Bootstrap.
Comme titre de page, inscrivez: "Discographie".
Attention de choisir la balise appropriée convenant à cet effet.
Ajoutez un paragraphe présentant sommairement les albums du groupe. Par exemple: "Gorillaz à jusqu'à présent 7 albums studio répartis entre 2001 et 2020.".
Ajoutez un bouton avec la mention "En savoir plus" sous ce paragraphe. Pour l'instant ce bouton n'aura pas de fonctionnalité, mais vous pouvez déjà ajuster son apparence.
