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 🎨

#ffffff Il est interdis d’utiliser les propriétés CSS suivantes:
position, margin (à l’exception de sur l’élément .menu) et padding. Requis Chaque élément ayant la classe .menu doit avoir une largeur de 810px, une marge verticale de 20px et être centré horizontalement. Les images ayant la classe .small doivent avoir une dimension de 200x200px. Les images ayant la classe .big doivent avoir une dimension de 400x400px. Chaque image doit avoir un fond blanc. Étapes Étape 1
Pen de départ
Étape 2
Pen de départ
Étape 3
Pen de départ
Dans l'étape 3 et Bonus, n'hésitez pas à ajouter du HTML au besoin à partir de cette étape afin de regrouper des éléments. Bonus Bonus 1
Pen de départ
Le petit espace sous l'image du café est normal. Notes de cours 📚