Solución: Actividad 201
A continuación, se muestra una propuesta de solución.
Probar en el navegador
index.html
<!DOCTYPE html>
<html lang="es">
<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>201</title>
<link rel="stylesheet" href="estilos.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<h1>Sopa de cebolla</h1>
<p class="comensales">4 personas</p>
<div class="portada">
<img src="img/onion.webp" alt="Cebollas" />
</div>
<div class="ingredientes">
<h2>Ingredientes</h2>
<ul>
<li><span class="cantidad">1 kg</span> de cebollas.</li>
<li><span class="cantidad">2 l</span> de caldo de carne.</li>
<li><span class="cantidad">100 g</span> mantequilla.</li>
<li><span class="cantidad">1 cucharada</span> de harina.</li>
<li>
<span class="cantidad">100 g</span> de queso emmental suizo o
gruyére rallado.
</li>
<li>Pan tostado en rebanadas.</li>
<li>Tomillo.</li>
<li><span class="cantidad">1 hoja</span> de laurel.</li>
<li>Pimienta.</li>
</ul>
</div>
<div class="pasos">
<h2>Proceso</h2>
<ol>
<li>Pelar y partir las cebollas en rodajas finas.</li>
<li>
Rehogarlas con la mantequilla, sal y pimienta a fuego lento hasta
que estén transparentes sin dorarse.
</li>
<li>Añadir la harina sin dejar de remover.</li>
<li>Ponerlo en una cazuela con el caldo, el tomillo y el laurel.</li>
<li>Dejar cocer a fuego lento durante unos 15 minutos.</li>
<li>
Poner las rebanadas de pan encima, espolvorear el queso y gratinar
al horno.
</li>
</ol>
</div>
</main>
</body>
</html>
estilos.css
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
min-height: 100%;
}
body {
margin: 0;
background-image: url("img/bg.webp");
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
font-family: "Gochi Hand", cursive;
}
main {
background-color: #ebebeb;
padding: 30px 50px;
margin: 30px;
border-radius: 30px;
max-width: 600px;
display: flex;
flex-wrap: wrap;
}
h1 {
flex: 1 0 100%;
margin: 0;
text-align: center;
text-transform: uppercase;
color: #2b2b2b;
font-size: 50px;
}
.comensales {
margin: 0;
padding: 10px 0 20px 0;
font-size: 20px;
flex: 1 0 100%;
text-align: center;
color: #c55c32;
}
h2 {
text-align: center;
text-decoration: underline;
}
.portada {
flex: 0 0 100%;
overflow: hidden;
display: flex;
justify-content: center;
padding-bottom: 20px;
}
.portada img {
height: 180px;
overflow: hidden;
border-radius: 50%;
}
.ingredientes,
.pasos {
flex: 1 0 50%;
}
.cantidad {
font-weight: bold;
color: #c55c32;
}
Probar en el navegador