Skip to main content

Посадочные

Опубликовано: Konkin 26.05.2019 - 11:48
GruzService вёрстка посадочной страницы
LESS/CSS
~1ч
~500р

Страницы услуг

Такой вот, вариант предложила дизайнер, но как его сверстать?

Посадочная страница

Сложность элемента, заключается в линиях, вокруг изображения. Сначала пришла мысль сделать картинкой. Нарисовать круги вокруг основного изображения и подставить в качестве фона. От этой мысли сразу же отказался. У контент-менеджера должна быть возможность подгружать любую картинку, предвпрительно, не обрабатывая ее в Фотошопе.

ЗАДАЧА: Загружать любое фото к странице без предварительной подготовки в Фотошоп.

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

Для отрисовки линий, будем использовать псевдо-элеменды (before и after), так же, спозиционировав их относительно родительского блока.

В результате, любое изображение, загруженное контент-менеджером, будет иметь вид, как на макете.

Продолжение: Мобильное меню