Помогите между блоками ставить линии так чтобы было адаптивно
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;
}
culture and values
Proin iaculis purus consequat cure.
work-life balance
Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.
quality over quantity
Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.
deliver excellence
Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.
Ответ
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;
}
Комментариев нет:
Отправить комментарий