La carte de profil
Crée une carte de profil digne d'un vrai réseau social.
Tu sais maintenant utiliser le box model (padding, margin, border) et le positionnement. C'est le moment de combiner tout ça pour créer un composant qu'on retrouve partout sur le web.
Le HTML est prêt : un avatar, un nom, une bio, des stats et un bouton. À toi de transformer cette fiche de personnage brute en une vraie carte qui donne envie de cliquer.
Ce qu'on te demande
Style la carte de profil en CSS. Le résultat doit ressembler à ce qu'on voit sur Twitter, LinkedIn ou GitHub. Voici les objectifs :
- La carte a un padding, des coins arrondis et une largeur max
- Ajoute une ombre portée (
box-shadow) pour l'effet "flottant" - L'avatar doit être rond (
border-radius: 50%) - Le badge "En ligne" doit être positionné en absolute avec un fond vert
N'hésite pas à aller plus loin que les critères : style le bouton, les stats, ajoute des couleurs...
Astuce : pour que position: absolute fonctionne sur le badge, son parent (.card-header) doit avoir position: relative. C'est le combo de base pour positionner un élément par rapport à un autre.
Pourquoi c'est important : la carte de profil est un composant universel du web. En la maîtrisant, tu as un item de plus dans ton inventaire de compétences : box model, positionnement et ombres.