Menu Overwatch

Pour cet exercice vous devez recréer un menu permettant de choisir parmi certains personnages du jeu Overwatch. Afin d’éviter de vous répéter, vous devrez tirer profit de la boucle @each de Scss.

Aperçu du résultat 👇

Matériel Pen de départ

Médias 🖼️

Arrière plan Images des personnages (remplacer la partie entre [] avant le .jpg) Ajoutez l'image d'arrière-plan en fond de page. Celle-ci doit couvrir entièrement la page, être centrée et ne doit afficher qu'une seule fois. Faites-en sorte que l'élément avec la classe .overwatch soit centré verticalement ↕️ dans la page. Les personnages (.characters) doivent être centrés horizontalement ↔️, doivent pouvoir s'afficher sur plusieurs lignes, mais tenter de s'afficher autant que possible sur une même ligne si l'espace le permet. Utilisez une boucle @each afin de générer des noms de classes ciblant chacun des personnages suivants:
echo, genji, hanzo, junkrat, lucio, mccree, mercy, moira, orisa, pharah, reaper, reinhardt Pour chacun de ces personnages, ajouter une image d'arrière-plan dont le chemin de fichier correspond à:
https://tim-montmorency.com/timdoc/582-518MO/exercices/sass-each-menu-overwatch/images/[nom du personnage].jpg
et assurez que cette image soit entièrement visible (les noms des personnages ne devraient pas être tronqués). Profitez du nesting de Scss afin de créer un effet de survole sur les personnages. Ceux-ci doivent grandir de 10% en l'espace d'un tiers de seconde, lorsque survolé par la souris. Notes de cours 📚 Flexbox