<meta name="viewport" content="width=device-width, initial-scale=1.0">

<svg height="0">
  <g id="arrow">
    <path d="M0,10 60,10" 
          fill="none" 
          stroke-width="1" 
          stroke="red" 
          stroke-dasharray="3 3" />
    <path d="M50,0 60,10 50,20"
          fill="none" 
          stroke-width="1" 
          stroke="red" 
          stroke-dasharray="3 3"/>
  </g>
</svg>

<div class="wrapper">
  <div class="gpl gpl_1">
  <div class="g">
    <div class="icon">1</div>
    <div class="rect">
      <p class="icon">📑</p>
      <p class="head">Ваша заявка</p>
      <p class="app">
        Вы оставляете <a href="#">заявку</a> и наш<br>
        и наш специалист связывается с Вами
      </p>
    </div>
  </div>

    <div class="arrow">
   <svg viewBox="0 0 60 20">
     <use xlink:href="#arrow" x="0" />
   </svg>
  </div>

  <div class="g">
    <div class="icon">2</div>
    <div class="rect">

      <p class="head">Выезд замерщика</p>
      <p class="app">
        Наш специалист приезжает <br>
        к Вам и выполняет замеры
      </p>
      <p class="icon">🚴🏼‍♂️</p>
    </div>
  </div>

  <div class="arrow">
   <svg viewBox="0 0 60 20">
     <use xlink:href="#arrow" x="0" />
   </svg>
  </div>

  <div class="g">
    <div class="icon">3</div>
    <div class="rect">
      <p class="icon">📝</p>
      <p class="head">Заключение договора</p>
      <p class="app">
        После согласования мы заключаем <br>
        договор и наша команда работает <br>
        без предоплаты
      </p>
    </div>
  </div>
  </div><!--gpl_1-->

<div class="pointer">
  <svg viewBox="0 -1 100 25">
    <path d="M90,0 100,0 100,10 2.5,10 2.5,25" 
          fill="none" 
          stroke-width="0.1" 
          stroke="red" 
          stroke-dasharray="0.3  0.3"/>
  </svg>
</div>

  <div class="gpl gpl_2">
  <div class="g">
    <div class="icon">4</div>
    <div class="rect">
      <p class="icon">👨🏽‍💻</p>
      <p class="head">Создание <br>дизайн-проекта</p>
      <p class="app">
        Работник нашей компании<br>
        разработает дизайн-проект<br>
        составит смету,подготовит<br>
        техническую документацию и<br>
        составит план работы
      </p>
    </div>
  </div>

    <div class="arrow">
   <svg viewBox="0 0 60 20">
     <use xlink:href="#arrow" x="0" />
   </svg>
  </div>

  <div class="g">
    <div class="icon">5</div>
    <div class="rect">

      <p class="head">Доставка <br> материалов</p>
      <p class="app">
        Мы осуществляем доставку<br>
        метериалов на объект<br>
        собственным транспортом
      </p>
      <p class="icon">🚛</p>
    </div>
  </div>

  <div class="arrow">
   <svg viewBox="0 0 60 20">
     <use xlink:href="#arrow" x="0" />
   </svg>
  </div>

  <div class="g">
    <div class="icon">6</div>
    <div class="rect">
      <p class="icon">🧗🏾‍♂️</p>
      <p class="head">
        Выполнение <br>
        ремонтных <br>
        работ
      </p>
      <p class="app">
        Команда строителей проводит<br>
        комплексные работы<br>
        вашей квартиры
      </p>
    </div>
  </div>
  </div><!--gpl_2-->
</div>

.gpl{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gpl_1{
  padding-right: 145px;
}

.gpl_2{
  padding-top: 122px;
}

.g{
  display: flex;
  align-items: center;
}

.rect{
  margin-left: 10px;
}

div.icon{
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed tomato;
  border-radius: 50%; 
}

p.icon{
  font-size: 30px;
  margin: 10px 0;
}

p.head{
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  line-height: 20px;
}

p.app{
  margin: 14px 0;
  font-size: 12px;
  line-height: 18px;
}

.arrow{
  width: 40px;
}

.wrapper{
  position: relative;
  width: 1014px;
  margin: auto;
}

.pointer{
  position: absolute;
  top: 215px;
  left: 0;
  margin-top: -132px;
  width: 1014px;
  height: 240px;
}

@media(max-width: 1060px){
  .wrapper{
    transform: scale(0.8);
    margin-left: -100px;
  }
}

@media(max-width: 921px){
  .wrapper{
    transform: scale(0.7);
    margin-left: -140px;
  }
}

@media(max-width: 740px){
  .wrapper{
    transform: scale(0.65);
    margin-left: -160px;
  }
}

@media(max-width: 686px){
  .wrapper{
    transform: scale(0.60);
    margin-left: -185px;
  }
}

@media(max-width: 686px){
  .wrapper{
    transform: scale(0.60);
    margin-left: -208px;
  }
}

@media(max-width: 613px){
  .wrapper{
    transform: scale(0.5);
    margin-left: -208px;
  }
}

@media(max-width: 566px){
  .wrapper{
    transform: scale(0.5);
    margin-left: -258px;
  }
}

@media(max-width: 515px){
  .wrapper{
    p.app{
      font-size: 32px;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.