Pour cet exercice, vous devez écrire du CSS afin de recréer l’album "Everything Everything" du groupe de musique électronique Underworld.
Aperçu du résultat 👇
Matériel
Dossier de départ
Fonts
Univers 93 Extra Black Extended Oblique
Zurich Black Extended Regular
Couleurs 🎨
#bfe6e3
#6aa815
#5f380d
#777777
#000000
#ffffff
Prenez le temps d'analyser le fichier HTML, vous y trouverez des variables CSS.
Il est INTERDIT de modifier le HTML.
Requis de base
Téléchargez la police d'écriture et placez la dans un dossier fonts.
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 vert au bleu.
Fusionnez les deux fonds en mode screen afin de donner au gradient un effet délavé.
L'album doit avoir une dimension verticale et horizontale de 80% du plus petit côté de la fenêtre, être de couleur bleue ainsi qu'avoir un ombrage de 100px égal de tous les côtés de couleur noire semi-transparente.
Utilisez transform afin de positionner l'album au centre de la fenêtre.
Requis carrés
Les carrés doivent se comporter comme des images, avoir une hauteur de 25% ainsi l'album et une largeur d'aussi 25% de l'album et être de couleur verte.
À ce stade-ci, il devrait y avoir un espace entre les carrés, faites-en sorte de le faire disparaître.
Créez une animation nommée everything en 10 étapes (0%-100%, 10%, 20%, 30%, ...) modifiant l'opacité de l'élément avec les valeures suivantes: [60%, 10%, 30%, 100%, 20%, 90%, 50%, 80%, 40%, 70%].
Appliquez cette animations aux carrés (.square) de façon linéaire, à l'infini et d'une durée de 4 secondes.
À cette étape-ci, tous les carrés devraient se comporter de façon uniforme. Pour créer un effet aléatoire, appliquez à l'animation un délai correspondant à la variable --nb multiplié par -4 secondes.
Requis textes
Importez la police d'écriture Univers93ExtraBlackExtendedOblique.otf et nommez la Univers93.
Importez la police d'écriture ZurichBlackExtendedRegular.otf et nommez la Zurich.
Les textes doivent être en position absolue, avoir une grosseur de police d'écriture correspondant à 3% du plus petit côté de la fenêtre et une rotation de 90deg.
Le nom du groupe doit être positionné à 28% du haut, 3% de la gauche, avoir la police d'écriture Zurich, avoir un style italic et être de couleur brune.
Le nom de l'album doit être positionné à 64% du haut, 4% de la gauche, avoir la police d'écriture Univers93, avoir une hauteur de ligne de 2.8% du plus petit côté de la fenêtre et être de couleur blanche.
Ambiance
Corrigé
Zip / Underworld - Everything Everything
Pen / Underworld - Everything Everything
Démo / Underworld - Everything Everything