Помогите,я не знаю,как правильно выстовить background и картинки.Даже не знаю,как правильно сформулировать вопрос

Question

#photo {
  padding-top: 25px;
  width: 1634px;
  display: flex;
  justify-content: space-between;
}

#photo .img1 {
  width: 530px;
  height: 287px;
}

#photo .img2 {
  width: 530px;
  height: 287px;
}

#photo .img3 {
  width: 530px;
  height: 287px;
}

#photo img {
  width: 530px;
  height: 287px;
  position: absolute;
}

#photo a {
  margin-left: 120px;
  margin-top: 181px;
  color: #FFFFFF;
  background-color: #3EA43B;
  width: 529px;
  height: 90px;
}

#photo span p {
  margin-left: 272px;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  position: absolute;
  align-items: center;
  text-align: right;
  color: #FFFFFF;
  background-color: #3EA43B;
}

<section id="photo">
  <div class="img1">
    <img src="img/warm-up.jfif">
    <span><a>Разминка</a><br><p>10-15 мин.|8 упражнений</p></span>
    <!-- <p>10-15 мин.|8 упражнений</p> -->
  </div>
  <div class="img2">
    <img src="img/programm1.png">
    <span>Программа 1</span>
    <!-- <p>10-15 мин.|8 упражнений</p> -->
  </div>
  <div class="img3">
    <img src="img/programm2.png">
    <span>Программа 2</span>
    <!-- <p>10-15 мин.|8 упражнений</p> -->
  </div>
</section>

Answer 1

Если не понимаете как сверстать - разбейте секцию на мелкие детали. Вот небольшой пример, далее думаю справитесь

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#photo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.item_photo {
  width: 32%;
  height: 287px;
  position: relative;
}

.item_photo>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item_photo-title {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #9c27b0ad;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.logo-photo {
  color: #ffffff;
  font-size: 12px;
}

.title-photo {
  color: #ffffff;
  font-size: 12px;
  text-align: right;
}

.title-photo>h2 {
  font-size: 18px;
}

<section id="photo">
  <div class="item_photo">
    <img src="https://i.pinimg.com/originals/e6/50/4b/e6504b18f50db23c61b20e79a01895a3.jpg">
    <div class="item_photo-title">
      <div class="logo-photo">
        <p>LOGO</p>
      </div>
      <div class="title-photo">
        <h2>Разминка</h2>
        <p>10-15 мин.|8 упражнений</p>
      </div>
    </div>
  </div>
  <div class="item_photo">
    <img src="https://img5.goodfon.ru/original/2560x1600/b/5d/girl-model-fitness-sport-body-blonde-woman-tanned.jpg">
    <div class="item_photo-title">
      <div class="logo-photo">
        <p>LOGO</p>
      </div>
      <div class="title-photo">
        <h2>Разминка</h2>
        <p>10-15 мин.|8 упражнений</p>
      </div>
    </div>
  </div>
  <div class="item_photo">
    <img src="https://i.pinimg.com/originals/28/5f/17/285f172fc25ef3623557c88e32bd33ac.jpg">
    <div class="item_photo-title">
      <div class="logo-photo">
        <p>LOGO</p>
      </div>
      <div class="title-photo">
        <h2>Разминка</h2>
        <p>10-15 мин.|8 упражнений</p>
      </div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Помогите,я не знаю,как правильно выстовить background и картинки.Даже не знаю,как правильно сформулировать вопрос

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