プロフィールカード

CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 32/35。

チャレンジ

簡単

有名な飛行士であるAmelia Earhartに関する完全なHTMLページが与えられています。このページにはすでに構造とコンテンツがありますが、モバイルと大きな画面の両方で見栄えを良くするために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>