Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de l’album live "La maudite tournée" du célèbre chanteur québécois Robert Charlebois.
Aperçu du résultat 👇
Matériel
Dossier de départ
Polices d'écriture 🚓
Gill Sans MT Pro Bold ExtCond
Couleurs 🎨
#0a0e11
#333333
#ffffff
#fce339
#ae3c30
Médias 📷
Aile
Robert
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 1.5 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 rouge au jaune.
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.
Utilisez le pseudo-élément ::before en position absolue et couvrant tout l'espace disponible afin de créer un effet de grain. Appliquez lui le filtre url(#grain) ainsi qu'un grayscale à 100% et fusionnez-le en mode soft-light.
Requis textes
À l'aide de @font-face, importez la police d'écriture GillSansMTPro-BoldExtCond.otf, nommez-la Gill et appliquez-la aux textes. Assurez-vous de mentionner le format.
Les textes doivent être positionnés de manière absolue, être centré horizontalement, avoir une grosseur de police d'écriture de 7vmin, une hauteur de ligne de 6vmin être de couleur blanche et avoir une déformation verticale d'un facteur de 1.5.
Le nom de l'artiste doit être positionné à 7vmin du haut et le nom de l'album à 6vmin du bas.
Requis diable
Le conteneur du diable (.devil) doit avoir une hauteur de 37%, prendre tout l'espace disponible en largeur et être placé au centre de l'album grâce aux marges.
Robert (.robert) doit avoir une hauteur de 95%, une largeur de 35% et être positionné de manière absolue au centre bas de son parent grâce aux marges. Il doit avoir l'image robert.webp comme arrière-plan contenu et aligné au centre bas.
Les ailes (.wing) doivent avoir une hauteur de 69%, prendre tout l'espace disponible en largeur et avoir l'image wing.webp comme arrière-plan contenu sans répétition.
Changez le point d'origine de transformation des ailes pour qu'il soit situé au centre bas de l'élément.
L'aile de gauche doit être positionné à 5% de la gauche et l'aile de droite à 5% de la droite.
Pour inverser l'aile de droite, appliquez lui une déformation horizontale d'un facteur de -1.
Requis animation
Créez deux animations nommées wing-left et wing-right effectuant une rotation allant de -7deg à 5deg. En plus de la rotation, l'animation de l'aile de droite doit aussi comporter la déformation horizontale appliquée plus haut.
Appliquez ces animations à leur aile respective avec une durée correspondant à la variable --speed de façon infinie et alternante.
Afin d'avoir un effet de floatement, créez une dernière animation nommée devil appliquant une translation verticale allant de -2% à 2%.
Appliquez cette animation au conteneur du diable (.devil) avec une durée correspondant à la variable --speed de façon infinie et alternante et commençant lentement pour ralentissant en fin de parcours.
Ambiance
Corrigé
Zip / Robert Charlebois - La maudite tournée
Pen / Robert Charlebois - La maudite tournée
Démo / Robert Charlebois - La maudite tournée