Profilkarte

Teil des Abschnitts Practical Frontend der HTML-Journey von Coddy — Lektion 32 von 35.

Aufgabe

Einfach

Sie erhalten eine vollständige HTML-Seite über Amelia Earhart, eine berühmte Pilotin. Die Seite verfügt bereits über die Struktur und den Inhalt, benötigt aber noch CSS-Styling, damit sie sowohl auf mobilen Geräten als auch auf größeren Bildschirmen gut aussieht.

Ihre Aufgabe ist es, die fehlenden CSS-Styles hinzuzufügen, um das Design zu vervollständigen.

Definieren Sie CSS-Variablen für die Primärfarbe, die Textfarbe und den Hintergrund. Wenden Sie diese auf den Hintergrund der Karte, den Text, die Überschrift und die Schaltfläche an.
Gestalten Sie das Layout für größere Bildschirme (min-width: 768px):
- Zeigen Sie das Bild links und den Text rechts an (verwenden Sie flex-direction: row).
- Legen Sie angemessene Breiten für das Bild und den Inhalt fest.
Wenden Sie auf größeren Bildschirmen object-fit: cover; auf das Bild an, damit es ansprechend skaliert wird.

Probier es selbst

<!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>