Carte de profil

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 32 sur 35.

Défi

Facile

On vous donne une page HTML complète sur Amelia Earhart, une célèbre aviatrice. La page possède déjà la structure et le contenu, mais elle nécessite un style CSS pour qu'elle soit présentable à la fois sur les écrans mobiles et sur les écrans plus larges.

Votre tâche consiste à ajouter les styles CSS manquants pour finaliser le design.

Définissez des variables CSS pour la couleur primaire, la couleur du texte et l'arrière-plan. Appliquez-les à l'arrière-plan de la carte, au texte, au titre et au bouton.
Stylez la mise en page pour les écrans plus larges (min-width: 768px) :
- Affichez l'image à gauche et le texte à droite (utilisez flex-direction: row).
- Définissez des largeurs appropriées pour l'image et le contenu.
Sur les écrans plus larges, appliquez object-fit: cover; à l'image pour qu'elle s'adapte correctement.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Explorer Profile Card</title>
  <style>
    /* Variables */


    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .card {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      max-width: 600px;
      display: flex;
      flex-direction: column;
    }

    .card img {
      width: 100%;
      height: auto;
    }

    .card-content {
      padding: 20px;
      color: #000;
    }

    .card-content h2 {
      margin-top: 0;
      color: #555;
    }

    .card-content p {
      line-height: 1.5;
      margin-bottom: 20px;
    }

    .card-content button {
      background-color:#555;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .card-content button:hover {
      background-color: #1b4f72;
    }

    /* Larger screens → side by side */
   

  </style>
</head>
<body>

  <div class="card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Amelia_Earhart_standing_under_nose_of_her_Lockheed_Model_10-E_Electra%2C_small.jpg" alt="Amelia Earhart">
    <div class="card-content">
      <h2>Amelia Earhart</h2>
      <p>Amelia Earhart was a pioneering American aviator who became the first woman to fly solo across the Atlantic Ocean. She inspired generations with her courage and adventurous spirit.</p>
      <button>Read More</button>
    </div>
  </div>

</body>
</html>