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.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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