photo
Андрей Филатов HTML-верстальщик

Верстка сайтов,
интернет-магазинов,
Landing page

под все современные браузеры и мобильные устройства.

Адаптивная верстка главной страницы сайта на примере тестового задания одной из Веб-студий.

Краткое описание задачи.

  • На странице 2 меню: общее по сайту(многоуровневое) и локальное по данному разделу.
  • Выезжающие сверху плашки поиска по сайту и сравнения ценовых пакетов.
  • Всплывающее окно - подробно о ценовом пакете.
  • Анимация при наведении на карточку ценового пакета.
  • Выпадающий список.
  • Добавить интерактивную карту и видео.

Что сделано.

  • Локальное меню по данному разделу.

    img
  • Основное меню по сайту.

    Так-же в меню помещены: поиск по сайту и языковое меню.
    img img img
  • Плашки поиска по сайту и сравнения ценовых пакетов.

    img img
  • Анимация при наведении на карточку ценового пакета.

    img img
  • Всплывающее окно.

    img
  • Выпадающий список.

    img img
  • Интерактивная карта и видео.

    img img
  • Результат

    img

    Технологии: HTML, CSS(SCSS), FLEXBOX, JS, JQUERY, БЭМ, GULP

    Макет: Psd

    Код на GitHub

Мои работы

Верстка одностраничного сайта по производству окон ПВХ

Технологии: HTML, CSS(SCSS), FLEXBOX, SMARTGRID(сетка), JS, JQUERY, GULP

Макет: прототип макета Код на GitHub

Верстка макета главной страницы сайта о курсах для брокеров

Технологии: HTML, CSS(SCSS), FLEXBOX, JS, JQUERY, БЭМ, GULP

Макет: Figma Код на GitHub

Верстка макета Landing Page

Технологии: HTML, CSS(SCSS), FLEXBOX, JS, JQUERY, БЭМ, GULP

Макет: Figma Код на GitHub

Верстка макета сайта

Технологии: HTML, CSS(SCSS), FLEXBOX, SMARTGRID(сетка), JS, JQUERY, БЭМ, GULP

Макет: Figma Код на GitHub