.main-timeline {
  position: relative
}

.main-timeline:before {
  content: "";
  width: 5px;
  height: 100%;
  border-radius: 20px;
  margin: 0 auto;
  background: #777;
  position: absolute;
  top: 0;
  left: 0;
  right: 0
}

.main-timeline .timeline {
  display: inline-block;
  margin-bottom: 50px;
  position: relative
}

.main-timeline .timeline:before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #FDAC1D;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%,-50%)
}

.main-timeline .timeline-icon {
  display: inline-block;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 3px solid #FDAC1D;
  padding: 13px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translateY(-50%)
}

.main-timeline .timeline-icon i {
  display: block;
  border-radius: 50%;
  background: #FDAC1D;
  font-size: 64px;
  color: #fff;
  line-height: 100px;
  z-index: 1;
  position: relative
}

.main-timeline .timeline-icon:after,.main-timeline .timeline-icon:before {
  content: "";
  width: 100px;
  height: 4px;
  background: #FDAC1D;
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%)
}

.main-timeline .timeline-icon:after {
  width: 70px;
  height: 50px;
  background: #f7f7f7;
  top: 89px;
  right: -30px
}

.main-timeline .timeline-content {
  width: 50%;
  padding: 0 50px;
  margin: 52px 0 0;
  float: right;
  position: relative
}

.main-timeline .timeline-content:before {
  content: "";
  width: 70%;
  height: 100%;
  border: 3px solid #777;
  border-top: none;
  border-right: none;
  position: absolute;
  bottom: -13px;
  left: 35px
}

.main-timeline .timeline-content:after {
  content: "";
  width: 37px;
  height: 3px;
  background: #777;
  position: absolute;
  top: 13px;
  left: 0
}

.main-timeline .title {
  font-size: 20px;
  font-weight: 600;
  color: #FDAC1D;
  text-transform: uppercase;
  margin: 0 0 5px
}

.main-timeline .description {
  display: inline-block;
  font-size: 16px;
  color: #404040;
  line-height: 20px;
  letter-spacing: 1px;
  margin: 0
}

.main-timeline .timeline:nth-child(even) .timeline-icon {
  left: auto;
  right: 30%
}

.main-timeline .timeline:nth-child(even) .timeline-icon:before {
  right: auto;
  left: -100px
}

.main-timeline .timeline:nth-child(even) .timeline-icon:after {
  right: auto;
  left: -30px
}

.main-timeline .timeline:nth-child(even) .timeline-content {
  float: left
}

.main-timeline .timeline:nth-child(even) .timeline-content:before {
  left: auto;
  right: 35px;
  transform: rotateY(180deg)
}

.main-timeline .timeline:nth-child(even) .timeline-content:after {
  left: auto;
  right: 0
}

<div class="main-timeline">
  <a href="#" class="timeline">
    <div class="timeline-icon"><i class="fa fa-plug"></i></div>
    <div class="timeline-content">
      <h3 class="title">Step 1</h3>
      <p class="description">
        Lorem ipsum dolor sit amet,consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
      </p>
    </div>
  </a>
  <a href="#" class="timeline">
    <div class="timeline-icon"><i class="fa fa-binoculars"></i></div>
    <div class="timeline-content">
      <h3 class="title">Step 2</h3>
      <p class="description">
        Lorem ipsum dolor sit amet,consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
      </p>
    </div>
  </a>
  <a href="#" class="timeline">
    <div class="timeline-icon"><i class="fa fa-link"></i></div>
    <div class="timeline-content">
      <h3 class="title">Step 3</h3>
      <p class="description">
        Lorem ipsum dolor sit amet,consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
      </p>
    </div>
  </a>
  <a href="#" class="timeline">
    <div class="timeline-icon"><i class="fa fa-male"></i></div>
    <div class="timeline-content">
      <h3 class="title">Step 3</h3>
      <p class="description">
        Lorem ipsum dolor sit amet,consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
      </p>
    </div>
  </a>
</div>