верстка элемента css

.slider-index-bg { 
  background-position: right top; 
  background-repeat: no-repeat; 
  -webkit-background-size: contain; 
  background-size: 90%; 
  background-image: url(http://vodprava.com/assets/img/bluebg.png); } 
 
.data-slider .item .inner { 
  position: relative; 
  height: 100%; 
  overflow: hidden; } 
 
.data-slider .item .data-slide { 
  width: 100%; 
  height: 100%; 
  -webkit-background-size: auto auto; 
          background-size: auto; 
  background-position: right bottom; 
  background-repeat: no-repeat; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-flex-wrap: wrap; 
      -ms-flex-wrap: wrap; 
          flex-wrap: wrap; 
  -webkit-align-content: space-between; 
      -ms-flex-line-pack: justify; 
          align-content: space-between; 
  background-image: url(http://vodprava.com/assets/img/car.png); } 
  .data-slider .item .data-slide .container .box-inner { 
    padding: 5% 0 25%; 
    height: 100%; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
        -ms-flex-align: center; 
            align-items: center; 
    -webkit-align-content: center; 
        -ms-flex-line-pack: center; 
            align-content: center; 
    -webkit-box-pack: start; 
    -webkit-justify-content: flex-start; 
        -ms-flex-pack: start; 
            justify-content: flex-start; } 
  .data-slider .item .data-slide .data-info { 
    max-width: 540px; } 
    .data-slider .item .data-slide .data-info h1 { 
      color: #6f6f6f; 
      font-size: 36px; 
      font-weight: 400; 
      text-transform: uppercase; } 
      .data-slider .item .data-slide .data-info h1 span { 
        display: block; 
        margin: 60px 0; 
        font-size: 60px; 
        font-weight: 800; 
        line-height: 60px; } 
    .data-slider .item .data-slide .data-info .btn-down { 
      display: -webkit-box; 
      display: -webkit-flex; 
      display: -ms-flexbox; 
      display: flex; } 
 
.step { 
  padding: 0 0 70px; } 
  .step .title { 
    color: #6f6f6f; 
    font-size: 36px; 
    font-weight: 400; 
    text-transform: uppercase; } 
  .step .step-box { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-flex: 0; 
    -webkit-flex: 0 1 100%; 
        -ms-flex: 0 1 100%; 
            flex: 0 1 100%; 
    -webkit-box-pack: justify; 
    -webkit-justify-content: space-between; 
        -ms-flex-pack: justify; 
            justify-content: space-between; 
    -webkit-align-content: flex-start; 
        -ms-flex-line-pack: start; 
            align-content: flex-start; 
    -webkit-box-align: start; 
    -webkit-align-items: flex-start; 
        -ms-flex-align: start; 
            align-items: flex-start; } 
    .step .step-box .item { 
      display: -webkit-box; 
      display: -webkit-flex; 
      display: -ms-flexbox; 
      display: flex; 
      -webkit-flex-wrap: wrap; 
          -ms-flex-wrap: wrap; 
              flex-wrap: wrap; 
      -webkit-align-content: flex-start; 
          -ms-flex-line-pack: start; 
              align-content: flex-start; 
      -webkit-box-pack: center; 
      -webkit-justify-content: center; 
          -ms-flex-pack: center; 
              justify-content: center; 
      justify-items: center; 
      text-align: center; 
      padding: 0 15px; } 
      .step .step-box .item .icon { 
        position: relative; 
        display: -webkit-box; 
        display: -webkit-flex; 
        display: -ms-flexbox; 
        display: flex; 
        width: 135px; 
        height: 135px; 
        -webkit-border-radius: 50%; 
                border-radius: 50%; 
        -webkit-align-content: center; 
            -ms-flex-line-pack: center; 
                align-content: center; 
        -webkit-box-align: center; 
        -webkit-align-items: center; 
            -ms-flex-align: center; 
                align-items: center; 
        -webkit-box-pack: center; 
        -webkit-justify-content: center; 
            -ms-flex-pack: center; 
                justify-content: center; 
        background: -webkit-linear-gradient(45deg, #058afe, #5cd8ef); 
        background: -o-linear-gradient(45deg, #058afe, #5cd8ef); 
        background: linear-gradient(45deg, #058afe, #5cd8ef); } 
        .step .step-box .item .icon:after { 
          content: ''; 
          position: absolute; 
          -webkit-border-radius: 50%; 
                  border-radius: 50%; 
          top: 10px; 
          left: -10px; 
          right: 10px; 
          bottom: -10px; 
          background: -webkit-linear-gradient(45deg, #058afe, #5cd8ef); 
          background: -o-linear-gradient(45deg, #058afe, #5cd8ef); 
          background: linear-gradient(45deg, #058afe, #5cd8ef); 
          opacity: 0.2; } 
      .step .step-box .item h4 { 
        max-width: 100%; 
        -webkit-flex-basis: 100%; 
            -ms-flex-preferred-size: 100%; 
                flex-basis: 100%; 
        color: #6f6f6f; 
        font-weight: 800; 
        text-transform: uppercase; 
        font-size: 20px; } 
      .step .step-box .item p { 
        line-height: 20px; 
        font-weight: 400; 
        color: #6f6f6f; }

<div class="content"> 
		<div class="data-slider slider-index-bg"> 
			<div class="item"> 
				<div class="inner"> 
					<div class="data-slide"> 
						<div class="container"> 
							<div class="box-inner"> 
								<div class="data-info"> 
									<h1>Помощь в получении 
										<span> 
											водительского 
											удостоверения 
										</span> 
									</h1> 
									<a href="" class="btn-blue">Ознакомиться</a> 
									<span class="btn-down">12</span> 
								</div> 
							</div> 
						</div> 
					</div> 
				</div> 
			</div> 
		</div> 
		<div class="step-p"> 
					<div class="container"> 
			<div class="step"> 
				<p class="title">поступательные действия</p> 
				<div class="row"> 
					<div class="step-box"> 
						<div class="item"> 
							<div class="icon"> 
								<img src="img/step1.png" alt=""> 
							</div> 
							<h4>заполнение анкеты</h4> 
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p> 
						</div> 
						<div class="item"> 
							<div class="icon"> 
								<img src="img/step1.png" alt=""> 
							</div> 
							<h4>название этапа №2</h4> 
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p> 
						</div> 
						<div class="item"> 
							<div class="icon"> 
								<img src="img/step3.png" alt=""> 
							</div> 
							<h4>получение водительского удостоверения</h4> 
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p> 
						</div> 
					</div> 
				</div> 
			</div> 
		</div> 
	</div> 
</div>