6

Помогите между блоками ставить линии так чтобы было адаптивно введите сюда описание изображения

Html

*{
  margin: 0px;
  padding: 0px;
}

.culture {
  text-align: center;
  padding: 80px 50px;
  background: #F9F9F9;
}

.culture h1 {
  font-family: "Montesrrat", sans-serif;
  font-size: 40px;
  font-weight: bold;
  color: #222;
  text-transform: uppercase;
}

.culture p {
  font-family: "Roboto Slab", serif;
  font-size: 20px;
  color: #777;
}

.culture .value {
  display: inline-block;
  width: 33%;
  margin-top: 50px;
}

.culture .value .line {
  width: 50%;
  height: 2px;
  background: #787878;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.culture .value .linel {
  left: -100px;
}

.culture .value .liner {
  right: -100px;
}

.culture .value .border {
  border: 3px solid #787878;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 15px;
  vertical-align: middle;
}

.culture .value .border img {
  padding: 12px;
}

.culture .value h1 {
  font-size: 18px;
  font-family: "Montesrrat", sans-serif;
  font-weight: bold;
  color: #222;
}

.culture .value p {
  font-size: 14px;
  color: #777;
  font-weight: "Roboto Slab", serif;
}
<div class="culture">
  <h1>culture and values</h1>
  <p>Proin iaculis purus consequat cure.</p>
  <div class="value">
    <div class="border">
      <img src="images/val1.png" alt="val1">
    </div>
    <h1>work-life balance</h1>
    <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.</p>
  </div>
  <div class="value">
    <span class="linel line"></span>
    <div class="border">
      <img src="images/val2.png" alt="val2">
    </div>
    <span class="liner line"></span>
    <h1>quality over quantity</h1>
    <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.</p>
  </div>
  <div class="value">
    <div class="border">
      <img src="images/val3.png" alt="val3">
    </div>
    <h1>deliver excellence</h1>
    <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.</p>
  </div>
</div>
<!-- culture -->

2 ответа 2

4

holder этих 3 элементов , дать ему background по средине линию , а блокам background , выстроить правильно и отступы margin.

Код по ссылке

.parent {
  width:200px ;
  height: 100px;
  background: linear-gradient(to left,#000,#000) no-repeat;
  background-size:100% 2px;
  background-position: 0 50%;
  overflow: hidden;
}
.item {
  float: left;
  width:30% ;
  height: 100px;
  background: #fff;
  margin-right: 5%;
}
.item:last-of-type {
  margin-right: 0;
}
.item-inner {
  width:50%;
  margin:0 auto;
  height: 100px;
  background: blue;
}
<div class="parent">
      <div class="item">
        <div class="item-inner"></div>
      </div>
      <div class="item">
        <div class="item-inner"></div>
      </div>
      <div class="item">
        <div class="item-inner"></div>
      </div>
</div>

3
  • Простите я не понял 18 мая 2017 в 10:19
  • Изменил , добавил код по ссылке , грубый пример но суть передает , только "item" подобрать цвет фона
    – MoJlo4HuK
    18 мая 2017 в 10:46
  • Спс большое помогли очень 18 мая 2017 в 10:57
4

Вот так:

*{
  margin: 0px;
  padding: 0px;
}

.culture {
  text-align: center;
  padding: 80px 50px;
  background: #F9F9F9;
  min-width: 1000px;
}

.culture h1 {
  font-family: "Montesrrat", sans-serif;
  font-size: 40px;
  font-weight: bold;
  color: #222;
  text-transform: uppercase;
}

.culture p {
  font-family: "Roboto Slab", serif;
  font-size: 20px;
  color: #777;
}

.culture .value {
  display: inline-block;
  width: 33%;
  margin-top: 50px;
  position: relative;
}
.culture .value:after {
  content: '';
  width: 50%;
  height: 2px;
  position: absolute;
  top: 26px;
  left: 75%;
  background: #787878;
}
.culture .value:last-child:after {
  display: none;
}
.culture .value .border {
  border: 3px solid #787878;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 15px;
  vertical-align: middle;
  padding: 12px;
}

.culture .value .border img {
  width: 30px;
  height: 30px;
}

.culture .value h1 {
  font-size: 18px;
  font-family: "Montesrrat", sans-serif;
  font-weight: bold;
  color: #222;
}

.culture .value p {
  font-size: 14px;
  color: #777;
  font-weight: "Roboto Slab", serif;
}
<div class="culture">
  <h1>culture and values</h1>
  <p>Proin iaculis purus consequat cure.</p>
  <div class="value">
    <div class="border">
      <img src="images/val1.png" alt="val1">
    </div>
    <h1>work-life balance</h1>
    <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.</p>
  </div>
  <div class="value">
    <div class="border">
      <img src="images/val2.png" alt="val2">
    </div>
    <h1>quality over quantity</h1>
    <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.</p>
  </div>
  <div class="value">
    <div class="border">
      <img src="images/val3.png" alt="val3">
    </div>
    <h1>deliver excellence</h1>
    <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.</p>
  </div>
</div>
<!-- culture -->

Я еще добавил min-width для .culture, чтобы не распадалось в примере на SO.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.