Как сделать блок с картинкой и текстом

Question

В школе сказали делать сайт я вообще ничего не знаю пробовал по видеоуроку, но не понимаю как сделать чтобы в блоке была картинка как ссылка и текст внизу( Хочу примерно как на картинке, снизу что у меня получилось

.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>

Answer 1

Это делается примерно так. Дальше думаю разберёшься)).

.recipe1{
    width: 100%;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
}
.row-recipe{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}
.recipe1-col img{
    display: block;
    max-width: 100%;
    width: 100%;
    height: 150px;
    background: red; 
    border-radius: 10px;
}
.recipe-col {
  box-sizing: border-box;
}
.recipe1-col a {
  display: flex;
  flex-direction: column;
}

<section class="recipe1">
  <div class="row-recipe">
    <div class="recipe1-col">
        <a href="cake1.html">
          <img src="images/cake/13.png">
          <span class="title">Заголовок</span>
          <span class="desc">Описание</span>
        </a>
    </div>
    <div class="recipe1-col">
        <a href="cake1.html">
          <img src="images/cake/13.png">
          <span class="title">Заголовок</span>
          <span class="desc">Описание</span>
        </a>      
    </div>
    <div class="recipe1-col">
        <a href="cake1.html">
          <img src="images/cake/13.png">
          <span class="title">Заголовок</span>
          <span class="desc">Описание</span>
        </a>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Как сделать блок с картинкой и текстом

Ответы (1 шт):