Как сверстать такое?
А свой код ГДЕ? 
Какие попытки были?
Какой картинкой спросили - такой картинкой и делайте - аккуратнее просто обрежьте там лишнее и вперёд, выкладываю готовый код!<img src="kortinko.jpg" alt="ya-kortinko" style="width:100%;height:auto">
Если кругляши жестко заданных размеров, то пожалуйста, балуйтесь абсолютом..block {
  width: 400px;
  height: 200px;
  margin-top: 50px;
  margin-left: 100px;
  position: relative;
  border: 1px solid green;
}

.circle, circle2 {
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid red
}

.circle {
  left: -25px;
  top: -47px;
}

.circle2 {
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
}<div class='block'>
  <div class='circle'>
  </div>
  <div class='circle2'>
  </div>
</div>
 обернете еще  это все в блок и
на адаптиве уменьшие круги , да зададите паддинги по бокам
полосы делаются идущими друг за другом div, у которых по бокам тоже padding: 0 60px к примеру и пишется определенные border (border-top/border-left и тд) 
текст можно обернуть одной div и родителю у которого заданы border Нужные
написать dislplay: flex; align-items:center ( равнять по вертикали) и justify-content: flex-end к краю правому чтоб