Pour cette partie du projet, vous allez réaliser le héros de la page d’accueil 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 sur la hauteur ↕️.
Sélectionner une image où les membres du groupe sont visibles. Cette image doit être en format portrait et doit être affichée par défaut par la balise <picture>.
À l'aide d'object-fit, faites en sorte que cette image couvre entièrement le héros, sans pour autant la déformée et object-position afin de mettre l'accent sur le visage des membres du groupe et éviter qu'ils soient tronqués.
Sélectionner une 2e image des membres du groupe, mais cette fois en format paysage (landscape). Ajoutez là comme source dans la balise <picture>. Faites en sorte que cette image soit affichée plutôt que celle en portrait lorsque l'écran est en format paysage (landscape).
Après la balise <picture>, 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 ensuite une couleur de fond et réduisez son opacité entre 15% et 50%, selon votre préférence.
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).
6 colonnes à partir du breakpoint md.
4 colonnes à partir du breakpoint xxl.
En tout temps cette colonne doit être centrée horizontalement ↔️ et verticalement ↕️ dans 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 héros, ajoutez le nom de votre groupe. Par exemple: "Gorillaz".
Attention de choisir la balise appropriée.
Ajoutez un paragraphe présentant votre groupe. Par exemple: "Gorillaz est un groupe musical britannique dit « virtuel », formé en 1998 par Damon Albarn et Jamie Hewlett".
Ajoutez un bouton avec la mention "En savoir plus" sous ce paragraphe. Pour l'instant ce bouton n'aura aucune fonctionnalité, mais vous pouvez déjà ajuster son apparence.
