Представляю серию скринкастов, в которой демонстрируется рабочий процесс адаптивной верстки Landing Page. В процессе верстки мы будем использовать такие инструменты, как Bootstrap, Waypoints, AnimateCSS, Sass, Magnific-Popup и многие другие. Подробности и необходимые материалы под катом (много видео).

Основные требования к верстке:


  • HTML5 валидность;
  • IE 9+ совместимость;
  • Оптимизация для мобильных устройств;
  • Быстрая загрузка.

Исходник PSD, изображения и прочие необходимые файлы: yadi.sk/d/SQUHpcMkjLh3L
Результат верстки можно посмотреть здесь: armatafg.ru

Что использовали в работе:


  • GULP для препроцессинга SASS, минификации и живого обновления страницы;
  • AnimateCSS + Waypoints — анимация элементов при скролле;
  • Bootstrap — использовали сетку;
  • Magnific-Popup — всплывающие формы;
  • Owl Carousel — каруселька (отзывы).


Итак, поехали.

Часть 1: Подготовка к верстке


Подготовим все необходимое для верстки, ознакомимся с материалами из архива. Также, подключим необходимые шрифты к проекту.





Часть 2: Приступаем к верстке шапки


Приступим к верстке шапки, сверстаем верхнюю линию с логотипом, меню и телефоном, определим ее адаптивность.





Часть 3: Адаптивное меню


Определим адаптивность верхнего меню и оформим его на разных разрешениях экрана.





Часть 4: Заголовок и форма


Закончим с версткой шапки, сверстав заголовок Landing Page и верхнюю форму.





Часть 5: Универсальные блоки секций


Определим внешний вид всех секций Landing Page.





Часть 6: Верстка секции «Оценка»


Сверстаем и стилизуем первую секцию страницы — «Независимая оценка имущества».





Часть 7: Верстка секции «Сделки M&A»


Сверстаем и стилизуем вторую секцию — «Сделки M&A».





Часть 8: Верстка секции «Бухгалтерские услуги»


Верстаем секцию с соответствующим именованием. По аналогии с версткой первой секции.





Часть 9: Верстка секции «Преимущества»


Рассмотрим верстку блоков с 3D-поворотом при прокрутке.





Часть 10: Верстка секции «Как мы работаем»


Верстка анимированной схемы работы с использованием SVG.





Часть 11: Верстка секции «Наша команда»


Верстаем секцию с сотрудниками компании. По аналогии с версткой секции «Преимущества».





Часть 12: Отзывы


Сверстаем отзывы с использованием плагина OWL Carousel.





Часть 13: Секция «Мы — профессионалы»


Сверстаем последнюю секцию Landing Page.





Часть 14: Анимация


Определим анимацию блоков при скролле.





Часть 15: Заключительная


Сверстаем и настроим формы обратной связи — popup-окна.



Спасибо за внимание.

P. S. Данный материал является демонстрацией рабочего процесса.

Комментарии (0)