🧩 Exercice : Construire une carte en utilisant Flexbox

🎯 Objectif

Créer une petite carte d’information en utilisant uniquement Flexbox pour organiser son contenu.

📝 Consignes

• Créer un conteneur avec la classe card.
• À l’intérieur, ajouter :
  • une image (ou un carré coloré) représentant un avatar,
  • un bloc texte contenant :
    • un titre (nom),
    • un sous‑titre (fonction),
    • une courte description.
• Utiliser Flexbox pour aligner l’image et le texte horizontalement.
• Ajouter un bouton sous le texte.

🧱 Structure HTML imposée

<div class="card">

  <div class="avatar"></div>

  <div class="info">
    <h2>Nom du personnage</h2>
    <h3>Fonction</h3>
    <p>Courte description du personnage.</p>
    <button>Voir plus</button>
  </div>

</div>
  

🎨 CSS attendu

• met la carte en display: flex,
• aligne l’avatar et le texte horizontalement,
• ajoute un gap entre les éléments,
• donne une taille fixe à l’avatar (ex : 80×80px),
• arrondit les coins de la carte,
• ajoute un fond clair et un padding.