Давайте подготовим окружение для нового проекта:

 

Для начала, скачаем стартовый шаблон:

 

С обновляемого ресурса:

 

 

 

Начальные установки Верстаем: Шапка сайта Верстаем: Меню главное Magnific-Popup подключаем! libs.js - Подключение Библиотеки Blure - Делаем Блюр фона!

 

СТАРТ!

 

Или по постоянным ссылкам:

 

 

 

 

 

 

  Мы выберем   OptimizedHTML_2.0   

 

РАСПАКОВАТЬ В ПАПКУ БУДУЩЕГО САЙТА:

 

 

 

Нужно установить:

 

 

 

У нас уже стоит!

 

Далее, откроем в консоли нашу папку:

 

 

 

 

 

На MAC-ке ТАК:

 

 

 

 

И после 5-6 минутного ожидания, вроде установились ПАКЕТЫ:

 

 

 

 

Иногда просит обновить сам пакет npm:

 

 

 

 

 

Не забываем (Для Ре-Запуска проекта):

 

 

 

 

И тут же запустим      GULP     

 

 

 

 

 

 

  Установили! 

 

 

 

Далее проверим работу Gulp:

 

 

 

 

 

Во общем пока Анимацию - не подключаем!

 

Теоретически в   OptimizedHTML_2.0 - уже встроена возможность CSS - Анимации.

 

Далее

 

 

Для начала подключим необходимые шрифты:

 

Скопируем все шрифты из папки "Lesson OVK" - в соответствующую папку Стартового шаблона OptimizedHTML_2.0

 

 

 

 

Остановим сервер и выполним сборку проекта:

 

 

И проверим подключение наших шрифтов:

 

 

 

 

 

Изменим дефолтный шрифт:

 

 

 

Далее,

 

 

 

 

 

И сразу оформляем стили:

 

 

Появился фон:

 

 

И что бы верхушка фона прилипала к верху и центру:

 

 

 

 

 

 

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

 

 

Теперь нам нужно сделать что бы Группа Телефон - на мобильных устройствах оказывался под логотипом.

А меню уже ниже.

 

https://getbootstrap.com/docs/3.3/css/

 

 

 

И видим в каком порядке происходит вывод:

 

 

Затем переставим местами в html - наши колонки:

 

 

Видим как поменялся порядок вывода колонок:

 

 

 

И они поменялись местами:

 

 

Теперь телефон - на мобильных устройствах будет уезжать под логотип.

 

Далее:

 

Верстаем МЕНЮ главное

 

 

 

 

Пункт меню "Главная" - у на активен - поэтом укажем класс:

 

 

Затем сразу оформим Item - меню:

 

 

Получилось так:

 

 

 

Продолжим работать над МЕНЮ:

 

 

 

 

 

 

Затем добавим цвет на hover - меню:

 

 

 

сделаем плавный переход на hover  (решение 2 - через глобальный класс)

 

и используем класс перехода:

 

 

 

И также подсветим активный пункт МЕНЮ:

 

 

 

Смотрим на меню:

 

 

И теперь подключим  FontsAwesome:

 

 

Подключили и проверим вывод иконки:

 

 

 

 

Смотрим:

 

 

 

И оформим стиль телефона:

 

 

Оформим:  "Заказать обратный звонок"

 

 

и еще упростим наш   transition  

 

 

И вызов соответственно:

 

 

 

   Top-Line - Сверстали! 

 

 

 

Далее верстаем контент-текстовый блок:

с кнопкой, Item - списком и фото оборудования.

 

 

Накидываем 2 div-a по 6 колонок:

 

 

 

И смотрим:

 

 

Далее Item-список:

 

 

 

 

 

 

И видим список встал:

 

 

 

 

 

Далее

 

 

 

 

Далее

 

Берем готовый Gist Button

 

 

И вставляем:

 

 

 

 

Перекрасим их в    ЗЕЛЕНЫЙ  

 

 

 

 

 

И вуаля)

 

 

 

 

 

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

 

Поэтому добавим класс:

 

 

 

 

 

 

 

И финальный результат верстки header (пока без адапации)

 

 

Теперь добавим анимированную icon мышку:

 

Возьмем Gist   mousewheel-icon  

 

 

 

 

 

   GO в конвертер  

 

 

 

 

Полученный SASS-код вставляем в main.sass

 

и преобразуем пробелы в табы:

 

 

 

И оформим сам класс:

 

 

 

Смотрим на мышку-иконку:

 

 

 

Можно немножко кастомизировать наш "mouse-whell"

 

Перекрасим ее в наш $blue_gray

 

 

 

Далее сделаем Меню Гамбургер для мобильных устройств.

 

 

 

 

 

 

 

 

Далее - при сжимании страницы у нас меню перескакивает на следующую строчку:

 

 

Поэтому исправим:

 

 

 

 

Копируем html-гамбургер меню и вставляем:

 

 

Далее вставляем CSS и конвертируемым пробелы в TAB-ы

 

 

 

 

Далее в common.js

 

 

==================================================

 

Этот момент нам бы изучить!!!

Что за цели Яндекс???

 

 

==================================================

 

 

 

 

Кроме того - Наше меню не на месте - поэтому исправим:

 

 

и идем в    media.sass   

 

 

А тут перенесем:

 

 

И еще чутка стилизуем меню:

>

 

 

На малых экранах - пока так:

 

 

 

Симпатично и по центру)

 

 

Но наше Меню-Гамбургер все же болтается в стороне.

 

 

 

 

 

Адаптивим средину-контент Хэдера

 

 

Исправляем:

 

 

А картинку оборудования - будем скрывать на малых разрешениях.

 

 

 

 

И не плохо получилось:

 

Заголовок отцентрировал + Items по центру с выключкой по левому краю.

 

И еще поставим кнопку по середине на малых экранах -

для этого обернем в html- ее и напишем медиа-запрос:

 

 

Все ровно - по центру:

 

 

 

Доделываем Меню

 

 

GO в html:

 

 

 

 

Смотрим на меню на СРЕДНИХ МОНИТОРАХ:

 

 

 

И так ее переопределяем:

 

 

Перекрасили в белые пункты:

 

 

 

 

 

И опустим чуть ниже наше Toggle-Menu, что бы оно не прилипало к телефону:

 

 

Финальный вид Toggle-Menu:

 

 

   Адаптивить Header - Закончили!  

 

 

 

Урок-15 Верстка. Dark Line Digital преимущества

 

 

 

 

 

Накидаем сразу полосу:

 

 

 

Видим ее)

 

 

 

 

Далее смотрим на нашу полосу и анализируем:

 

Что же мы видим?

 

4 блока по 3 колонки:   по 3 колонки на  Item

 

 

 

 

 

 

Смотрим:

 

 

И поскольку мы не будем стилизовать сетку - т.е. не будем добавлять классы сюда >

 

 

 

 

Теперь стилизуем:

 

 

Вообще))

 

 

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

 

 

 

Адаптивим Dark Line Digital преимущества

 

 

 

И получилось норм:

 

 

 

 

 

 

Верстка. Секция <Наш профиль>

 

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

 

"Галлерея" - Наш профиль!

 

 

 

 

Смотрим:

 

 

 

 

Разметка HTML

 

 

Оформление SASS:

 

 

Смотрим:

 

 

Однако - при уменьшении экрана - фото все же репитится !

 

 

Что бы этого не было:

 

 

 

 

 

   Создадим класс "Table"  

 

 

 

 

 

Далее создадим разметку для "Треугольника" под иконку

 

 

И оформим:

 

 

Тут подробно:

Верстка html, css, sass - конкретные вещи

 

Превратим наш "gallary-wrap" в ссылку:

 

 

 

Появляется курсор на фото

 

 

Вставляем иконку "Play"

 

 

Далее поработаем над  "Overlay"

 

 

  Однако!    Наш оверлей - перекрыл иконку "Play"

 

Поэтому:

 

 

И выроним по центру по вертикали иконку "Play"

 

 

 

 

 

Смотрим:

 

 

Добавим плавное затемнение Overlay

 

 

 

Работаем теперь над Правой Контентной частью:

 

 

И уже видим результат:

 

 

Далее мы сделаем более универсальным класс list-список   что бы можно было независимо его использовать в различных секциях и даже проектах:

 

 

 

Копируем список от сюда:

 

 

Вставляем список - Сюда:

 

 

 

 

 

Исправляем:

 

 

Исправим ошибу исчезновения <Главного меню>

 

 

 

 

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

 

 

Заменим в list-списке галочки на плюсики:

 

 

Перекрасим Плюсики:

 

 

Далее КНОПОКИ:

 

 

 

Разметку кнопки просто скопируем из прошлой секции:

 

 

 

 

Смотрим:

 

 

Теперь кастомизируем ВСЕ ТАКИ наши кнопки для нашей конкретной секции:

 

 

Смотрим:

 

 

Теперь сделаем   ЖЕЛТУЮ   кастомную кнопку:

 

Прям после основного стиля   "button"

 

 

Смотрим:

 

 

Теперь поработаем над Заголовком и отступами всех элементов:

 

 

 

 

Смотрим готовую верстку:

 

 

Адаптивим Секцию Галерея <Наш профиль>

 

 

 

Go в media.sass

 

 

Смотрим:

 

 

 

Далее уменьшаем экран:

 

 

 

Получилось!

 

 

 

 

Плавный скролл по клику

 

 

 

GO в common.js

 

 

 

   Готово!  Сверстали секцию!  

 

 

Урок-17 Верстка Плавная галерея Magnific-Popup подключаем!

 

 

Далее,

 

 

Для этого нам понадобиться плагин - который называется  "Magnific-Popup"

 

 

 

 

 

 

Нихуя - не работает!

 

ПОэтому!

 

 

 

Видим папку, а в ней до хуя файлов:

 

 

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

 

 

Проверим - подключился ли у нас плагин   Magnific-Popup 

 

 

 

 

Далее, GO в    index.html 

 

Как подключать   Magnific-Popup 

 

для этого откроем документацию:

 

 

 

А лучше сюда)))

 

 

 

 

 

 

Затем

 

 

Затем GJ в    common.js  

 

 

 

Далее,

 

 

libs.js - Подключение Библиотеки

 

 

И, последний штрих, - что бы это ВСЕ вообще работало:

 

 

И, совсем финальный штрих - что бы работала галерея:

 

 

И УРА!!! РАБОТАЕТ!!!

 

 

Что бы новая библиотека была включена в сборку:

 

 

Работает!

 

НО не хватает плавности в ЛИСТАНИИ))

 

 

Возьмем SASS код для прелодера:

 

 

Можно сходить на codepen.io

 

 

 

Тут еще про SASS

 

 

Скопируем там же: и вставим:

 

 

Работает наш прелодер!

 

Его можно увидеть:

 

 

 

 

 

Давайте сделаем теперь  POP-UP для   "СЕРТИФИКАТОВ" 

 

 

 

 

Далее - что бы выводить в POP-UP несколько сертификатов, добавим wrapper:

 

 

 

И еще давайте исправим ДВУХ-КРАТНОЕ использование одной и той же функции:

 

 

Далее  в   index.html  заменим все

 

".mfp-certificate"  на  ".mfp-gallery" 

 

 

Дальше вычищаем старые классы и для ФОТО-ГАЛЕРЕИИ (Не только ДЛЯ СЕРТИФИКАТОВ)

 

 

И доработаем универсальную функцию и для "Серитификатов" тоже:

 

 

ГОТОВО! РАБОТАЕТ!

 

МОЖНО теперь легко повесить Вызов галереи на любую кнопку:

 

 

Вот, быстренько повесили на кнопку:

 

 

 

Далее

 

 

Делаем БЛЮР-фона под нашей Галереей

 

 

   Готово! Работает!   

 

Причем сразу для всех Галлерий и POP-UP сайта.

 

 

 

Урок 18 Анимируем цифры и секция Направления услуг

 

    Анимируем цифры  

 

 

10 Плагинов анимации цифр тут:

 

 

Тут доработанный плагин с БЛЮРОМ:

 

 

Кроме того, нам понадобиться js-script:

 

Waypoints - 4.0.0  - вроде он уже у нас есть в библиотеке.

 

 

 

Проверяем срабатывание:

 

 

 МЫ ПРОСТО УПОМЯНУЛИ КЛАСС СЕКЦИИ - ДО КОТОРОЙ СКРОЛЛИМ - И СЦЕНАРИЙ СРАБАТЫВАЕТ!

 

 

 

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

от сюда:

 

 

 

Вставляем в наш common.js

 

 

 

У нас уже работает  БЛЮР  и  Увеличение шрифта ЦИФР 

 

Далее, нам нужно собственно - подключить Waypoint

(мы то скопировали себе уже готовый "js/libs.js" )

однако - сделаем все по порядку.

 

Идем в наши папки проекта и создадим папку:

 

 

Идем сюда:

 

http://aishek.github.io/jquery-animateNumber/

 

 

 

 

 

 

Это "animateNumber"

 

 

Это "Waypoint"  (используем скрин потом)

 

Далее двигаемся:

 

GO  в html

 

 

Отлично! Пробел будет поставлен - АВТОМАТИЧЕСКИ уже готовой функцией  "comma_separator_number_step"

 

 

 

 

И еще нужно сделать - что бы не было повторного срабатывания:

 

Идем в   common.js  

 

 

ГОТОВО! ПОСЛЕ 1-го СРАБАТЫВАЯ - ИМЕЕМ СТАТИЧНУЮ ПОЛОСУ С ЦИФРАМИ:

 

 

 

Верстаем секцию <Основные направления услуг>

 

 

И поправим стиль  <h2>  для общего класса   s-wide  

 

 

А для исключительных случаев - будет делать выравнивание по ЛЕВОМУ краю:

 

 

 

 

Этот:

 

 

НО ВОЗМОЖНО МЫ ЕЩЕ ПОИГРАЕМСЯ ОТСТУПАМИ,

поэтому идем дальше:

 

Проанализируем разметку СЕКЦИИ:

 

 

пишим html:

 

 

Накидываем Item:

 

 

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

 

 

Сделаем еще КАСТОМНУЮ КНОПКУ:

 

  button-small  

 

 

Пишем кастомный стиль кнопки:

 

 

 

Далее стилизуем наши   Items  

 

 

Нам тут нужен код: SVG to be an inline SVG

 

 

Информационное отступление:

 

 

Копируем его и вставляем в    common.js  

 

 

 

 

И давайте - назначим какое нибудь свойство SVG:

и оформим стили:

 

 

Работает при наведении:

 

 

 

 

Transition - работает!

 

И визуально хорошо:

 

 

Однако нам нужна еще одна кастомная кнопка:

 

   СЕРАЯ КНОПКА  

 

Для начала добавим класс серой кнопки:

 

 

 

 

ГОТОВ ITEM

 

Теперь все прокопируем:

 

 

Адаптивим:

 

 

 РЕШАЕМ ТЕПЕРЬ ПРОБЛЕМУ 

 

 с Item-мами РАЗНОЙ ВЫСОТЫ:

 

Для этого:

 

 

Далее:

 

Нам понадобиться плагин:   jQuery.equalHeights 

 

 

Копируем содержимое плагина в режиме правки (так по уроку),

но я не нашел такой режим - видимо просто качаем, а потом вставляем его в    "js/libs.js"   

 

(У нас то он уже подключен и скомпилирован)

 

Это на случай новой установки:

 

Пример из скаченного архива с плагином:

 

 

 

 

 

Далее идем в   common.js 

 

и пишем функцию:

 

 

   И еще ОДНА ПРЕДОСТОРОЖНОСТЬ!   

 

 

Урок 19: Верстка. Секция <Наши работы> и Pop-up

 

 

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

 

 

 

Пишем секцию:

 

 

Далее:

 

 

Работает сначала над одним Item portfolio, затем размножим:

 

 

 

Смотрим:

 

 

Однако могут быть отступы у картинок - поэтому что бы их вообще не было - переделаем чуток:

 

 

И действительно - отступы     УБРАЛИСЬ!  

 

Далее продолжим писать базовые классы:

 

 

 

 

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

 

 

 

Теперь делаем плавное появление нашего OVERLAY

 

 

Работает - при наведении! Появляться белая заливка и наша Лупа - по верх с текстом!

 

 

Но мы можем еще добавить   "ZOOM" 

 

 

 

 И можем еще увеличивать картинку!

 

 

 

Работает!

 

 

Но у нас ZOOM  - сваливается в ЛЕВО: (Исправим это)

 

И можно эффект ЗУМА сделать еще интересней:

 

 

 

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

 

 

Ну и конечно - мы планируем выводить все картинки из

 

 

и уже в MODX - есть возможность делать картинки одинаковой высоты  (РЕСАЙЗИТЬ)  и даже    (КРОПИТЬ)

 

 

   Далее сделаем POP-UP окно:  

 

 

 

   html  

 

 

  common.js  

 

 

 

Первые испытания POP-UP (Включили еще "Невидимость" у всплывающего POP-UP)

 

 

 

Давайте По-СТИЛИЗУЕМ наш POP-UP:

 

 

Отлично - Теперь это более-менее похоже на POP-UP

 

 

 

Получилось отцентрировать ФОТО:

 

 

 

<h2>  - находится не в ROW - поэтому перенесем а лучше обособить!

 

 

Сейчас очень резко открывается наш POP-UP

 

Смотрим типы анимации в документации MagnificPopup:

 

 

 

 

Поработаем над ZOOM-мом:

 

 

 

Спускаемся ниже по документации и копируем код:

 

 

 

И вставляем код в конвертер     CSS - > SASS  

 

 

 

Далее удалим все префиксы:

 

 

 

Вставим в стили:

 

 

Готово! ZOOM - Заработал!

 

 

Работаем над стилями:

 

 

 

Адрес текст выровним по левому краю:

 

 

 

 

Тут подробнее по ходу дела:

 

 

 

Далее финально настроим стили, цвета и отступы нашего POP-UP окна:

 

 

Смотрим на финально оформленный POP-UP

 

 

 

НАЧИНАЕМ АДАПТИВИТЬ!

 

 

ВАЖНЫЕ ПЕРЕМЕНЫ в АДАПТАЦИИ:

 

 

 

Просто финальные настройки стиля:

 

 

 

 

Теперь - ДУБЛИРУЕМ НАШ Item ПОРТФОЛИО

 

 

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

 

 

 

 

 

ГОТОВО!

 

И еще один КОСЯЧОК - не влезает ОПИСАНИЕ при НАВЕДЕНИИ:

 

 

 

Готово! СВЕРСТАЛИ СЕКЦИЮ ПОРТФОЛИО!