Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de l’album "Turn Blue" du groupe blues rock The Black Keys.
Aperçu du résultat 👇
Matériel
Dossier de départ
Police d'écriture 🚓
ITC Franklin Gothic Std Heavy
Couleurs 🎨
#0175b0
#007dbd
#cc0f71
#e10b7a
#616161
#747474
Prenez le temps d'analyser le fichier HTML.
Pour une meilleure exécution de l'exercice, certains des éléments HTML ont été cachés par défaut dans le fichier CSS. Rendez-les visible au fur et à mesure que vous avancez dans l'exercice.
Il est INTERDIT de modifier le HTML.
Un triangle rectangle dont les deux côtés de l'angle droit sont égaux aura toujours une hypoténuse équivalente à 1.414 fois la longueur des côtés.
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 gris pâle et avoir un dégradé vertical allant du rose pâle au bleu pâle.
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 centré tant verticalement qu'horizontalement, être de couleur bleu pâle et avoir un ombrage de 10vmin égal de tous les côtés de couleur noire semi-transparente.
Requis spirale
La spirale (.spiral) doit être positionnée de manière absolue, prendre tout l'espace disponible en hauteur et en largeur, être centrée tant horizontalement que verticalement et être de couleur rose pâle.
Appliquez-lui une rotation de 45deg. Vous constaterez alors que la spirale ne couvre pas tout l'espace de l'album.
Pour corriger la dimension de la spirale, multipliez sa largeur et sa hauteur par le facteur d'hypoténuse mentionné plus haut.
Assurez-vous que rien ne dépasse de l'album en rognant l'exédentaire.
Requis contour
Le contour (.contour) doit être positionné de manière absolue et prendre tout l'espace disponible en largeur et en hauteur.
Il doit avoir une bordure intérieur solide de 3.5vmin et de couleur bleu foncé.
Requis textes
Le bouton de crédits (.credits) doit être positionné de manière absolue, avoir une longeur et une hauteur de 20%, être centré tant horizontalement que verticalement, avoir une bordure de 0px, être de forme ronde et être de couleur gris pâle.
À l'aide de @font-face, importez la police d'écriture ITCFranklinGothicStd-Hvy.woff2, nommez la Franklin et appliquez-la aux textes qui doivent aussi avoir une grosseur de police d'écriture de 2.2vmin. N'oubliez pas de spécifier le format.
Le nom du groupe (h1) doit être positionné de manière absolue à 3.5vmin du haut, être centré horizontalement, avoir une hauteur de ligne de 2vmin et être de couleur gris foncé.
Appliquez-lui une déformation verticale d'un facteur de 1.2.
Le titre de l'album (h2), doit être positionné de manière absolue à 8.5vmin du haut, être centré horizontalement et être de couleur gris foncé.
Appliquez-lui une déformation verticale d'un facteur de 2.
Requis animation
Créez une animation nommée swirl qui exécute une rotation allant de 0deg à -360deg et appliquez la à l'élément .spiral.
L'animation doit durer 10 secondes et s'exécuter de manière linéaire et infinie.
Requis inversion
Changez le curseur de l'élément .credits pour pointer.
Lors du focus de l'élément .credits, changez la couleur d'arrière-plan pour gris foncé et la couleur des textes pour gris pâle.
Toujours lors du focus de l'élément .credits, à l'aide de la pseudo-classe :has() changez la couleur du contour pour rose foncé et inversez l'animation swirl.
Ambiance
Corrigé
Zip / The Black Keys - Turn Blue
Pen / The Black Keys - Turn Blue
Démo / The Black Keys - Turn Blue