COPIA Y PEGA EL SIGUIENTE CODIGO EN CODESANDBOX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML + CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>PRESIDENTES DE MEXICO</h1>
</header>
<main>
<h2>BENITO JUAREZ</h2>
<h2>CARLOS SALINAS DE GORTARI</h2>
<h2>ANDRES MANUEL LOPEZ OBRADOR</h2>
<footer></footer>
</body>
</html>
CSS
main {
color: white;
}
h1 {
text-decoration: underline;
}
.biografia {
margin-bottom: 20px;
border: solid gray;
border-radius: 20px 50px 20px 50px;
display: flex;
align-items: center;
align-content: justify;
}
.biografia h2 {
text-align: center;
display: block;
width: 100%;
}
.biografia img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 20px 50px 20px 50px;
padding: 10px;
}
.juarez {
background-color: maroon;
}
.obrador {
background-color: maroon;
}
.gortari {
color: maroon;
}
