Это продолжение нашей верстки:
[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
|
1 2 3 4 5 6 7 8 9 10 |
<strong> .text-otzivi</strong> <strong>&</strong>::before content: '' position: absolute border-top: 30px solid <strong>$btn</strong> border-bottom: 30px solid <strong>$blue</strong> border-left: 30px solid <strong>$red</strong> border-right: 30px solid <strong>$accent</strong> left: 185px top: 260px |
Уголочек встал хорошо))
Далее сделаем линеечку желтую:
Но у нас нет закругления - поэтому сделаем через 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
Кнопочка есть - но пока не работает!
СДЕЛАЕМ ЕЕ РАБОТОСПОСОБНОЙ!
И еще добавим КОНТРОЛЬ СРАБАТЫВАНИЯ появления кнопки "НА ВЕРХ"
код:
|
1 2 3 4 5 6 7 8 |
/* ----- ПОКАЗЫВАЕМ и ПРЯЧЕМ кнопку < На верх! > УЖЕ С ДИАПАЗОНОМ ----- */ $(window).scroll(function() { if($(this).scrollTop() < 10000 && $(this).scrollTop() > 200) { $(".top").addClass("active"); } else {$(".top").removeClass("active");} }); /* ----- ПОКАЗЫВАЕМ и ПРЯЧЕМ кнопку < На верх! > УЖЕ С ДИАПАЗОНОМ ----- */ |
РАБОТАЕТ!
Отлично! Весь сайт сверстан Полностью!
