Продолжаем верстать.

 

[maxbutton id="1" text="Верстаем секцию <Поставляемое оборудование>"]

 

[maxbutton id="1" url="#item_people" text="Верстаем секцию item - Люди" ]

 

   Урок №20:  Секция "Поставляемое оборудование"  

 

по нашему дизайну:

 

 

 

 

 

 

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

 

 

 

 

 

 

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

 

 

Наш SVG - сейчас серый, поэтому давайте его оформим:

 

GO в    common.js  

 

Смотрим там класс для "SVG"

 

 

 

И еще перед SVG - вставим наш фон- кармашка:

 

 

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

 

 

 

И сюда добавим класс   "responsive" 

 

 

 

 

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

 

 

 

 

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

 

 

 

 

Далее продолжаем разметку нашего    Item-a:

 

 

 

 

 

 

и теперь делаем бордюр нашего   item-а 

 

 

 

 

 

Оформляем текст:

 

 

 

 

Смотрим:

 

 

 

 

 

И смотрим:

 

 

И теперь    прокопируем наши Items:  

 

   ВОТ ТУТ ТО И НАЧАЛИСЬ НЕ СОВПАДЕНИЯ.   

 

Пока опустим Оформление наших Items - и установим плагин карусели, поскольку у него   СВОЯ СЕТКА: 

 

<ТУТ ЕЩЕ ПРОПУСТИМ ВЫРАВНИВАНИЕ ПО ВЫСОТЕ Item-мов>

 

 

Ставим плагин КАРУСЕЛИ:

 

Такого сайта уже нет:

   owlcarousel.owlgraphic.com  

 

 

Он копирует содержимое этого файла и вставляет в файл:

 

 

   libs.js  

 

 

 

 

Затем, он открываем файл:      owl.carousel.css  

 

что бы конвертировать его в SASS:

 

 

 

Но у нас уже есть SASS:

 

 

Но после конвертирования, скопирует содержимое (УЖЕ СКОНВЕРТИРОВАННОЕ - ПОЧИСТИТ префиксы - и сохранит с таким же именем:

owl.carousel.sass   ) и тоже положит его в папку assets

 

   У нас уже все лежит НО в файлах урока!  

 

Нам НЕОБХОДИМО СКОПИРОВАТЬ ЭТИ ФАЙЛЫ В НАШИ ПАПКИ ПРОЕКТА:

 

 

 

 

Теперь необходимо плагин :    owl.carousel  

 

Упомянуть в     common.js 

 

 

 

Смотрим на наши Item-мы на странице:

 

 

 

ЗАТЕМ про копируем еще 2 Item-а в конце:

 

Что бы стало 8 Item-мов:

   И наша Каруселька - Закрутиться уже!  

 

 

  Однако точек пока нет!    Их нужно стилизовать:

 

По html-структуре такие дела:

 

 

 

   &.active      Активную точку заливаем желтым цветом

 

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

 

 

С точками, но не одинаковой высоты - Исправим это!

 

 

 

На случай если вдруг не загрузятся наши картинки SVG:

 

Отработаем альтернативный вариант показа:

 

Что бы увидеть масштаб бедствия - отключим SVG:

 

 

 

Включим обратно SVG - сценарий

 

Все так как должно быть:

 

 

Лирическое отступление по плагину:

 

 

У нас уже применен Wraper - в контексте margin: 10px

 

Поэтому - не заморачиваемся.

 

И просто для понимания работы плагина Карусели нашей:

 

 

 

Продолжаем верстать.

 

[maxbutton id="5" text="Верстаем секцию <Всем клиентам скидки>"

 

 

Начинаем новую секцию:

 

Какой то специально именной секции не будем создавать - Просто стандартную темную секцию:

 

 

И уже видим новую Темную Секцию:

 

 

Сгруппируем текстовые блоки в    col-sm-12:  

 

 

 

 

 

 

Далее стиль текста:

 

 

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

 

 

   Готово! Секция сверстана!  

 

 

Продолжаем верстать.

 

 

хуй

 

[maxbutton id="12" text="Верстаем секцию item - Люди" ]

 

   С кем можно связаться через сайт  

 

 

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

 

  section.s-wide.s-gray.callback  

 

И новый контейнер включая  row + заголовок

 

   .container>.row>.col-sm-12>h2{С кем можно связаться через сайт} 

 

 

 

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

 

 

 

 

 

    .col-sm-4*3    

 

 

 

 

Далее стилизуем foto:

 

  brs10em 

 

 

 

 

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

 

 

 

 

 

 

 

 

Затем прокопируем наши фото-Item-мы

 

 

 

 

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

 

 

Продолжаем верстать.

 

[maxbutton id="5" text="Верстаем секцию <Карусель брендов>"

 

   Урок №22:  Секция "Карусель брендов"   

 

 

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

 

 

Анализируем дизайн и колонки карусели:

 

 

   Пока даже нам и не нужна тут сетка Bootstrup - потому что может включиться overflow hidden - и скрыть стрелки!!!  

 

 

 

 

И укажем наш класс нашей карусели в сценарии:

 

 

 

 

 

 

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

 

 

 

 

Давайте стилизовать:

 

 

 

 

Смотрим:

 

 

 

 

И создадим отдельный (персональный) сценарий для карусели  ЛОГО:

 

 

 

 

 

 

 

 

Сейчас уже красивый отступ:

 

 

 

 

Далее раздвинем по бокам местечко (слева/справа) - для наших стрелок навигации:

 

 

 

 

Сделаем появление ЛОГО- при наведении: