Cartão de Perfil

Parte da seção Frontend Prático 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á tem a estrutura e o conteúdo, mas precisa de estilos CSS para ter uma boa aparência tanto em dispositivos móveis quanto em telas maiores.

Sua tarefa é adicionar os estilos CSS ausentes para concluir o design.

Defina variáveis CSS para a cor primária, a cor do texto e o plano de fundo. Aplique-as ao plano de fundo, ao texto, ao título e ao botão do cartão.
Estilize o layout para telas maiores (min-width: 768px):
- Exiba 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>