Cartão de Perfil

Parte da seção Practical Frontend do Journey de HTML da Coddy. Lição 32 de 35.

Desafio

Fácil

Você recebeu uma página HTML completa sobre Amelia Earhart, uma famosa aviadora. A página já possui a estrutura e o conteúdo, mas precisa de estilização CSS para que fique bem tanto em dispositivos móveis quanto em telas maiores.

Sua tarefa é adicionar os estilos CSS que faltam para completar o design.

Defina variáveis CSS para a cor primária, cor do texto e fundo. Aplique-as ao fundo do cartão, ao texto, ao título e ao botão.
Estilize o layout para telas maiores (min-width: 768px):
- Mostre a imagem à esquerda e o texto à direita (use flex-direction: row).
- Defina larguras adequadas para a imagem e o conteúdo.
Em telas maiores, aplique object-fit: cover; à imagem para que ela seja redimensionada corretamente.

Experimente você mesmo

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