כרטיס פרופיל

חלק מהיחידה פיתוח 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>