Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de l’album "Larks' Tongues in Aspic" du groupe rock progressif King Crimson.
Aperçu du résultat 👇
Matériel
Dossier de départ
Couleurs 🎨
#000000
#555555
#fffdee
#872639
#edbc31
#93cff4
Médias 📷
Visage soleil
Visage lune
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 fichier HTML.
Requis de base
Téléchargez les images et placez-les dans un dossier images.
Créez une variable pour chacune des couleurs pour utilisation ultérieure.
Créez une variable nommée --speed et attribuez-lui la valeur de 6 secondes. Celle-ci servira à déterminer le temps de rotation des éléments.
Le fond de la page doit être de couleur grise et avoir un dégradé vertical allant du jaune au bleu.
Fusionnez les deux fonds en mode screen afin de donner au gradient un effet délavé.
L'album doit avoir une largeur de 80% du plus petit côté de la fenêtre, être de forme carré, être centré tant horizontalement que verticalement, être de couleur blanc cassé et avoir un ombrage de 10vmin égal de tous les côtés de couleur noire semi-transparente.
Utilisez box-shadow afin de créer la quintuple bordure intérieure. (4vmin pourpre, 5vmin blanc cassé, 6vmin pourpre, 7vmin blanc cassé et 7.2vmin pourpre)
Requis rayons
Le conteneur de rayons (.rays-wrapper) doit être positionné de manière absolue au centre de l'album, avoir une largeur de 53% et avoir des proportions carrées.
Corrigez votre transform afin de compenser la déformation du SVG en ajoutant 1% à la translation verticale.
Requis soleil et lune
Le conteneur central (.center-wrapper) doit être positionné de manière absolue au centre de l'album, avoir une largeur de 26% et avoir des proportions carrées.
La lune (.moon) doit être positionnée de manière absolue, prendre tout l'espace disponible en largeur et en hauteur, être de forme ronde, être de couleur bleue et avoir une bordure de 0.05vmin solide noire.
Elle doit aussi avoir l'image moon-face.webp comme arrière-plan positionnée horizontalement au centre et à 90% verticalement ainsi qu'avoir une grosseur de 35%.
Le conteneur du soleil (.sun-wrapper) doit prendre tout l'espace disponible en largeur et en hauteur.
Le soleil (.sun) doit être positionné de manière absolue à 1% du haut, avoir une largeur de 65% avec des proportions carrées, être de forme ronde, être centré horizontalement avec les marges extérieures, avoir une bordure de 0.05vmin solide noire et être de couleur jaune.
Elle doit aussi avoir l'image sun-face.webp comme arrière-plan positionnée horizontalement au centre et à 90% verticalement ainsi qu'avoir une grosseur de 60%.
Requis animation
Créez une animation nommée rotation appliquant une rotation allant de 0deg à -360deg.
Appliquez cette animation à la lune avec une durée correspondant à la variable --speed de façon linéaire et absolue.
Appliquez aussi cette animation au conteneur du soleil avec une durée correspondant à la variable --speed de façon linéaire et absolue.
Pour contrecarrer la rotation du soleil, appliquez lui la même animation avec une durée correspondant à la variable --speed de façon linéaire et absolue mais inversée.
Ambiance
Corrigé
Zip / King Crimson - Larks' Tongues in Aspic
Pen / King Crimson - Larks' Tongues in Aspic
Démo / King Crimson - Larks' Tongues in Aspic