Tarjeta de perfil

Parte de la sección Frontend Práctico 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 aviadora famosa. La página ya tiene la estructura y el contenido, pero necesita estilos CSS para que se vea bien tanto en dispositivos 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 del texto y el fondo. Aplícalas al fondo, el texto, el encabezado y el botón de la tarjeta.
Da estilo al diseño para pantallas más grandes (min-width: 768px):
- Muestra la imagen a la izquierda y el texto a la derecha (usa flex-direction: row).
- Establece 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>