Продолжаем)
Верстаем кнопки соц-сетей:
Назовем этот блок: .header-social
Продолжим html
Так как это у нас социальные сети - то сделаем их навигацией!
Т.е. тэг nav
Смотрим - появились иконки, но они не стилизованы:
Поэтому GO в sass:
Причем нужно сделать так, что бы наши соц-иконки - не зависели бы от родителя header-social
Поскольку в низу страницы - у нас будут еще соц-иконки
и уже будет другой родительский класс: header-бла-бла
Снимаем показания для кнопок:
Смотрим что получилось:
И еще сделаем - что бы при наведении на соц-кнопки у нас была бы анимация:
Центрировать по ВЕРТИКАЛИ Соц-Иконки будем
во FLAX
Смотрим - кнопки выровнялись:
Далее, сделаем отступы: padding
Причем:
Город, Время работы - стоят по сетке
а, Телефон - центрирован по горизонтали.
Поэтому применим Bootstrup-сетку
Сначала сделаем разметку в html:
и начинаем прописывать Bootstrup - сеточку.
3 колонки - по 4 колонки каждая.
Имеем:
Продолжаем стилизовать - пока есть косяки:
Стилизуем иконки:
Далее - Для оформления телефона - сделаем дочерний класс:
Go в sass - стилизовать:
Go в media.sass
Эти медиа-запросы - соответствуют Bootstrup сетке
Исправим это:
И переопределим его в media.sass
и прописываем в media.sass:
Сначала скорректируем КОЛОНКИ в index.html
и
Далее
Теперь исправляем огромный ЗАГОЛОВОК H1
Сожмем до 480px и смотрим:
Смотрим на результат адаптации, но это еще не все:
Теперь поработаем с телефоном (УБЕРЕМ ЕГО)
Чуть УМЕНЬШИМ КНОПКУ
Опять - сжимаем до 320 px
Сначала поправим МАЛЫЙ ЗАГОЛОВОК:
--ДОБРО ПОЖАЛОВАТЬ В ПРОФЕССИОНАЛЬНЫЙ --
А потом подправим лого (по высоте)
Настроим Browsersync на iPhone:
Все, шапку адаптировали подо все экраны устройств!
Верстаем СЛОЖНУЮ КАРУСЕЛЬ.
Нам понадобиться плагин карусели:
Карусель состоит из ИНФО-БЛОК + ФОТО.
Причем фото идут в шахматном порядке.
Как это сделать?
Это можно реализовать - разной версткой каждого item.
А затем при посадке на Фреймворк, какую то CMS - мы просто напросто - делаем счетчик - ЧЕТНЫХ-НЕЧЕТНЫХ и выводим разную верстку в Item.
Но мы будем делать это при помощи Flex
Все item - у нас будум одинаковыми, и они просто будут меняться местами: ИНФО-БЛОК / ФОТО.
Или можно установить свежую версию owl.carousel с помощью
Но новая версия - может работать ИНАЧЕ!!!
Поэтому работаем с нашим плагином owl.carousel
из файлов урока.
Go в gulp.js
для включения в ТАСК 'js'
Go в index.html
Откроем инспектор в браузере:
Что бы было удобно верстать и все что бы было видно:
Весь наш дизайн будет побит на СЕКЦИИ:
Поэтому добавим СЕКЦИЮ для КАРУСЕЛИ:
Это мы сделали только обертку для КАРУСЕЛИ:
И нам нужен еще : item
Пока - ни каких перемен на странице нет!
Сейчас КАРУСЕЛЬ в КОНЦЕ как бы РЕЗИНОВАЯ и заканчивается.
Поэтому давайте КАРУСЕЛЬ сделаем ЗАЦИКЛЕННОЙ.
Далее, включим скорость Карусели:
Поэтому включим навигацию:
Далее, регулируем скорость Карусели:
Далее, изменим внешний вид Навигации:
Далее, стилизуем немножко КАРУСЕЛЬ:
Массив кодом:
$colors: $accent_birusa, $accent_red, $accent_orange
@for $i from 1 through length($colors)
.carousel-services .owl-item:nth-child(#{length($colors)}n+#{$i})
background-color: nth($colors, $i)
Получили зацикленную карусель с цветными backgrounds:
Добавим параметр Адаптивности: Go в common.js
Сморим АДАПТИВНЫЙ RESPONSIVE:
На примере первого Item - начнем:
Для фото - тэг - <img> нам не подходит , поскольку наше фото в item - должно меняться как по ширине таки по высоте. (Адаптивное)
Далее сделаем список услуг: Списком <ul>
Используем сниппеты:
Далее добавим кнопку:
И давайте добавим еще один class для более удобного разделения:
Далее работаем с Блоком-Фото:
Продублируем Items - и изменим названия "УСЛУГ":
1 -> 2 -> 3 -> 1
Go в SASS - Начинаем стилизовать
Смотрим - что получилось - КАРТИНОК ПОКА НЕТ:
Go в common.js
ОДНАКО КАРТИНОК ДО СИХ ПОР НЕТ.
Поэтому Go в main.sass
Теперь, поработаем с nth-child (энсчайлд) - что бы переворачивать блоки в шахматном порядке:
И получили ПЛИТКУ в шахматном порядке:
Однако, при скролле плиток - у нас могут мелькать ОНИ)
Продолжим исправлять:
Начинаем стилизовать ИНФО_БЛОК:
Смотрим на ЛОГО:
Имеем пока такие ПЛИТОЧКИ:
Добавим форматирование:
Отметим - что ЗАГОЛОВОК - будет задаваться из Админки.
Для выделения ПЕРВЫХ СЛОВ в ЗАГОЛОВКАХ - Давайте напишем функцию:
Возьмем Родительский класс: "carousel-services-composition"
Теперь 2- слово ЗАГОЛОВКА у нас
ОБЕРНУТО в тэг <span> </span>
И теперь - Администратору сайта, не нужно беспокоится о таких вещах.
Такие регулярные выражения можно использовать для стилизации верстки - что бы Контент-менеджеру проще было с ним работать - (С контентом).
Т.е. Автоматизируем ОБЕРТКУ для каких то слов.
А теперь - можем стилизовать этот <span>
Go в main.sass
Смотрим на верстку ИНФО-БЛОКА:
Далее стилизуем КНОПКИ:
Едем в ВЕРХ - к стилю кнопки:
Теперь - Давайте доработаем САМИ ПЛИТКИ:
Давайте исправлять Ошибку с вычислением ШАХМАТНЫХ КВАДРАТОВ:
Нам нужно производить вычисление высоты колонок - уже в конце!
Для этого нужно отследить момент -
когда карусель - полностью ИНИЦИАЛИЗИРОВАНА!
Однако - Если мы добавим в List (Список услуг) -
дополнительную услугу - 4-ю, то наши
ровные ПЛИТКИ Разъедутся!
Данную проблему решим с помощью плагина:
И подключим плагин 'equalheights.js'
Затем GO в common.js
После - ОБЯЗАТЕЛЬНО ПЕРЕГРУЗИТЬ gulp:
И наш список услуг подровнялся - до РОВНЫХ ПЛИТОК!
Однако - у нас при ресайзах - ОПЯТЬ НЕ СОСТЫКОВКИ!
Поэтому - нам нужно вызывать Плагин 'equalheights.js' - при каждом ресайзе окна.
Поэтому сделаем такую функцию:
Теперь все ПЛИТКИ РОВНЫЕ даже при ресайзах
Можно еще поработать над Адаптивностью! Медиа-Запросами:
Найдем момент схлопывания с 3-х до 2-х колонок:
Это примерно 1100 px - поэтому самый верхний Media-Запрос:
@media only screen and (max-width : 1200px)
Давайте посмотрим навигацию:
Это что бы снова видеть prev и next
А теперь оформим Навигацию по отдельности:
ГОТОВО! МЫ СВЕРСТАЛИ КАРУСЕЛЬ!
