Object-fit - McDonald's

Pour cet exercice, vous allez devoir recréer différentes combinaisons de menu déjeuner chez McDonald’s. Pour chacune des étapes, un Pen contenant un HTML de base et les éléments visuels requis vous sera fourni. Vous n’aurez qu’à vous faire une copie (fork) de chacun de ces pens.

Malheureusement, les images fournies ne sont pas dans le bon format pour effectuer la mise en page demandée. Il vous faudra utiliser la propriété CSS object-fit afin de remédier à ce problème.

Matériel

Couleurs 🎨

blanc #fff

Requis

  1. Chaque élément ayant la classe .menu doit avoir une largeur de 810px, une marge verticale de 20px et être centré horizontalement.

  2. Les images ayant la classe .small doivent avoir une dimension de 200x200px.

  3. Les images ayant la classe .big doivent avoir une dimension de 400x400px.

  4. Chaque image doit avoir un fond blanc.

Étapes

  1. Étape 1
    Pen de départ

  2. Étape 2
    Pen de départ

  3. Étape 3
    Pen de départ
    N'hésitez pas à ajouter du HTML au besoin à partir de cette étape afin de regrouper des éléments.

Bonus

  1. Bonus 1
    Pen de départ
    Le petit espace sous l'image du café est normal.

Notes de cours 📚