Flexbox - Pony

Pour cet exercice vous devrez recréer une navigation responsive pour la marque de vêtements montréalaise Pony. Afin de réussir, vous aurez besoin de créer une mise en page flexbox.

Aperçu du résultat 👇

Matériel

Pen de départ 

Couleurs 🎨

Mauve #b894d2
Gris #757575
Blanc #fff
Noir #000

Médias 🖼️

Pony
https://ex.smnarnold.com/flex/pony/pony.jpg

Requis de base

  1. La navigation (.nav) doit avoir un fond blanc, une largeur de 200px et prendre toute la hauteur de la page. Afin de laisser le contenu à l'intérieur respirer, une marge intérieure de 20px doit être présente de tous les côtés.

  2. Le logo PONY doit avoir une hauteur de 50px et ne doit pas être déformé.

  3. Les liens doivent s'afficher un en dessous de l'autre avec un espace de 20px entre eux. Ils doivent en avoir une taille de 13px, être en majuscules, ne pas avoir de ligne de soulignement et la puce ne doit pas être visible. Ils doivent être gris par défaut et devenir noirs lorsque survolés.

  4. Le visage de Pony doit être affiché en arrière-plan de l'élément avec la classe .face. Avoir une dimension de 50px par 50px, être parfaitement rond et être positionné en bas et au centre de la navigation à l'aide de flexbox.

Requis tablette et plus

À partir de 650px et plus, l'affichage de la navigation doit changer afin de tirer profit de l'espace horizontal disponible ↔️.

  1. La navigation doit prendre toute la largeur de la page et sa hauteur doit s'ajuster en fonction de son contenu.

  2. Les éléments de la navigation (logo, liste de liens et visage) doivent s'afficher le plus loin possible les uns des autres et être centrés verticalement les uns par rapport aux autres.

  3. La liste de lien doit prendre tout l'espace disponible entre le logo et le visage et les liens doivent se répartir également dans l'espace restant.