Scheda del profilo

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 32 di 35.

Sfida

Facile

Ti viene fornita una pagina HTML completa su Amelia Earhart, una famosa aviatrice. La pagina ha già struttura e contenuto, ma ha bisogno di stili CSS per avere un bell’aspetto sia sui dispositivi mobili sia sugli schermi più grandi.

Il tuo compito è aggiungere gli stili CSS mancanti per completare il design.

Definisci variabili CSS per il colore principale, il colore del testo e lo sfondo. Applicale allo sfondo della scheda, al testo, all’intestazione e al pulsante.
Definisci lo stile del layout per gli schermi più grandi (min-width: 768px):
- Mostra l’immagine a sinistra e il testo a destra (usa flex-direction: row).
- Imposta larghezze adeguate per l’immagine e il contenuto.
Sugli schermi più grandi, applica object-fit: cover; all’immagine, in modo che si adatti bene.

Provalo tu

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