Это продолжение нашей верстки:

 

 

 

 

[maxbutton id="12" url="#urok-23-item-otzivi" text="Урок 23 Верстка <Отзывы>" ]

 

[maxbutton id="13" url="#triangle_color" text="Треугольники цветные" ]

 

[maxbutton id="12" url="#verstka-kontakti" text="Урок 24 Верстка <Контакты>" ]

 

[maxbutton id="12" url="#gulp-update" text="Урок 24 Обновление Front-End окружения Gulp" ]

 

[maxbutton id="12" url="#footer" text="Урок 26 Верстка Футер <Footer>" ]

 

[maxbutton id="12" url="#adapt-toggle-menu" text="Урок 26 Адаптивим меню Toggle-Menu" ]

 

[maxbutton id="12" url="#pop-up-window" text="Урок 26 Всплывающее POP-UP окно Обратный звонок" ]

 

[maxbutton id="12" url="#up_button" text="Урок 26 Кнопка На верх!" ]

 

 

 

 

 

 

 

Плагин Owl Carousel 2 + Документация:

 

 

 

 

Видим она появилась:

 

 

 

 

  <  

 

 

  >  

 

 

 

 

Смотрим:

 

 

 

Надо подровнять их:

 

 

Смотрим что получилось:

 

 

В принципе каруселька уже адаптивно - только слегка поправим кое-что:

 

 

 

   ГОТОВО!  

 

 

 

Далее

 

[maxbutton id="5" text="Урок #23: Верстка. Отзывы" ]

 

Анализируем секцию:

 

 

 

Создадим новую секцию:

 

 

 

 

Далее создадим наши Item-мы

 

 

 

Видим результат:

 

 

 

   Создадим контейнер для выравнивания Item-a:  

 

 

 

Поэтому сразу стилизуем:

 

 

 

 

 

И можно прям копировать фрагмент кода:

 

 

 

Смотрим результат:

 

 

Сделаем тень:

 

 

 

Далее оформим заголовок, и будет он:

 

<h4> Заголовок </h4>

 

 

 

Смотрим, что получается:

 

 

добавим также текст для Item-ма:

 

 

 

Оформляем:

 

 

 

Смотрим:

 

 

 

 

Далее:

 

 

[maxbutton id="13" url="#triangle_color" text="Треугольники цветные" ]   

 

 

   SASS  

 

 

 

 

 

Уголочек встал хорошо))

 

 

Далее сделаем линеечку желтую:

 

 

 

 

Но у нас нет закругления - поэтому сделаем через Border:

 

 

Обернем во враппер заголовок Item-a:

 

 

 

 

И у нас восстановиться форматирование (Оформление заголовков)

 

 

Далее работаем над hover:

 

 

Вот так подсвечиваем при наведении:

 

 

Заполнили - прокопировали Iem-мы

 

И при разном содержимом - блоки пляшут:

 

 

Подровняем все) Благо мы поместили и заголовки и блоки с текстом - в независимые врапперы.

 

 

Теперь все отлично!

 

 

 

И нам не нравятся очень узкие колонки - давайте уменьшим паддинги на соответствующем разрешении:

 

 

 

И получилось отлично!

 

 

И еще раздвинем между собой Item-мы идущие друг-под другом: Что бы было понятней что к чему относится:

 

 

Отлично!

 

 

 

Далее:

 

 

[maxbutton id="12" text="Урок #24: Верстка. Контакты" ]

Смотрим дизайн следующей секции:

 

 

 

Характерно что ФУТЕР у нас полностью повторяет МЕНЮ:

 

 

 

Установка:

 

 

 

Поэтому делаем также:

 

 

    Поэтому начинаем установку "Selectize"   

 

 

Появилась папочка:

 

 

     Тут не много общей информации:  

 

Это нам понадобиться при кастомизации:

 

 

 

 


В прошлый раз подключали плагин без скачивания через Bower: (на всякий случай дублируем мануал):

 

 

 

Затем подключим его:

 

 

GO в        Gulp.js

 

 

 

Далее подключаем     Sectize.CSS

 

GO в     Libs.sass

 

 

ПОКА ПРОПУСТИМ - и ТАК РАБОТАЕТ Selectize

 

      КОНЕЦ ОБЩЕЙ ИНФОРМАЦИИ     

 

    И продолжаем верстать:    

 

Создадим новую секцию:

 

   section.s-wide.s-dark.s-contacts   

 

  .container>.row>.col-sm-12>h2{Контакты}  

 

 

 

Видим что получается:

 

 

Разметка страницы:

 

 

 

Поэтому разбиваем соответственно на колонки:

 

   .col-sm-12>.row>.contacts-wrap>.col-sm-8+.col-sm-4  

 

 

Вот так получается:

 

 

 

Сделаем Адресный блок:

 

 

Оформляем:

 

 

 


 

отлично - продолжаем оформлять:

 

 

Делаем заглушку для MAP - карты

 

 

 

И сразу сделаем КОНТЕЙНЕР для карты - видимым и адаптивным: (Что бы уже не париться при посадке на MODX)

 

 

 

Отлично! Видим оформленный контейнер для MAP (карты)

 

 

 

Теперь оформляем правую часть Адресного блока:

 

 

 

 

 

Но темный фон все же оформим через darken($color)

что бы можно было - быстро менять цветовые гаммы:

 

 

Смотрим что получается:

 

 

 

    Дальше стилизуем ИНПУТЫ:   

 

 

     Групповое оборачивание в <span>    

 

 

Пока видим такую колбасню))

 

 

 

Далее Стилизуем наши    <label>  

 

 

 

Смотрим результат:

 

 

 

 

 

 

Сделаем Обязательные поля:

 

 

 

Теперь давайте подключим плагин:

 

 

 

 

 

У нас уже эта библиотека (selectize.js) - должна быть включена -

а вообще подключать так:

 

Для  этого GO в папку:

 

 

 

И ВСТАВЛЯЕМ ЕГО В     libs.js   

 

     У нас уже вставлен !     

 

 

 

 

Теперь подключаем    selectize    в    common.js  

 

 

 

 

 

 

 

И теперь порядок:

 

 

Однако стиль самого Selectize - как мы видим сейчас отличается - исправим это!

 

 

И уже стилизованный список видим:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    Заканчиваем стилизацию Selectize:   

 

 

 

Видим нашу форму с оформленным Selectize:

 

 

   Далее прикрутим Уголок Fontawesome  

 

 

 

 

 

Отлично - финальная форма без полосочек и проплешен:

 

 

 

Отлично Сверстали!

 

 

 

Далее:

 

 

[maxbutton id="12" text="Урок 25 Обновление Front-End окружения Gulp" ]

 

 

 

А затем еще:

 

 

 

 

 

Пробуем перестроить     gulpfile.js  

 

 

 

Произведем подключение всех плагинов в файле   gulpfile.js  

 

 

 

    Ни черта не получилось! Будем позже разбираться.    

 

 

Далее,

 

 

[maxbutton id="12" text="Урок 26 Верстка Футер Footer" ]

 

 

Копируем только класс:  <div class="menu-line clearfix"> 

 

Далее создадим новую секцию:

 

 

Копируем и вставляем - только это:

 

 

Видим появилось наше меню но уже в ФУТЕРЕ:

 

 

 

Слегка поработаем над стилями:

 

 

Видим:

 

 

 

Далее работаем с SVG:

 

 

 

Видим результат:

 

 

 

Разукрасим Активный пункт меню и Наведенный:

 

 

 

 

 

 

    Футер стилизован:  

 

 

 

 

Далее:

 

 

[maxbutton id="12" text="Урок 26 Адаптивим меню Toggle-Menu" ]

 

 

   Далее смотрим АДАПТИВНОСТЬ:   

 

 

 

У меня все работает как надо!

 

Крестики - переключаются РАЗДЕЛЬНО! Все корректно!

 

Однако в уроке продолжают ИСПРАВЛЯТЬ:

 

 

 

 

 

    МЕНЮ АДАПТИРОВАЛИ   

 

 

Далее:

 

[maxbutton id="12" text="Урок 26 Всплывающее POP-UP окно Обратный звонок" ]

 

Будем использовать Magnific POP-UP

 

 

В итоге накидываем:

 

 

 

 

Поэтому идем в    common.js   

 

 

 

И по нажатию на любое упоминание:

 

 

У нас открывается POP-UP оконо:

 

 

 

Кроме того! Идем в    main.sass  

 

 

 

 

 

   Теперь плавно всплывают!  

 

Стилизуем наш POP-UP-чик))

 

 

 

 

 

 

 

ОТЛИЧНО! Наслаждаемся:

 

 

Также необходимо переписать    ИМЕНА ВСЕХ ПОЛЕЙ:  

 

  А у нас и так все в порядке)))  

 

 

Теперь нам необходимо идентифицировать наши POP-UP для каждой ссылки вызова:

 

 

 

И теперь сделаем, что бы у нас менялся заголовок, в зависимости какой у нас    data-form  

 

Начинаем скриптовать))

 

 

И теперь у нас при нажатии на ссылки вызовов POP-UP окон, выводиться в заголовок Соответствующее сообщение:

 

 

 

И еще нужно подкорректировать - то что должно приходить Админу:  т.е. задать скрытые поля:

 

 

 

GO в    common.js  

 

 

 

Т.е. Админ получит на почту - с какой формы точно пришла заявка)

 

   Это значит - что можно передавать и другие какие то атрибуты - через форму, что бы не плодить сами формы.  

 

Скрипт для создания формы обратной связи    "UniMail"   :

 

 

 

 

   И что бы работала ФОРМА ОТПРАВКИ:   

 

GO в     common.js

 

 

Скопируем Ajax - скрипт, который будет отправлять нашу форму:

 

 

   Однако на ЛОКАЛЬНОМ СЕРВЕРЕ - так и не работает!!!! (и в уроке также)   

 

    Но идем дальше))   

 

 

 

GO  in    index.HTML  

 

 

И если проверить - отправку - то увидим наше СООБЩЕНИЕ:

 

 

Давайте стилизуем наше сообщение    SUCCSESS 

 

 

 

 

 

 

Теперь - что бы   СООБЩЕНИЕ SUCCESS   - появлялось

 

Добавим кое-что в сценарии    GO в  common.js  

 

 

ОК-ей а работу самой формы сможет протестировать уже на хостинге.

 

Далее

 

[maxbutton id="12" text="Урок 26  - Кнопка На верх!" ]

 

   GO в  common.js  

 

 

 

 

 

 

Кнопочка есть - но пока не работает!

 

СДЕЛАЕМ ЕЕ РАБОТОСПОСОБНОЙ!

 

 

 

 

 

 

 

 

 

 

И еще добавим КОНТРОЛЬ СРАБАТЫВАНИЯ появления кнопки "НА ВЕРХ"

 

 

код:

 

 

 

   РАБОТАЕТ!  

 

 

   Отлично! Весь сайт сверстан Полностью!