Une carte de profil

Tout le cours en un exercice : structure HTML, image, liste, liens, boîte et Flexbox.

30 min

Pas de nouvelle notion ici : seulement ce que tu as appris dans les six leçons, réuni dans un seul exercice. Prends ton temps, relis les leçons si besoin, et ne regarde la solution qu'en dernier recours.

Le défi

Construis une carte de profil :

une div avec la classe carte, qui contient tout le reste ;
l'image /exemples/avion.svg avec un texte alternatif ;
un <h1> avec ton prénom, de couleur #2f5bd3 ;
une liste à puces d'au moins 3 passions ;
un <nav> de classe liens avec au moins 2 liens, en ligne grâce à Flexbox, espacés de 12px ;
la carte : espace intérieur de 24px, coins arrondis de 16px, largeur maximale de 360px.

index.html

Ton code

Résultat

Une div.carte contient la carte
L'image /exemples/avion.svg a un alt rempli
Le <h1> est de couleur #2f5bd3
La liste a au moins 3 éléments
nav.liens contient au moins 2 liens
nav.liens utilise Flexbox
Les liens sont espacés de 12px
La carte a un padding de 24px
Les coins sont arrondis de 16px
La largeur maximale est de 360px

Bloqué ? Voir une solution

<style>
  .carte {
    max-width: 360px;
    padding: 24px;
    border: 1px solid #d8dbe8;
    border-radius: 16px;
  }

  .carte h1 {
    color: #2f5bd3;
  }

  .liens {
    display: flex;
    gap: 12px;
  }
</style>

<div class="carte">
  <img src="/exemples/avion.svg" alt="Un avion qui décolle">
  <h1>Léa</h1>
  <ul>
    <li>Aviation</li>
    <li>Musique</li>
    <li>Code</li>
  </ul>
  <nav class="liens">
    <a href="https://github.com">GitHub</a>
    <a href="mailto:lea@exemple.fr">E-mail</a>
  </nav>
</div>

Le défi

Défi réussi !