Используя flexbox я смогу их так установить, но что делать с линиями?
Или же сделать что-то на подобии адаптивной галереи, а как тогда адаптивить, что с линиями делать?
Как верстать такую секцию? Подскажите. Может быть примеры есть какие.
Ответ
Как вариант
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.b {
max-width: 960px;
margin: 15px auto;
display: flex;
justify-content: space-between;
counter-reset: b-item;
}
.b-item {
max-width: 220px;
margin: 0 auto;
padding: 25px;
position: relative;
text-align: center;
display: flex;
flex-direction: column;
}
.b-item:nth-of-type(even) {
padding-top: 50px;
}
.b-item:nth-of-type(even) p {
order: 1;
}
.b-item:before,
.b-item:after {
border: 1px solid #ccc;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 50%;
display: block;
margin: 10px auto;
position: relative;
z-index: 99;
background: #fff;
}
.b-item:nth-of-type(odd):after,
.b-item:nth-of-type(even):before {
counter-increment: b-item;
content: counter(b-item)" ";
}
.b-item .fa {
font-size: 26px;
color: #c00;
}
.b-item .fa:after {
content: '';
border-bottom: 1px dashed #555;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 0;
}
.b-item .fa:nth-of-type(1):after {
left: 50%;
}
.b-item:nth-of-type(odd) .fa:after {
transform: rotate(-16deg);
}
.b-item:nth-of-type(even) .fa:after {
transform: rotate(16deg);
}
.b-item:last-of-type .fa:after {
border: none;
}
@media screen and (max-width: 767px) {
.b {
flex-wrap: wrap;
}
.b-item:nth-of-type(even) {
padding-top: 25px;
}
.b-item .fa:after {
display: none;
}
.b-item:nth-of-type(odd):after {
display: none;
}
.b-item:before {
counter-increment: b-item;
content: counter(b-item)" ";
}
}
text text text text text text
text text text text text text
text text text text text text
text text text text text text
text text text text text text
text text text text text text
Комментариев нет:
Отправить комментарий