بطاقة الملف الشخصي

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 32 من 35.

التحدي

سهل

لقد تم تزويدك بصفحة HTML كاملة حول Amelia Earhart، وهي طيارة مشهورة. تحتوي الصفحة بالفعل على الهيكل والمحتوى، ولكنها تحتاج إلى تنسيق CSS لجعلها تبدو جيدة على كل من الأجهزة المحمولة والشاشات الأكبر.

مهمتك هي إضافة أنماط CSS المفقودة لإكمال التصميم.

قم بتعريف متغيرات CSS للون الأساسي ولون النص والخلفية. قم بتطبيقها على خلفية البطاقة والنص والعنوان والزر.
قم بتنسيق تخطيط الشاشات الكبيرة (min-width: 768px):
- اعرض الصورة على اليسار والنص على اليمين (استخدم flex-direction: row).
- قم بتعيين عرض مناسب للصورة والمحتوى.
في الشاشات الكبيرة، قم بتطبيق object-fit: cover; على الصورة لكي يتم تغيير حجمها بشكل جيد.

جرّب بنفسك

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