Продолжаем)

 

 

Верстаем кнопки соц-сетей:

 

 

 

Назовем этот блок:     .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   

 

 

 

 

А теперь оформим Навигацию по отдельности:

 

 

   ГОТОВО! МЫ СВЕРСТАЛИ КАРУСЕЛЬ!