Tarjeta de perfil

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 32 de 35.

Desafío

Fácil

Se te proporciona una página HTML completa sobre Amelia Earhart, una famosa aviadora. La página ya tiene la estructura y el contenido, pero necesita estilos CSS para que se vea bien tanto en pantallas móviles como en pantallas más grandes.

Tu tarea es añadir los estilos CSS que faltan para completar el diseño.

Define variables CSS para el color primario, el color de texto y el fondo. Aplícalas al fondo de la tarjeta, al texto, al encabezado y al botón.
Estiliza el diseño para pantallas grandes (min-width: 768px):
- Muestra la imagen a la izquierda y el texto a la derecha (usa flex-direction: row).
- Establece los anchos adecuados para la imagen y el contenido.
En pantallas más grandes, aplica object-fit: cover; a la imagen para que se escale correctamente.

Pruébalo tú mismo

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