Profil Kartı

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 32 / 35.

Görev

Kolay

Ünlü havacı Amelia Earhart hakkında eksiksiz bir HTML sayfası verilmiştir. Sayfa zaten yapıya ve içeriğe sahip, ancak hem mobil cihazlarda hem de daha büyük ekranlarda iyi görünmesi için CSS stillendirmesine ihtiyaç duymaktadı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 düğmesine uygulayın.
Daha büyük ekran düzenini (min-width: 768px) biçimlendirin:
- Görseli solda, metni sağda gösterin (flex-direction: row kullanın).
- Görsel ve içerik için uygun genişlikleri ayarlayın.
Daha büyük ekranlarda, düzgün ölçeklenmesi için görsele 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>