Variables - Journée Internationale des Droits des Femmes

Pour cet exercice, vous devrez incorporer des variables CSS dans un projet sur la Journée Internationale des Droits des Femmes.

Aperçu du résultat 👇

Matériel Pen de départ

Couleurs 🎨

#ff0000 #ff7f00 #f7f751
#22cc22 #2e2ee8 #7f007f
#cc3366 Requis Tous les svg doivent avoir une hauteur de 20% de la largeur de la fenêtre et soient en position relative. L'élément .wrapper doit aussi avoir une hauteur de 20% de la largeur de la fenêtre et doit être centré horizontalement et verticalement. Toutes les femmes doivent avoir une opacité de 0.5 par défaut. Créez des variables pour chacunes des couleurs et appliquez ces couleurs aux différents éléments tel que proposé dans l'aperçu en utilisant les classes déja attribuées aux svg. Faites en sortes que les femmes se prennent par la main. Pour ce faire vous devez déplacer respectivement les femmes rouge et orange de 4vw et 2vw à partir de la gauche et les femmes verte et bleue de 4vw et 2vw à partir de la droite. Lorsque survolée, chaque femme doit avoir une opacité de 1 et avoir un z-index de 5 afin de la mettre en valeur. Lorsque la largeur de la fenêtre devient plus petite que 1000px, faites en sorte d'intervertir les couleurs des femmes tel que proposé dans l'aperçu. Notes de cours 📚