Carte auto-layout et convertie en HTML/CSS

🎯Exercice : Créer une carte de produit à partir d’un design Figma. Matériel

Fichier de départ (copiez ou dupliquez le dans votre Figma personnel pour démarrer).

Photo de la salle de conférence Aperçu du résultat 👇 (lorqu'en HTML/CSS, le comportement responsive devrait aussi être le même) Requis Ouvrir le fichier Figma. File / Save local copy. Importez ensuite ce fichier .fig dans votre compte Figma personnel. Préparer des auto-layouts: sur la carte et sur les groupes d'éléments pour faire en sorte qu'elle s'adapte en fonction de la démo ci-haut, lorsque redimensionnée.
Votre tâche est facilitée puisque que la plupart des éléments sont déjà groupés ensemble. Vous n'aurez qu'à activer l'auto-layout principal et les sous auto-layouts et ajuster les paramètres pour chacun. N'oubliez pas de travailler la mise en place de l'image elle aussi responsive (et pssss🤫, ceci génèrera sans doute des propriétés object-fit et object-position), vous vous reconnaissez?🕵️‍♀️ Extraire le code via Dev Mode. Dans VS Code, reproduire le HTML de cette carte et de tous les sous-groupes qu'elle contient. Utilisez le CSS généré par Dev Mode pour vous guider, mais en l’optimisant. Tester l’adaptabilité avec quelques modifications (ex. ajustement du flex-grow, ajout d’un breakpoint au besoin etc). Notes de cours 📚