Html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
...
<link href="./assets/css/recetas.css" rel="stylesheet" />
<link href="./assets/css/recetas/receta.css" rel="stylesheet" />
<link href="./assets/css/recetas/receta-titulo.css" rel="stylesheet" />
<link href="./assets/css/recetas/receta-contenido.css" rel="stylesheet" />
<link href="./assets/css/recetas/receta-descripcion.css" rel="stylesheet" />
<link href="./assets/css/recetas/receta-imagen.css" rel="stylesheet" />
<link href="./assets/css/recetas/receta-boton.css" rel="stylesheet" />
</head>
<body>
...
<section class="recetas">
<div class="receta">
<img alt="Tigela de abacate" class="receta__imagen" src="./assets/img/recetas/bowl-de-aguacate.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Bowl de aguacate</h4>
<p class="receta__descripcion">Receta refrescante y llena de vitaminas para su desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
<div class="receta">
<img alt="Ensalada de kiwi" class="receta__imagen" src="./assets/img/recetas/ensalada-de-kiwi.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Ensalada de kiwi</h4>
<p class="receta__descripcion">Receta refrescante y llena de vitaminas para su desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
<div class="receta">
<img alt="Mix de vegetales" class="receta__imagen" src="./assets/img/recetas/mix-de-vegetales.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Mix de vegetales</h4>
<p class="receta__descripcion">Receta refrescante y llena de vitaminas para su desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
<div class="receta">
<img alt="Pimentones a la Juliana" class="receta__imagen" src="./assets/img/recetas/pimentones-a-la-juliana.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Pimentones a la Juliana</h4>
<p class="receta__descripcion">Receta refrescante y llena de vitaminas para su desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
<div class="receta">
<img alt="Plato oriental" class="receta__imagen" src="./assets/img/recetas/plato-oriental.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Plato oriental</h4>
<p class="receta__descripcion">Receta refrescante y llena de vitaminas para su desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
<div class="receta">
<img alt="Remolachas horneadas" class="receta__imagen" src="./assets/img/recetas/remolachas-horneadas.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Remolachas horneadas</h4>
<p class="receta__descripcion">Receta refrescante y llena de vitaminas para su desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
</section>
</body>
</html>CSS
.recetas {
background: #e5e5e5;
display: flex;
flex-wrap: wrap; /*para que vea elemto de linea en columnas*/
padding: 5rem 0 0 5rem;
}CSS recetas/recetas.css
.recetas {
background: #e5e5e5;
display: flex;
flex-wrap: wrap; /*para que vea elemto de linea en columnas*/
padding: 5rem 0 0 5rem;
}titulo
.receta__titulo {
font-size: 1.4375rem;
}Descripcion
.receta__descripcion {
font-size: 1.1875rem;
line-height: 1.5;
text-align: justify;
}
.receta__contenido {
padding: 1rem;
}boton
.receta__boton {
background: #8d0606;
border: none;
border-radius: 5px;
color:#fdfdfd;
padding: 1rem;
}receta
.receta {
background: #fdfdfd;
display: flex;
flex-direction: column;
margin-bottom: 5rem;
margin-right: 5rem;
width: calc(25% - 5rem);
}
.receta__imagen {
height: 200px;
}
