Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de l’album "Break Syndical" du groupe Les Cowboys Fringants.
Aperçu du résultat 👇
Matériel
Dossier de départ
Polices d'écriture 🚓
Alternate Gothic ATF Demi
Couleurs 🎨
#f9f83c
#019e49
#666666
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 police d'écriture et placez-la dans un dossier fonts.
Créez une variable pour chacune des couleurs pour utilisation ultérieure.
Le fond de la page doit être de couleur grise et avoir un dégradé vertical allant du jaune au vert.
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 verte et avoir un ombrage de 10vmin égal de tous les côtés de couleur noire semi-transparente.
Le conteneur central (.content-wrapper) doit avoir une hauteur de 24vmin, prendre tout l'espace disponible en largeur et être positionné au centre de l'album grâce aux marges.
Requis textes
À l'aide de @font-face, importez la police d'écriture alternate-gothic-atf-demi.otf, nommez la AlternateGothic et appliquez-la aux textes qui doivent aussi être de couleur jaune.
Le nom du groupe (h1) doit avoir une grosseur de police d'écriture de 10.5vmin et avoir un alignement de texte vertical.
Le titre de l'album (h2) doit avoir une grosseur de police d'écriture de 4vmin, avoir une marge extérieur gauche de 3vmin et une marge exterieur haute de 3.5vmin.
Requis voitures
Le conteneur de voitures (.car-wrapper) doit être positionné de manière absolue à 1vmin du bas et 3vmin de la droite. Il doit aussi avoir un espacement de lettres de 2vmin.
Les voitures (.car) doivent avoir une hauteur de 7.5vmin et être de couleur jaune.
Requis animation
Créez une animation nommée car appliquant une translation horizontale en 4 étapes (0%,100% - 25% - 50% - 75%) allant d'un facteur de 13% à -13% à -13% à 13%.
Appliquez cette animation à la 2ième voiture avec une durée de 2 secondes et de manière infinie.
Afin de créer un effet de "bump", utilisez l'outil Cubic-Bezier.com pour créer une courbe qui dépasse vers le haut et utilisez-la pour déterminer la fonction de temps de l'animation. Pour les paresseux, voici la courbe utilisée dans la vidéo de référence: cubic-bezier(.91, .46, 1, 1.63).
Ambiance
Corrigé
Zip / Les Cowboys Fringants - Break Syndical
Pen / Les Cowboys Fringants - Break Syndical
Démo / Les Cowboys Fringants - Break Syndical