Flexbox - Actualités Google

Pour cet exercice vous devez recréer à l’aide de flexbox le module d’actualités affiché sur la page de résultat de Google.

Aperçu du résultat 👇

Matériel Pen de départ

Couleurs 🎨

#dfe1e5 #70757a Il est interdit d’utiliser les propriétés position et transform. Requis de base Faites en sorte que chaque carte affiche une en dessous de l'autre avec une bordure grise pâle de 1px, des coins arrondis de 8px et un espace de 16px entre chacune d'elles. L'image (.media) doit avoir une largeur de 112px et afficher à la droite du texte (.text) . Attention l'image ne doit pas être déformée, son centre doit rester visible en tout temps et elle ne doit pas dépasser de la carte. La zone de texte doit prendre tout l'espace restant disponible, se garder une marge intérieure de 16px de tous les côtés et afficher les éléments qu'elle contient l'un en dessous de l'autre. Le texte (text) ne doit pas être souligné par défaut, mais doit le devenir lorsque la carte est survolée. Les sections de l'auteur et de date doivent avoir une taille de texte de 12px et être grises foncées. Le logo et l'auteur et son nom doivent être séparés par un espace de 4px et être alignés verticalement un avec l'autre. Requis 700px et + Les cartes doivent affichées une à côté de l'autre, prendre 1 tiers de l'espace disponible chaque, ne plus avoir d'espace de 16px vers le bas, mais plutôt vers la droite afin de les garder séparés. L'image (.media) doit maintenant s'afficher par-dessus le texte (.text), prendre toute la largeur de la carte et avoir une hauteur de 120px. Les dates doivent afficher au bas de leurs cartes respectives. Notes de cours 📚