Pour cet exercice, vous devrez incorporer des variables CSS dans un projet tentant de reproduire de façon minimaliste en CSS l’uniforme des Lakers de Los Angeles, la célèbre équipe de basketball 🏀.
Aperçu du résultat 👇
Matériel
Pen de départ
Requis
Créez des variables à la racine du projet à partir de toutes les couleurs hexadécimales présentes dans le projet (recherchez les # dans le css). Nommez des variables de façon à ce qu'elles soient facilement identifiables.
Lorsque l'étape 1 est complétée, faites un ctrl+f dans le CSS et recherchez # afin de vous assurer que tous les codes de couleur haxadécimaux on été remplacés par des variables.
Remplacez ensuite chacune des couleurs hexadécimales par les variables que vous venez de créer. (Théoriquement, votre projet ne devrait aucunement changer si vous avez bien réussi cette étape.).
Lorsque l'élément .bg est survolé, redéfinissez les valeurs des variables CSS de sorte que l'uniforme devienne l'édition or, comme dans la référence ci-dessus ☝️
Bonus
Faites en sorte que l'uniforme devienne l'édition blanche lorsque l'élément .bg reçoit le focus (quand vous cliquer dessus).
Notes de cours 📚