Pour cet exercice, vous devez écrire du CSS afin de recréer l’album "Peace Love Death Metal" du groupe rock Eagles of Death Metal.
Aperçu du résultat 👇
Matériel
Dossier de départ
Police d'écriture
Ida Narrow Bold
Couleurs 🎨
#75d0ed
#f8a8cd
#444444
#ffffff
Prenez le temps d'analyser le fichier HTML.
Il est INTERDIT de modifier le HTML.
Requis de base
Téléchargez la police d'écriture et placez la dans un dossier fonts.
Créez une variable pour chacune des couleurs pour utilisation ultérieure.
La couleur de fond de la page doit être de couleur grise et avoir un dégradé vertical allant du bleu au rose.
Fusionnez les deux fonds en mode screen afin de donner au gradient un effet délavé.
L'album doit avoir une dimension verticale et horizontale de 80% du plus petit côté de la fenêtre, être de couleur bleue ainsi qu'avoir un ombrage de 100px égal de tous les côtés de couleur blanche.
Utilisez transform afin de positionner l'album au centre de la fenêtre.
Requis mains
L'élément .stripe doit avoir une hauteur de 40% de la hauteur de l'album, occuper tout l'espace disponible en largeur, être centré verticalement dans l'album, avoir un alignement de texte centré et être de couleur rose.
Le conteneur .hands doit avoir une hauteur de 15% du plus petit côté de la fenêtre, occuper tout l'espace disponible en largeur et être centré verticalement à l'intérieur de celui-ci.
Les éléments .handwrapper doit avoir une largeur de 15% du plus petit côté de la fenêtre, occuper tout l'espace disponible en hauteur et se comporter comme du texte.
L'intérieur des mains (.inside) doit être de couleur blanche.
Requis textes
Importez la police d'écriture IdaNarrowBold.otf, nommez la IdaNarrow et appliquez-la aux textes.
Les textes doivent être centrés horizontalement, avoir un espace de lettrage 0.05em être de couleur blanche et avoir une déformation verticale d'un facteur de 2.
Le nom du groupe doit avoir une grosseur de police d'écriture de 6% du plus petit côté de la fenêtre et être positionné à 10% du haut.
Le titre de l'album doit avoir une grosseur de police d'écriture de 5.7% du plus petit côté de la fenêtre et être positionné à 10% du bas.
Requis transitions
Lorsque survolés, les éléments .hand doivent grossir jusqu'a un facteur de 150% et faire une rotation de 720deg (2 tours) en 1 seconde.
Lors du survol, l'intérieur des mains doit aussi devenir bleu en 1 seconde.
Toujours durant le survol, utilisez la pseudo-classe :has sur l'élément parent .hands afin de déplacer les éléments .handwrapper à gauche (-100%) ou à droite (100%) ainsi que changer leur opacité à 0.4 en 1 seconde. Utilisez l'aperçu comme référence.
Assurez-vous que les éléments reprennent leur état normal en 1 seconde lorsque le survol est terminé.
Ambiance
Corrigé
Zip / Eagles of Death Metal - Peace Love Death Metal
Pen / Eagles of Death Metal - Peace Love Death Metal
Démo / Eagles of Death Metal - Peace Love Death Metal