Mecitan
@Mecitan
Начинающий web-разработчик

Как лучше сверстать данный блок?

Приветствую! Есть такой вот блок:
600984d41d056385096378.png

На данный момент выполнена следующая реализация. Вырезана девушка и рюшечки вокруг неё и вставлены как background. Так же есть два блока, в которых записаны картинки симптомов и которые установлены как:
.symptomps-infographic {
    background: url('/assets/image/girl-symptomps.png') center center / 100% auto no-repeat scroll;
    height: 100vh;
}

.position-infographic {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 120px 239px;
}


Методом подбора пытался выставить через padding нужные отступы между изображениями симптомов. Но не получил искомый результат. В плане того, что есть в макете и то, что есть у меня. Проблема ещё в том, что у левого блока изображения разной ширины.

В идеях ещё есть реализовать через :nth-child() + позиционирование. Но мне кажется, что это будет мегокостыльно и очень проблематично потом в адаптиве с этим возиться. Может подскажите, какие ещё варианты реализации есть?
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
iamd503
@iamd503
Верстальщик
Сохраните этот блок картинкой и всё
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Вся картинка вместе с вывесками экспортируется в SVG, в котором вектор векторами, тексты-текстами, и никакой headache
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы