Haga lo que hicimos | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

un ejercicio que combina los conceptos de estilizar elementos con clases y el modelo de caja:

Ejercicio: Diseñar una tarjeta de perfil

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Tarjeta de Perfil</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="tarjeta">
    <img src="foto_perfil.jpg" alt="Foto de perfil" class="foto">
    <h2 class="nombre">Nombre Apellido</h2>
    <p class="descripcion">Breve descripción sobre ti.</p>
  </div>
</body>
</html>


CSS (style.css):

/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Importante para el modelo de caja */
}

.tarjeta {
  width: 300px;
  border: 1px solid #ccc;
  padding: 20px;
}

.foto {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.nombre {
  color: #333;
  font-size: 1.2em;
  margin-bottom: 5px;
}

.descripcion {
  color: #666;
}


Reset CSS: Elimina los estilos predeterminados del navegador.
Clase "tarjeta": Define el ancho, borde y relleno de la tarjeta.
Clase "foto": Establece el tamaño, forma circular y margen inferior de la foto de perfil.
Clase "nombre": Da estilo al nombre con color y tamaño de fuente.
Clase "descripcion": Aplica un color gris al texto de la descripción.