Pour cet exercice, vous devrez aider les Minions à se positionner adéquatement en fonction de la largeur de l’écran.
Aperçu du résultat 👇
Matériel
Pen de départ
Couleurs 🎨
#c36a28
#fff183
#80000e
#fd4665
#32073c
#b311bf
Vous n’avez qu’à modifier le CSS uniquement.
Requis de base
Le fond de la page doit avoir un dégradé allant de orange à jaune.
L'élément .wrapper doit avoir une marge intérieur top de 30px, avoir une largeur de 200px et être centré horizontalement dans la page.
Les images doivent être centrées horizontalement à l'intérieur de leur parent .wrapper.
Les images des personnages doivent avoir une hauteur de 150px, forçant ainsi un affichage vertical.
Fenêtre de 700px et +
Le fond de la page doit avoir un dégradé allant de rouge à rose.
Le .wrapper doit avoir une largeur de 660px.
Les images des personnages doivent avoir une hauteur de 250px, forçant ainsi un affichage horizontale.
Fenêtre de 1000px et +
Le fond de la page doit avoir un dégradé allant de mauve foncé à mauve pâle.
Le .wrapper doit avoir une largeur de 900px.
Les images des personnages doivent avoir une hauteur de 350px.
Faites en sorte que la souris flotte à gauche et le chien à droite.
Notes de cours 📚
Float
Permet à un élément de flotter à gauche ou à droite