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

Question

[Даниил Емелин]

Добрый день. Подскажите, как можно сверстать данный блок, в теории.

Comments

[twobomb]

Который именно

[Даниил Емелин]

twobomb, Айфон с круговыми кнопками справа

[Сергей delphinpro]

Берем любой слайдер, включаем режим навигации с точками. Обертку для точек делаем круглой, точки размещаем на ободке. Через nth-child стилизуем каждую кнопку.
Сидим, радуемся.

Answer 1

[Антон]

Ну, сходу, я вижу 3 блока.
Блок с телефоном, блок с иконками, блок с текстом

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

К иконкам через дата можно добавить data-img и data-text, и по клику на иконку на банальном джиквери вставлять ее в свои контейнеры, т.е. заменять картинку дисплея и текст

Answer 2

[Ivan Bogachev]

Хммм... где-то я уже такое видел....

P.S.: Чисто из профессионального интереса - это тестовое задание или просто макет из какой-то рассылки?

Comments

[Даниил Емелин]

Макет из рассылки академии :)

Answer 3

[Salim_Gareev]

Телефон я бы оставил картинкой под него можно подложить круглый блок с иконками.
Дальше подключаем js.
И с помощью transform: rotate вращаем блок например при событии скрол колесиком мыши. Только надо учитывать что блок повернется и в итоге иконки перестанут быть перпендикулярны экрану. Их тоже нужно вращать.

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

Answer 4

[twobomb]

Можно вот так