Верстка сайта «Sweet World of Desserts». Часть 4

Третья часть сайта «Sweet World of Desserts». Посвящена разработке блока «Промо». Блок посвящен верстке рецепта десерта. Здесь будет показан простой блок списка с красивыми маркерами в виде галочек.

Структура HTML

  <section class="promo_day">
    <div class="wrapper">
    <h2 class="main-heading">Dessert of the day</h2>
    <h3>Muffins with berries</h3>
    <div class="prom_day_item">
      <div class="prom_day_iner">
        <h4>Ingredients</h4>
        <ul class="prom_list">
          <li><img src="img/check_mark.png" alt="#">2 pcs Egg</li>
          <li><img src="img/check_mark.png" alt="#">1 cup flour</li>
          <li><img src="img/check_mark.png" alt="#">1 glass Milk</li>
          <li><img src="img/check_mark.png" alt="#">Berries</li>
          <li><img src="img/check_mark.png" alt="#">Cream</li>
        </ul>
        <div class="btn"><a href="#">MORE DETAILS</a></div>
      </div>
      <div class="prom_day_iner">
        <h4>Prepare</h4>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
       </p>
      </div>
    </div>
</div>
<div class="promo_day_img">
  <img src="img/dessert-day.png" alt="#">
</div>
  </section>

В коде CSS используется свойство  display: flex для разделения блоков .prom_day_item

.promo_day{
    padding-top: 40px;
    padding-bottom: 60px;
    margin-top: 180px;
    background: #A7D3D6;
    position: relative;
}

.promo_day h3{
    padding-top: 40px;
    font-size: 40px;
    font-weight: 900;
    font-family: var(--ff-text);
}
.prom_day_item{
    display: flex;
    margin-top: 15px;
   
}
.prom_day_iner h4{
    font-size: 24px;
    font-weight: 700;
}
.prom_list{
    margin-top: 24px;
    margin-bottom: 60px;
}
.prom_list li{
    display: flex;
    font-size: 24px;
    padding-bottom: 10px;
}
.prom_day_iner{
    width: 400px;
}
.prom_day_iner p{
    margin-top: 24px;
    font-size: 18px;
}
.promo_day_img{
    position: absolute;
    top: 0;
    left: 65%;
}

Результат верстке блока