Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de l’album "L'Heptade" du mythique groupe québécois Harmonium.
Aperçu du résultat 👇
Matériel
Dossier de départ
Polices d'écriture 🚓
Revival 565 Italic
Couleurs 🎨
#333333
#0a0e11
#a53324
#d1b997
Médias 📷
Nuage haut
Nuage centre
Nuage bas
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.
Le fond de la page doit être de couleur grise et avoir un dégradé vertical allant du charcoal au rouge partant du coin haut gauche pour aller au coin bas droit.
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 textes
À l'aide de @font-face, importez la police d'écriture Revival565Italic.otf, nommez-la Revival et appliquez-la aux textes. N'oubliez pas de spécifier le format.
Les textes doivent être positionnés de manière absolue, prendre tout l'espace disponible en largeur, avoir un alignement de texte centré, une grosseur de police d'écriture de 3.5vmin et être de couleur beige.
Le nom du groupe (h1) doit être positionné à 15% du haut et le titre de l'album (h2) à 91% du haut.
Requis nuages
La toile (.canva) doit être positionnée de manière absolue à 33.5% du haut, être centré horizontalement grâce aux marges extérieur, avoir une largeur de 75% et une hauteur de 54% et avoir une bordure intérieur de 1.5vmin solide de couleur beige.
Le conteneur de nuages (.cloud-wrapper) doit être positionné de manière absolue au centre de son parent, avoir une largeur de 70vmin, une hauteur de 60vmin et avoir une rotation de 25deg. Utilisez le background-color pour bien visualiser cette étape.
Les nuages (.cloud) doivent être positionnés de manière absolue et prendre tout l'espace disponible en largeur.
Placez verticalement le nuage du haut à -10%, celui du milieu à 25% et celui du bas à 60%.
Afin de donner une teinte rouge aux nuages, vous devrez utiliser une série de filtres qui va comme suit: invert(48%) sepia(13%) saturate(3207%) hue-rotate(320deg) brightness(80%) contrast(120%) blur(0.2vmin).
Assurez-vous que rien ne dépasse de la toile (.canva).
Requis animation
Créez une animation nommée cloud appliquant une translation horizontale partant de -100% à 70vmin et appliquez la aux nuages de façon linéaire et infinie.
La durée de l'animation du nuage du haut doit être de 24 secondes, celui du milieu de 16 secondes et celui du bas de 10 secondes.
Ambiance
Corrigé
Zip / Harmonium - L'Heptade
Pen / Harmonium - L'Heptade
Démo / Harmonium - L'Heptade