Не сталкивался с таким, нужно сверстать блок?

Question

[Slaxik]

Как по грид сетке это всё сверстать я вижу только вариант фулл абсолютное позиционирование, но считаю не прав

Comments

[Толстый Лорри]

FYI: в Windows есть стандартное приложение "ножницы" (Snipping Tool)

[Hyubert]

Вижу у вас есть макеты и для планшета/мобильного - как оно там должно выглядеть?

[Slaxik]

Hyubert, Планшет должно адаптивно смещаться хотя я думаю врятле такого добьюсь, мобьльное меняется на

[Slaxik]

Толстый Лорри, это вы к чему? картинки то я все достал генерацией на сс

[Толстый Лорри]

Slaxik, порядка 40% площади картиночек с интерфейсом виндов и PS можно было бы отрезать

[Slaxik]

Толстый Лорри, упс, понял(

Answer 1

[alex-1917]

Сделай двумя картинками (или тремя).
Каждая для своего медиа-запроса.
Почему так?
Потому что судя по тематике эскиза, этот сайт проживет полгода максимум, ты его ни в портфолио не добавишь, ни пользы он никакой не принесет никому...

А от svg планшеты пухнут! Это все, что надо знать о svg.

Comments

[Slaxik]

самый простой вариант кстати

[Antonio Solo]

видел волне рабочие сайты именно так и функционирующие.

а на счет портфолио ты не прав - как сделал сайт пили видео с ним. не важно что проект сдохнет - видяха останется.

[alex-1917]

Antonio Solo, хз, я например видосы сразу закрываю...
для портфолио скрин и описалово за глаза

Answer 2

[Александр Таратин]

Перерисовать все в svg включая надписи, ибо нет смысла верстать такую приблуду, когда её можно мышкой накликать.
Вставлять svg на страницу инлайново, а не через img или background. + ширину в 100%.
Будет и адаптивно и шрифты мылиться не должны.

Comments

[Иван]

А если дизайнера не хочет перерисовать?

[Александр Таратин]

Иван, Самому, все равно это быстрее чем ручками стили прописывать.

Answer 3

[Алексей Афанасьев]

Можно сверстать по сетке и отступами подвинуть куда нужно.

Comments

[Slaxik]

и круги по сетке двигать ? мне больше вариант с релатив понравился, могли бы дать решение? не пойму как по сетке

Answer 4

[Denis Melnikov]

Случайно удалил.
на relative

https://codepen.io/just_4_u/pen/PdoVEq

Вот так вышло, не пинайте сильно =) только учусь

Comments

[Slaxik]

спасибо, попробую вашим методом, а пунктир абсолютом потом подравнять верно?