Profil Kartı

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 32 / 35.

Görev

Kolay

Ünlü bir havacı olan Amelia Earhart hakkında eksiksiz bir HTML sayfası size verilmiştir. Sayfa zaten yapıya ve içeriğe sahiptir, ancak hem mobil hem de daha büyük ekranlarda iyi görünmesi için CSS stiline ihtiyacı vardır.

Göreviniz, tasarımı tamamlamak için eksik CSS stillerini eklemektir.

Birincil renk, metin rengi ve arka plan için CSS değişkenleri tanımlayın. Bunları kartın arka planına, metnine, başlığına ve butonuna uygulayın.
Geniş ekran düzenini (min-width: 768px) stillendirin:
- Görüntüyü solda ve metni sağda gösterin (flex-direction: row kullanın).
- Görüntü ve içerik için uygun genişlikleri ayarlayın.
Geniş ekranlarda, görüntünün düzgün ölçeklenmesi için görüntüye object-fit: cover; uygulayın.

Kendin dene

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