Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette du mytique album "The Dark Side of the Moon" du groupe Pink Floyd.
Aperçu du résultat 👇
Matériel
Dossier de départ
Polices d'écriture 🚓
Cormorant Garamond 300
Couleurs 🎨
#111015
#7b7b7b
#dcdcdc
#bc142d
#df7a0e
#fafc01
#68b602
#54b3df
#564080
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 la portion <body> du fichier HTML.
Requis de base
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 mauve au rouge.
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 charcoal et avoir un ombrage de 10vmin égal de tous les côtés de couleur noire semi-transparente.
Assurez-vous que rien ne dépasse de l'album.
Requis prisme
Le prisme (.prism) doit être positionné de manière absolue à 25% du haut, être centré horizontalement avoir une largeur de 32%, une hauteur de 28% et être de couleur blanc gris.
À l'aide de clip-path, donnez-lui une forme triangulaire équilatérale et appliquez-lui un z-index de 1.
Utilisez ::before afin de créer un deuxième layer positionné de manière absolue à 3% du haut et 2.5% de la gauche, avoir une largeur et une hauteur de 95% être de couleur grise et avoir le même masquage que son parent.
Utilisez ::after afin de créer un troisième layer positionné de manière absolue à 7% du haut et 5.5% de la gauche, avoir une largeur et une hauteur de 89% être de couleur charcoal et avoir le même masquage que son parent.
Requis rayon
Le rayon (.ray) doit être positionné de manière absolue à 50% du haut et collé sur la gauche, avoir une longueur de 44%, une largeur de 0.5% et être de couleur blanc gris.
Changez son origine de transformation de sorte qu'il soit positionné verticalement au centre du rayon et complètement à gauche.
Appliquez-lui une rotation de -15deg.
Le conteneur du gradient (.gradient-wrapper) doit être positionné de manière absolue à 34.8% du haut et 42.8% de la gauche ainsi qu'avoir une largeur de 11% et une hauteur de 6%.
Appliquez-lui une rotation de 15deg et un z-index de 2 tout en vous assurant que rien ne puisse en dépasser.
Le gradient (.gradient) doit être positionné de manière absolue à 50% du haut et prendre tout l'espace disponible en hauteur et en largeur.
Il doit avoir avoir un gradient allant vers la droite partant du blanc gris à 6% pour aller au transparent à 60%.
Appliquez-lui une rotation de -26deg.
Requis arc-en-ciel
Le conteneur d'arc-en-ciel (.rainbow-wrapper) doit être positionné de manière absolue à 38% du haut et 20% de la gauche, prendre tout l'espace disponible en largeur et en hauteur et avoir une perspective de 70vmin.
L'arc-en-ciel (.rainbow) doit avoir une argeur de 10% de son parent et prendre tout l'espace disponible en hauteur.
Pour de créer un gradient arc-en-ciel solide, vous devez dupliquer les couleurs afin d'éliminer la transition. (rouge 16.6%, orange 16.6%, orange 33.2%, jaune 33.2%, jaune 49.8%, vert 49.8%, vert 66.4%, bleu 66.4%, bleu 83%, mauve 83%)
Donnez lui une rotation3d de 68deg ayant 100 sur l'axe des X, -150 sur l'axe des Y et 176 sur l'axe des Z.
Requis auto-collant
L'auto-collant (.sticker) doit être positionné de manière absolue à 5% du bas et 5% de la gauche, avoir une largeur de 23%, avoir des proportions carrées, avoir une bordure intérieur de 0.1vmin solide blanc gris, être de forme ronde et avoir une rotation de 10deg.
Utilisez le pseudo-élément ::before afin de créer un deuxième layer circulaire positionné au centre de son parent ayant une largeur et une hauteur de 95% et une bordure de 0.1vmin solide de couleur blanc gris.
Importez la Google font Cormorant Garamond 300 en l'insérant dans le head du fichier HTML.
Le libellé (h1) doit être positionné au centre de son parent, avoir une marge extérieure haute de -0.5vmin, avoir un alignement de texte centré, avoir la police d'écriture Cormorant Garamond d'un poid de 100 et d'une grosseur de 3.2vmin, avoir une hauteur de ligne de 2.8vmin et être de couleur blanc gris.
Lors du sorvol de l'auto-collant, sa bordure doit changer pour 0.4vmin et être de couleur blanc gris solide.
Requis brillance
L'élément de brillance (.shine) doit être positionné de manière absolue au centre de son parent, avoir une largeur de 30%, avoir des proportions carrées, être de forme ronde, avoir un z-index de 2 et un ombrage intérieur de 2vmin égal de tous les côtés et de couleur blanc gris.
Créez une animation changeant la largeur de l'élément de 0% à 200% et appellez-la shine.
Appliquez cette animation à l'élément .shine lorsque l'auto-ollant est survolé. (Utilisez :has() pour y parvenir).
L'animation doit avoir une durée de 1 seconde et garder sa position finale lorsque celle-ci est terminée.
Changez la largeur de 'élément .shine pour que sa valeur par défaut soit de 0%.
Ambiance
Corrigé
Zip / Pink Floyd - The Dark Side of the Moon
Pen / Pink Floyd - The Dark Side of the Moon
Démo / Pink Floyd - The Dark Side of the Moon