Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de l’album éponyme de Lisa LeBlanc.
Aperçu du résultat 👇
Matériel
Dossier de départ
Polices d'écriture 🚓
Bonnet Grotesque Nr
Couleurs 🎨
#6cc06d
#f0552e
#ffd917
#74ccd2
#482a2d
#555555
Médias 📷
Objets
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.
Téléchargez police d'écriture et placez-la dans un dossier fonts.
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 4 seconde. Celle-ci servira à déterminer le temps de l'animation.
Le fond de la page doit être de couleur grise et avoir un dégradé vertical allant du vert au orange.
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 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 arrière-plan
Afin de corriger la légère déformation du SVG, positionnez l'arrière-plan (.bg) de manière absolue à -0.25% du haut et de la gauche et donnez-lui une dimension de 100.5% en largeur et en hauteur.
La partie centrale de l'arrière-plan (.part-center) doit être de couleur brune.
Les quatres autres parties (.part) doivent être respectivement de couleur vert, orange, jaune et bleu.
À l'aide du pseudo-élément ::after, créez un nouveau layer à l'album (.album) en position absolue couvrant tout l'espace disponible et ayant comme arrière-plan l'image objects.webp avec une taille contenue.
Requis texte
À l'aide de @font-face importez la police d'écriture astype-bonnet-grotesque-nr.otf, nommez-la Bonnet et appliquez la au nom de l'artiste (h1).
Le nom de l'artiste (h1) doit être positionné de manière absolue à 45% du haut et 35% de la gauche, avoir une grosseur de police d'écriture de 7vmin, un espacement de lettres de 0.7vmin et être de couleur bleu.
Requis animation
Créez une animation nommée part en 4 étapes (0%,100% - 25% - 50% - 75%) changeant la couleur des parties du SVG du vert, au orange, au jaune et au bleu.
Appliquez cette animation aux parties de l'arrière-plan (.part) sur une durée de 4 secondes de façon infinie et avec 1 step par breakpoint.
Afin que les quatres parties de l'arrière-plan changent de couleur indépendament, appliquez à l'animation un délai négatif de 0s moins la variable --speed divisé par 4 et multiplié par la variable --nb. Pour vous simplifier la vie, voici la formule: calc(0s - (var(--speed) / 4 * var(--nb))).
Ambiance
Corrigé
Zip / Lisa LeBlanc - Lisa LeBlanc
Pen / Lisa LeBlanc - Lisa LeBlanc
Démo / Lisa LeBlanc - Lisa LeBlanc