Avant de démarrer cette étape, je dois avoir :
● Réalisé une première “card” présente dans “Hébergements à Marseille”.
Une fois cette étape terminée, je devrais avoir :
● Les deux cards utilisées pour les parties “Hébergements à Marseille” et “Les plus populaires”. Il sera alors temps de combiner le tout !
Recommandations :
Identifiez la structure d’une carte “Les plus populaires”. Il y a plusieurs éléments, positionnés horizontalement et verticalement. Cette carte présente une forme plus horizontale que la carte “hébergement”.
Si aucune propriété CSS n’est appliquée sur une image, celle-ci va s’afficher dans sa taille d’origine. Comme pour de très nombreux éléments, donner une largeur en “%” à l’image est une bonne idée. Il sera nécessaire de définir une hauteur en pixels.
Dans la partie droite de la carte, les textes sont positionnés en haut, et les icônes “étoiles” sont positionnées en bas de la carte.
Points de vigilance :
● Ne pas confondre le positionnement et les marges. Une marge permet de définir de petits décalages, mais ne sert pas à “positionner” les éléments. Positionner des éléments relève plus du rôle de Flexbox (exemple: “Je veux que ces deux éléments soient complètement espacés l’un de l’autre sur l’axe vertical).
Ressources :
● L’article How to – Cards de W3C avec quelques snippets de code pour réaliser une card.
● L’article MDN sur la propriété “object-fit”.
Avant de démarrer cette étape, je dois avoir : ● Réalisé une première “card” présente dans “Hébergements à Marseille”. Une fois cette étape terminée, je devrais avoir : ● Les deux cards utilisées pour les parties “Hébergements à Marseille” et “Les plus populaires”. Il sera alors temps de combiner le tout !
Recommandations :
BookiGuide.pdf