Pour cette partie du projet, vous allez réaliser le héros de la page de palmarès 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.

Par exemple, voir le site du Cirque du Soleil, de l’Igloofest ou encore de Metallica, etc.

Aperçu du résultat 👇

Requis

  1. 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.

  2. À 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.

  3. 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 ↕️.

  4. Sélectionner une image du groupe "live" . Cette image 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.

  5. Sélectionner une 2e image du groupe, mais cette fois en noir et blanc. 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'utilisateur à indiquer préférer un thème sombre.

  6. 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.

  7. 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.

    • 4 colonnes à partir du breakpoint lg.

  8. Cette colonne doit être affichée en haut, mais centrée horizontalement ↔️ dans sa rangée Bootstrap ⬆️. Lorsque le breakpoint lg est atteint, affichez la colonne à droite complètement de sa rangée ↗️.

    Recherchez dans la documentation officielle comment modifier l'alignement vertical et horizontal à l'aide de classes prédéfinies par Bootstrap.

  9. Comme titre de page, inscrivez: "Palmarès".

    Attention de choisir la balise appropriée convenant à cet effet.

  10. Ajoutez un paragraphe présentant présentant les faits d'armes de votre groupe.
    Par exemple: "Gorillaz à jusqu'à présent 7 albums, 31 singles, 28 vidéo-clips et à reçu plus de 51 prix divers au cours de son existence".

  11. 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.