<div class='row'>
  <div class="line line__horizontal"></div>
  <div class="line line__vertical line__vertical_left"></div>
  <div class="line line__vertical line__vertical_center"></div>
  <div class="line line__vertical line__vertical_right"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

body {
  background: radial-gradient(#22394d 10%,  #202a38);
  height: 100vh;
}

.row {
  display: flex;
  gap: 10px;
  position: relative;
  padding-top: 100px;
}

.line {
  border: solid 1px #304150;
  
  &__horizontal {
    position: absolute;
    top: 10%;
    left: 5%;
    right: 5%;
  }
  
  &__vertical {
    position: absolute;
    top: 10%;
    height: 20px;

    &_left {
      left: 5%;
    }
    &_center{
      top: 5%;
      left: 50%;
      height: 40px;
      transform: translateX(-50%)
    }
    &_right{
      right: 5%;
    }
  }
}

.box {
  display: block;
  width: 100%;
  height: 300px;
  background-color: #7092be;
}

и еще хотел момент один уточнить, не знаю как его оформить в виде полноценного вопроса, поэтому спрошу тут
в дизайне, визуально кажется что оранжевый блок, выходит за пределы синего и попадает на серый, скажите это просто так фон сделан через background: linear-gradient или это что-то другое, таких мест в макете может быть несколько, но при этом фон в макете чередуется в цветах постоянно, условно сначала серый фон, затем синий, потом снова серый и тд