<section class="statistics">
  <img src="www.rg-developer.ru/misc/bg-statistics.jpg" alt="Background: statistics" class="statistics__background">
  <div class="container statistics__container">
    <div class="statistics-wrapper">
      <div class="statistics__years">
        <span class="statistics__number statistics__number_big">14</span>
      </div>
      <div class="statistics__integrations statistics__item">
        <span class="statistics__number statistics__number_plus">800</span>
      </div>
      <div class="statistics__projects statistics__item">
        <span class="statistics__number statistics__number_plus">500</span>
      </div>
      <div class="statistics__clients statistics__item">
        <span class="statistics__number statistics__number_plus">200</span>
      </div>
    </div>
  </div>
</section>
* {
  box-sizing: border-box;
  outline: none; 
}
.container {
  max-width: 1170px;
  margin: auto;
  position: relative;
  z-index: 100; 
}
img {
  max-width: 100%; 
}
.statistics {
  position: relative;
  height: 900px;
  padding-top: 81px;
  padding-bottom: 124px; 
}
.statistics__container {
  height: 100%; 
}
.statistics-wrapper {
  position: relative;
  height: 100%; 
}
.statistics__background {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  object-fit: cover; 
}
.statistics__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column; 
}
.statistics__number {
  display: block;
  font-weight: bold;
  font-size: 64px;
  line-height: 78px;
  color: #FC1414; }
.statistics__number_big {
  font-size: 144px;
  color: #000000;
  line-height: 130px; 
}
.statistics__years {
  position: absolute;
  top: 39%;
  left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 350px;
  height: 350px;
  overflow: hidden;
  background-color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 15px 15px 6px rgba(0, 0, 0, 0.25); 
}
  .statistics__integrations {
    position: absolute;
    top: 14.3%;
    left: 56.3%; 
}
  .statistics__projects {
    position: absolute;
    top: 41.3%;
    left: 72.2%; 
}
  .statistics__clients {
    position: absolute;
    top: 72.4%;
    left: 49.9%; 
}
@media (max-width: 1200px) {
  .container {
    max-width: 950px;
  }
  .statistics {
    height: 738px;
    padding-top: 66.4px;
    padding-bottom: 101.7px;
  }
  .statistics__years {
    width: 287px;
    height: 287px;
  }
  .statistics__number {
    font-size: 52.5px;
    line-height: 64px;
  }
  .statistics__number_big {
    font-size: 118px;
    line-height: 106.6px;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 750px;
  }
  .statistics {
    height: 576px;
    padding-top: 51.8px;
    padding-bottom: 79.4px;
  }
  .statistics__years {
    width: 224px;
    height: 224px;
  }
  .statistics__number {
    font-size: 41px;
    line-height: 50px;
  }
  .statistics__number_big {
    font-size: 92px;
    line-height: 83px;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 576px;
    width: 92%;
  }
  .statistics {
    height: 441px;
    padding-top: 39.7px;
    padding-bottom: 60.8px;
  }
  .statistics__years {
    width: 171.5px;
    height: 171.5px;
  }
  .statistics__number {
    font-size: 32px;
    line-height: 38px;
  }
  .statistics__number_big {
    font-size: 70.5px;
    line-height: 63.7px;
  }
}

@media (max-width: 642px) {
  .statistics__years {
    left: 9%;
  }
}

@media (max-width: 576px) {
  .statistics__years {
    left: 3%;
  }
  .statistics__integrations,
  .statistics__projects,
  .statistics__clients {
    left: auto;
    right: 2%;
  }
}

@media (max-width: 390px) {
  .statistics__years {
    width: 130px;
    height: 130px;
  }
  .statistics__number {
    font-size: 22.5px;
    line-height: 26.6px;
  }
  .statistics__number_big {
    font-size: 55px;
    line-height: 45px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.