Далее будем верстать: Fotorama - адаптивная галерея изображений

 

Секция:      КОРОЛЕВСКИЙ САЛОН   

 

 

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

 

 

Unimail - Script Настройка

 

 

 

 

 

Затем подключим        fotorama.css   

 

Go в     libs.sass  

 

 

Затем подключим     fotorama.js   

 

 

GO в      gulpfile.js    

 

 

Далее ПЕРЕЗАГРУЗИМ gulp:

 

 

 

Далее GO в     index.html  

 

 

 

Поэтому пропишем фон для секции:

 

 

Далее смотрим на макет СЕКЦИИ ГАЛЕРЕИ - и видим разбивку на колоночки:

 

 

Поэтому погнали:

 

 

 

 

Теперь займемся разметкой    ФОТОГАЛЕРЕИ   

 

 

Можно открыть документацию Fotorama (найти в Google)

что бы понимать, что мы делаем:

 

 

 

И у нас уже появилась Галерея:

 

 

Далее будем задавать параметры через атрибуты (с учетом так сказать посадки на CMS)

 

 

 

 

 

 

 

 

 

Давайте Стилизовать нашу секцию:    КОРОЛЕВСКИЙ САЛОН  

 

GO в     main.sass  

 

 

 

 

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

 

 

 

Проанализировав - опять ВСЕ СЕКЦИИ - ищем элементы - которые повторяются в них, что бы описать их в одном месте:

 

 

В самом низу main.sass - укажем общие параметры для секций:

 

 

Смотрим:

 

 

Создадим переменную цвета для      $overlay   

 

 

 

 

Смотрим на      Overley  

 

 

    Давайте поработаем со всеми заголовками:

 

 

 

Теперь поработаем над 1-м словом в     common.js   

над регулярными выражениями.

 

 

 

 

 

Да и фиг - с ними - СДЕЛАЕМ ЧТО ТО более современное:

 

Откроем СТИЛЬ самой    FOTORAMA:

 

 

 

 

Создается впечатление -     ДЫРКИ   

 

Поэтому лучше подложим какую то заливку:

 

GO в     main.sass   

 

 

Проинспектируем нашу    fotorama  

 

Нас интересует    НАВИГАЦИЯ:   

 

 

 

 

 

 

Теперь давайте   ПОДРОВНЯЕМ THUMBS - ПРЕВЬЮ  

 

GO в     index.html  

 

 

И вроде все устраивает по    ФОТОРАМЕ:  

 

 

Можно - еще ОТКЛЮЧИТЬ СТАРИННЫЕ ТЕНЮШКИ:

 

 

 

 

Попробуем их скрыть:

 

 

   Имеем ФОТОРАМУ - БЕЗ ТЕНЕЙ  

 

 

Однако -   У нас не видно НАВИГАЦИИ -  САМИХ СТРЕЛОК   

 

 

 

 

    ОТЛИЧНО - СТРЕЛКИ НАВИГАЦИИ ВСТАЛИ!  

 

 

 

 

 

ДАЛЕЕ ЗАЙМЕМСЯ МЕДИА-АДАПТАЦИЕЙ:

 

 

 

 

Далее сжимаем :

 

 

 

Исправим - это:

 

 

 

 

Продолжаем:

 

 

    Часть 12 AJAX форма обратной связи и красивый отчёт об отправке  

 

 

GO в     index.html  

 

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

Причем,  фоновое фото  - будем делать как

    фоновая картинка самой секции    - а не через псевдо-элемент

   ::before    -  потому, что если делать через    ::before  

то мы смогли бы управлять этой картинкой - только через    CSS  

поэтому картинку прописываем через атрибут     style  

 

 

 

Зададим  Демо-текст, что бы понимать, что и где:

 

 

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

 

 

 

Блок текста - теперь      встал справа!  

 

 

   Затем - уберем Рыбу - Текста!  

   И начнем верстать Форму обратной связи:  

 

 

 

Далее,

 

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

 

 

Скрипт на GitHub:   https://github.com/agragregra/uniMail

 

Содержимое папки    Script    выглядит так:

 

 

 

Откроем    index.html   в    Sublime 3   и скопируем код формы:

 

 

Но копируем пока только скрытые поля:

 

 

Далее - адаптируем поля - для наших задач:

 

 

Далее, нам нужно   ИНТЕГРИРОВАТЬ UniMail  - в проект:

 

Посмотрим на файлы скрипта UniMail:

 

Обратим внимание - если мы будем сажать нашу верстку на MODX - CMS (а по сути CMF - Content Management Framework - т.е. фреймворк для создания систем управления контентом.)

 

 

То нужно брать:

 

 

И если мы будем использовать    uniMail - для MODX - то:

Не нужно указывать e-mail  Администратора в самой верстке:

 

 

Его ( e-mail  Администратора ) - достаточно взять из Options:

 

 

Или же - использовать стандартный PHP.

 

 

 

 

 

Поэтому давайте    введем новый input :   

 

 

Далее займемся разметкой и оформлением формы:

 

 

Начнем с Логотипа:

 

 

 

Пока визуально у нас так выглядит форма:

 

Скопируем видимые поля:

 

 

 

 

Телефон: оформим аналогично.

 

А вот выпадающий список - оформим с помощью специального плагина (с возможностью его КАСТОМИЗИРОВАТЬ):

 

value - указывать не будем! Поскольку содержимое между тэгами  <option>Текст</option> - как правило и есть value

 

 

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

 

 

   А затем вставим НАШУ СТИЛИЗОВАННУЮ КНОПОЧКУ   

 

 

 

ДАВАЙТЕ    ПОДКЛЮЧИМ ПЛАГИН    для

    Выпадающего списка:  

 

 

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

 

 

GO в        Gulp.js    

 

 

 

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

 

GO в     Libs.sass   

 

 

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

 

GO в      common.js    

 

И сделаем выборку    'select'  

  $    -  значит выборка...

 

Но у нас проблема - в выпадающем списке мигает курсор:

 

 

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

 

Давайте пока СТИЛИЗУЕМ ФОРМУ:

 

GO в      main.sass   

 

 

Имеем результат:

 

 

 

Получим белый фон:

 

 

 

Примерно так и получилось:

 

 

 

   Давайте перейдем в самый низ  

 

и Поработаем над     callback 

 

Это класс самой формы:

 

 

 

Давайте спрячем      success    

Это сообщение которое выводиться после отправки.

Позже вернемся к его оформлению.

 

 

Далее оформим    ЛОГО:   

 

 

ПО ЗАГОЛОВКАМ:

Что бы не писать многие параметры - добавим класс   <h2> 

 

 

 

Теперь давайте сделаем ОТСТУПЫ - но не pading-ами, а колонками Bootstrup:

 

 

 

 

 

Дальше, ОДНИМ МАХОМ ВСЕ СТИЛИЗУЕМ:

 

 

Над     .success     пишем:

 

 

Сейчас пока такой результат (Уже несовпадение):

У меня Белым - Выпадающий список.

у него серым.

 

 

Займемся Плейсхолдерами (Текст который исчезает при начале ввода)

 

 

Сейчас так:

 

 

Поэтому давайте серые Плейсхолдеры (текст в полях ввода - до ввода) - сделаем тоже белым!

Оформим для 4  - х разных браузеров:

 

 

 

 

Теперь вернемся к оформлению    success 

 

 

 

 

 

GO в     main.sass  

 

 

Подставим в index.html

 

 

Видим Блюр:

 

 

 

GO в     common.js   

 

 

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

 

 

Вставим в    common.js   - после закоментированного    select 

 

 

 

 

 

 

 

 

Видим блюр под формой отправки:

 

 

 

  Далее Адаптация!  

 

Займемся медиа-запросами!

 

 

 

 

Единственное подправим отступы:

 

 

Однако у Мадамы - обрезается макушка!

 

Исправим это в размере:

 

 

 

Продолжим стилизовать:

 

GO в    common.js   

 

 

 

У нас уже что то выбрано - но нам нужно что бы высвечивалось:

 

"ВЫБЕРИТЕ УСЛУГУ"

 

GO в    index.html    

 

 

GO в     main.sass  

 

Скопируем классы из инспектора:

 

 

Смысл простой: Мы добавляем классы, которые меняют состояние и переопределяем их.

 

Так можно стилизовать абсолютно любой плагин.

 

 

 

 

Затем опять вернемся к верхней цепочке классов списка-выпадающего:

 

 

 

 

 

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

 

 

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

 

 

    Конец верстки секции

Формы обратной связи!