Представляю серию скринкастов, в которой демонстрируется рабочий процесс адаптивной верстки 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. Данный материал является демонстрацией рабочего процесса.