Как сверстать такой макет карточки товара?

Question

[Kir]

Как сверстать такую карточку, а именно интересует как реализовать верстку картинки со всеми ее плюсиками и текстовой информацией? Лучше сохранить ее как картинку сразу с текстовыми блоками выделенными красным цветом - либо описывать каждый значок плюса на CSS и используя позиционирование собирать объект.

Comments

[Rustam Bainazarov]

Абсолютное позиционирование на относительных единицах, как и обычно.

[Сергей Попов]

Рустам Байназаров, Можно отрицательными марджинами, как вариант) Это более просто адаптируется)

[geektimer]

Позиционирование в любом случае определять придется, поэтому лучше сразу разметить тултипы поверх картинки.

[Rustam Bainazarov]

Сергей Попов, да напротив, отрицательные margin'ы относительно контейнера сделать сложно. А абсолютное позиционирование — вполне.

Можно, как на Tilda ещё, кстати, делать JS-якори, по которым эти блоки с плюсами будут автоматически позиционироваться.

Answer 1

[Максим]

Хм...интересный вопрос
Я бы вырезал эту лампу и выстроил в SVG и так же эти крестики с описанием сделал на SVG а остальное на обычных списках

Вот кстати в ручном режиме сделал : https://codepen.io/topicstarter/pen/rbrpKL

Answer 2

[Юпитер Макс]

где вам только удается брать такие проекты и потом не знать, как их собирать? ))) Конечно, все плюсики и текст позиционируйте с абсолютной позицией и все. Ну вернее одну обертку для плюсика и текста, вот ее и позиционируйте.