Продолжаем верстать.
[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 - и скрыть стрелки!!!
И укажем наш класс нашей карусели в сценарии:
Видим что получается:
Давайте стилизовать:
Смотрим:
И создадим отдельный (персональный) сценарий для карусели ЛОГО:
Сейчас уже красивый отступ:
Далее раздвинем по бокам местечко (слева/справа) - для наших стрелок навигации:
Сделаем появление ЛОГО- при наведении:
