В школе сказали делать сайт я вообще ничего не знаю пробовал по видеоуроку, но не понимаю как сделать чтобы в блоке была картинка как ссылка и текст внизу( Хочу примерно как на картинке, снизу что у меня получилось
.recipe1{
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.row-recipe{
display: flex;
margin-right: 70px;
justify-content: center;
}
.recipe1 img{
height: 220px;
margin: 50px;
border: 2px dashed #e01111c5 ;
padding: 8px;
background: #d4181898;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 10px;
justify-content: center;
}
.recipe-col{
flex-basis: 31%;
margin-bottom: 5%;
padding: 20px 12px;
box-sizing: border-box;
}
<section class="recipe1">
<div class="row-recipe">
<div class="recipe1-col">
<a href="cake1.html"><img src="images/cake/13.png"></a>
</div>
<div class="recipe1-col">
<a href="cake2.html"><img src="images/cake/15.png"></a>
</div>
<div class="recipe1-col">
<a href="cake3.html"><img src="images/cake/15.png"></a>
</div>
</div>
</section>