Далее будем верстать: Fotorama - адаптивная галерея изображений
Секция: КОРОЛЕВСКИЙ САЛОН
Давайте подключим плагин галлереи: Fotorama
[maxbutton id="12" url="#unimail" text="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
Скопируем классы из инспектора:
Смысл простой: Мы добавляем классы, которые меняют состояние и переопределяем их.
Так можно стилизовать абсолютно любой плагин.
Затем опять вернемся к верхней цепочке классов списка-выпадающего:
Смотрим что получилось:
Так работает проверка валидности заполнения формы обратной связи перед отправкой:
Конец верстки секции
Формы обратной связи!
