2016-05-22 3 views

ответ

0

* { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    background-color: #ddd; 
 
} 
 
.flex-items { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-flow: wrap; 
 
} 
 
.flex-item { 
 
    flex: 1 1 50%; 
 
    border-bottom: 1px #999 solid; 
 
} 
 
.flex-item:nth-child(odd) { 
 
    border-right: 1px #999 solid; 
 
} 
 
.service { 
 
    position: relative; 
 
    padding: 10px 10px 10px 140px; 
 
} 
 
.service__image-wrapper { 
 
    background-color: #0EBEFF; 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 15px; 
 
    height: 100px; 
 
    width: 100px; 
 
    transform: skewx(-10deg); 
 
} 
 
.service__image { 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 35px; 
 
    border: 1px white solid; 
 
    height: 50px; 
 
    width: 30px; 
 
    transform: skewx(10deg); 
 
} 
 
.service__title { 
 
    color: orange; 
 
}
<div class="wrapper"> 
 
    <ul class="flex-items"> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Это просто чтобы дать вам представление о том, как идти об этом ... это даже не близко к идеальному решению. Есть много факторов, которые входят в макеты HTML-шаблонов, и я просто сделал самое быстрое, чтобы получить базовый пример. Надеюсь, это поможет вам.

Смежные вопросы