Есть идеи, как реализовать данный элемент на сайте через HTML и CSS?

Question

[fregire]

Тренируюсь верстать макеты. Тут столкнулся с проблемой верстки данного элемента. Можете показать пример кода

Comments

[monochromer]

Нужно задаться следующими вопросами:
1. Как должны вести себя блоки при добавлении текста в них? В данном случае это примерно известно.
2. Как будет выглядет весь этот виджет при добавлении новых пунктов? И будут ли новые пункты?
3. Как будет вести себя рамочка при добавлении новых рядов, при сжатии-сужении окна браузера и пр.?

[jorshjorsh95]

monochromer, да камон, ему нужны линии между элементами, у кого трудности возникнут с простым выводом и адаптивностью?

[monochromer]

Именно от этого и будут зависеть линии между элементами

[NightBuster]

Смотрите в сторону флекса

[tema_sun]

Вот что бывает, когда дизайнер не имеет представления о верстке. Повбивав би.

[alex-1917]

tema_sun, вот вот, убифбы

Answer 1

[Сергей delphinpro]

Самое сложное было придумать селектор для блока ))
https://codepen.io/delphinpro/pen/xYJxgN?editors=1100

Comments

[kn1ght_t]

заморочился) а я думал, что я заморочился))

[Сергей delphinpro]

автору вопроса похоже это не помогло ))

Answer 2

[Никита Ронзин]

Могу посоветовать использовать в таком случае старый добрый Bootstrap. Там можно использовать container-fluid с бэкграундом такой картинки, и 2 row с колонками. попробуй использовать 24х колончатую версию будет легче позиционировать согласно макету.

Answer 3

[tema_sun]

Задача нифига не тривиальная и с наскока не решилась. В итоге зашел в тупик https://jsfiddle.net/j3znd5hq/ , надо делать заново и по-другому, но это уже лень. По крайней мере посмотрите как не надо делать.

Answer 4

[kn1ght_t]

https://jsfiddle.net/c9hhe9wc/ мб так?

Comments

[tema_sun]

Во, круто!

Answer 5

[makkeymr]

dev-ithard.com там ниже есть похожий блок. Гляньте, возможно вам поможет

Answer 6

[zooks]

Маркированный список ul li и flex.

Answer 7

[Василий Васильев]

Пример на флексбокс и transform: translate
Самое ленивое решение.

Answer 8

[Станислав Ефимов]

Чуть поправил вариант Basil_Dev. Без transform.

Ссылка