В этой статье будем знакомиться с новым менеджером задач (task manager) под названием Gulp. Постепенно вместе с вами я пройду весь процесс - от установки Gulp до установки плагинов, создания задач, отслеживания ошибок и еще многое другое.
Но для начала узнаем, что такое Gulp. Это точно такой менеджер задач, как и Grunt. Оба они являются модулями под Node.js и устанавливаются с помощью пакетного менеждера
1
npm
.
Отличие от Grunt в том, что Gulp является переработкой Grunt. Как говорят его разработчики, цель создания была в том, чтобы выбросить из Grunt все лишнее. Кроме того, настройка Gulp значительно упростилась:
На сегодня однозначным преимуществом Gulp перед Grunt является скорость обработки файлов - она в разы выше, чем у старенького Grunt.
Установка Gulp
Установка будет производиться под операционной системой Linux Mint 17 Cinnamon. Поэтому, пользователи Mac OS найдут все нижеприведенные команды абсолютно идентичными для себя. Подразумевается, что в системе уже установлен Node.js и менеджер пакетов npm.
Процесс инсталляции выполняется в два этапа. Первоначально Gulp устанавливается глобально, с помощью ключа
1
-g
. Давайте так и поступим - произведем установку в системе:
Установка завершена и можно переходить к использованию этого менеждера задач.
Первый запуск Gulp
Менеджер задач - само слово говорит за себя, это программа для управления задачами. В Gulp все задачи прописываются в одном единственном файле
1
gulpfile.js
. Первоначально этого файла не существует и его нужно создать самостоятельно, вручную:
$touchgulpfile.js
Затем в нем пропишем первую задачу. Все задачи деляться на два неравнозначных типа: задача по умолчанию (default task) и именованные задачи (named tasks). Разница между ними в том, что задача по умолчанию имеет имя
1
default
, которое можно и не указывать. Кроме того, задача по умолчанию запускается в консоли всего одной командой:
$gulp
В то время как именованная задача (named task) может иметь произвольное имя. Запуск такой задачи в консоли выполняется с указанием имени конкретной задачи:
$gulpname_of_task
Еще один важный момент заключается в том, что этот менеджер задач является потоковым. Что это значит? Не знаю, получиться ли у меня достаточно точно объяснить данный вопрос, но вот линуксоиды, хорошо знакомые с командной строкой, меня должны понять. В консоли Linux (Unix) есть такое понятие, как pipe.
Например, простая команда:
$ls-l|less
… выполняет следующее: результат команды
1
ls -l
перенаправляется для обработки в программу
1
less
. Редактор
1
less
автоматически открывается в консоли с уже готовым для чтения текстом внутри себя.
Чисто схематично такой пример можно усложнить и представить в таком виде:
Каждая из программ в этом списке будет производить обработку данных и передавать результат этой обработки другой программе, по цепочке.
Принцип работы Gulp точно такой же. Только вместо программ в нем используются плагины (я не забыл сказать, что он имеет модульную структуру?):
$plugin1|plugin2|plugin3|plugin4|plugin5|plugin6
Отлично! С теорией закончили и можно снова возвращаться к практике, к нашему файлу настроек
1
gulpfile.js
. Откроем его и пропишем в нем такие строки:
vargulp=require('gulp');gulp.task('default',function(){console.log('Hello from Gulp!')});
Первая строка
1
var gulp = require('gulp');
создает переменную
1
gulp
, в которую помещается сам Gulp. Это необходимо для Node.js, который будет читать файл
1
gulpfile.js
и работать с Gulp в виде переменной
1
gulp
.
Вторая строка, начинающаяся с
1
gulp.task
- это не что иное, как задача. Именно так создаются задачи в этом менеджере. Здесь
1
'default'
- это имя задачи (в данном случае это задача по умолчанию, как вы помните). Функция
1
function()
имеет в своем теле неограниченное количество инструкций. Так как мы еще не умеем работать с плагинами под Gulp, то в качестве инструкции пропишем вывод в консоль обычной текстовой строки -
1
console.log('Hello from Gulp!')
.
Давайте попробуем запустить наш менеджер задач, чтобы посмотреть, а работает ли он вообще? И как он работает? Для этого переходим в консоль и вводим в ней одну единственную команду
Встретил на Google+ упоминание о плагине под jQuery для создания карусели - OWL Carousel.
Попробовал с ним разобраться и посмотреть примеры создания слайдеров на официальной странице. Могу сказать, что я впечатлен данным скриптом и его возможностями. Слайдер адаптивный, имеет множество настроек, обладает хорошими эффектами “из коробки”. Мое личное мнение - отличный выбор для применения на практике!
Официальная страница проекта располагается здесь - OWL Carousel. Стабильная версия скрипта на данный момент -
1
v1.3.2
, но на странице упоминается о версии
1
2.0.0-beta
. Для своей работы плагин требует библиотеки jQuery версии не ниже
1
1.7
.
Ниже я попробую создать простой вариант карусели с помощью плагина OWL Carousel. Более интересные и продвинутые варианты, я думаю, показывать не имеет смысла. По той простой причине, что разобравшись с базовым вариантом, всегда можно его улучшить. И для этой цели как ничто лучше подойдут примеры на официальной странице - Demo и More Demo. Стоит сказать, что для себя я увидел там готовые решения практически на все случаи жизни.
Подключение OWL Carousel
Для подключения плагина OWL Carousel к готовому проекту необходимо получить архив плагина с официальной страницы - OWL Carousel или с GitHub - OwlCarousel. В архиве имеется все, что необходимо - библиотека jQuery, плагин
1
owl.carousel.min.js
, готовые CSS-стили для карусели. Ничего сложного или необычного в подключении плагина OWL Carousel нет - все стандартно.
HTML-разметка и подключение скрипта будут выглядеть следующим образом:
- опциональная, для настройки плагина под конкретные условия.
Тип HTML-элементов для создания разметки слайдера, по большому счету, не имеет особого значения, так как скрипт OWL Carousel умеет работать со всеми типами. Главное, чтобы у блока-обертки имелся обязательный класс
1
owl-carousel
, к которому будет производиться привязка стилей из файла
1
owl.carousel.css
.
В конце тела
1
body
документа подключаются библиотека jQuery, скрипт плагина OWL Carousel и файл настроек данного скрипта.
Все, можно смотреть на готовый (слегка подредактированный) результат:
Настройка плагина OWL Carousel
Скрипт OWL Carousel имеет большое количество настроек, которые добавляются или убираются в файле настроек. Ссылка на страницу с полным списком настроек располагается здесь - Customizing OWL Carousel.
К примеру, переменная
1
items
задает количество одновременно показываемых в слайдере изображений:
items:5
Переменные
1
itemsDesktopSmall
,
1
itemsTablet
,
1
itemsTabletSmall
,
1
itemsMobile
устанавливают количество одновременно отображаемых изображений в зависимости от размера окна браузера. Например, запись вида
1
itemsDesktop: [1199,4]
“говорит” браузеру, что при размере окна меньше или равному 1199px следует отображать одновременно только четыре изображения:
itemsDesktop:[1199,4]
Переменная
1
singleItem
устанавливает, отображать ли только одно изображение в слайдере или несколько:
singleItem:false
Переменные
1
navigation
и
1
pagination
управляют возможностью включения или выключения навигации\пагинации у слайдера:
navigation:true,pagination:true
Автоматическая прокрутка изображений в слайдере включается с помощью переменной
1
autoPlay
:
autoPlay:true
Имеются множество других настроек плагина OWL Carousel, с которыми можно легко разобраться на официальной странице. Все перечислять здесь я не буду.
Варианты слайдера OWL Carousel
Стоит “побродить” по странице с демонстрационными примерами работы плагина OWL Carousel. Там есть на что посмотреть и что подобрать для себя.
Наиболее интересные (для меня) примеры расположены в списке со ссылками.
К примеру, по ссылке CSS3 Transitions располагается образец слайдера с эффектом перехода, основанном на CSS3-свойстве transition. Более того, из выпадающего списка можно прямо на странице подобрать себе подходящий эффект - своеобразный конструктор получается:
Или пример создания слайдера с расположенной вверху полосой progress bar - Progress Bar.
Заключение
Плагин OWL Carousel мне понравился и я буду стараться применять его на практике, при верстке страниц.
В этой статье будет детально рассмотрен вопрос создания фигуры шестиугольника (hexagon) на CSS.
Материал целиком основан на замечательной статье CSS Hexagon Tutorial. В Сети имеется хорошая статья по примерам создания различных видов фигур на CSS, и располагается эта статья на блоге известного CSS-гуру Chris Coyier Shapes of CSS. Среди прочих фигур там есть и желанный шестиугольник
1
hexagon
с готовым CSS-кодом что называется, “бери и пользуйся”.
Но ведь такой подход для нас не интересен, правда? Это потом, когда мы изучим вопрос создания шестиугольника, мы будем делать так - нашел готовый код, скопировал к себе, подредактировал и готово! А сейчас мы пошагово пройдем весь путь, от начала и до конца - это даст нам понимание процесса.
Как будем строить hexagon
Фигура hexagon изначально кажется неприступной - не понятно, с какого боку к ней подойди, чтобы начать постороение шестиугольника на CSS. Однако, если внимательно присмотреться, то hexagon можно разделить на три простые фигуры:
Видно, что фигура состоит из двух одинаковых треугольников и одного прямоугольника. Построение треугольников на CSS выполняется очень просто - “CSS – почему треугольник это треугольник”, прямоугольника - вообще в два движения.
Поэтому, построение шестиугольника hexagon на CSS сводится к двух задачам:
создать два треугольника
создать один прямоугольник
Построение треугольников на CSS
Задачу создания треугольников на CSS начнем с построения обычного квадрата со стороной в
У получившегося треугольника все стороны равны - высота и ширина по 30px каждая. Нам же необходимо “растянуть” треугольник в ширину, чтобы он у него появился тупой угол. Для этого нужно увеличить ширину боковых границ
Задача создания треугольника нами выполнена. Теперь необходимо получить точно такой треугольник, только “направленный” вниз. Это просто - достаточно поменять нулевое значение между верхней и нижней границей фигуры. Все остальные значения останутся неизменными. Чуть не забыл сказать, что для “повернутого” треугольника придется создать в HTML-коде новый блок:
Первый шаг по созданию шестиугольника hexagon на CSS выполнен - у нас есть два одинаковых разнонаправленных треугольника. Теперь нужно создать “тело” для шестиугольника - прямоугольник.
Построение прямоугольника на CSS
Для создания прямоугольника на CSS достаточно прописать для нового блока три величины - высоту, ширину и фоновый цвет. Новый блок я размещу между двумя блоками-треугольниками.
А вот с размерами для прямоугольника нужно разобраться немного подробнее. У него ширина должна быть равна удвоенной ширине боковой границы треугольника:
Все - задача построения шестиугольника hexagon на CSS выполнена - все оказалось достаточно просто!
Создание сетки из hexagon
Теперь можно усложнить задачу и создать из фигур hexagon своеобразную сетку, а-ля пчелиные соты. Задача тривиальная и весь вопрос сводиться к нескольким CSS-свойствам:
1
float
,
1
overflow
,
1
margin
,
1
padding
.
Создаю первый ряд сетки:
<divclass="row"><divclass="hexa"><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div><divclass="inside"></div><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div></div><!-- end hexa --><divclass="hexa"><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div><divclass="inside"></div><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div></div><!-- end hexa --><divclass="hexa"><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div><divclass="inside"></div><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div></div><!-- end hexa --><divclass="hexa"><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div><divclass="inside"></div><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div></div><!-- end hexa --><divclass="hexa"><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div><divclass="inside"></div><divclass="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div></div><!-- end hexa --></div><!-- end row -->
Дальше продолжать не имеет смысла - все остальные ряды строятся аналогично. Нужно только управлять ими с помощью соотвествующих классов, смещая влево или вверх:
Лучше перейдем к другому интересному вопросу - созданию такого же шестиугольника hexagon, но несколько иной формы, “повернутого”. У которого углы развернуты по-горизонтали, а не по-вертикали.
Построение повернутого hexagon на CSS
Задача создания развернутого hexagon почти ничем не отличается от задачи построения обычного шестиугольника. Только потребуется несколько дополнительных строчек кода.
Дело в том, что в этом случае нужны углы, которые будут располагаться горизонтально и “смотреть” влево или вправо. Помимо этого, понадобиться “плавание” влево
1
float: left;
.
Для блока - “тела” hexagon нужно будет изменить значения высоты или ширины на прямопротивоположные.
/* LEFT ARROW */.hexagon_triangle_left{border-left-width:0;border-top-color:transparent;border-bottom-color:transparent;}.hexagon_triangle_left_large{border-top-width:52px;border-bottom-width:52px;}/* RIGHT ARROW */.hexagon_triangle_right{border-right-width:0;border-top-color:transparent;border-bottom-color:transparent;}.hexagon_triangle_right_large{border-top-width:52px;border-bottom-width:52px;}.inside_rotate{width:60px;height:104px;background-color:#778899;}.left{float:left;}
Добавлю несколько таких шестиугольников, чтобы получился полный ряд:
Отлично! Теперь нужно добавить еще один ряд - нижний. При этом опять придется немного модифицировать код, чтобы произвести смещение фигур влево и вверх:
Рассмотренный выше способ создания hexagons хорош, но имеет один недостаток - слишком много дополнительных блоков, одними из которых являются блоки для создания треугольников.
Можно (и нужно) значительно сократить код, воспользовавшись для этой цели псевдо-классами
1
:before
и
1
:after
. Давайте я так и поступлю, при этом возьму код из примера, не буду ничего выдумывать:
Рассмотренный выше способ неплох, причем оба его варианта. Но для практического применения оба они достаточно трудоемкие. В Сети, помимо многих других подобного рода, имеется online CSS-генератор для создания hexagon в считанные минуты.
Адрес сервиса располагается здесь - CSS Hexagon. Помимо создания самого hexagon, там можно “прикрутить” к фигуре тень и границу, что просто великолепно!
С чего вдруг мне приспичило воспользоваться циклом в препроцессоре? Все, как всегда, просто - в предыдущей статье, посвященной плагину Smooth Scroll (Плагин Smooth Scroll), мне потребовался создать пример разметки HTML-документа с заголовками всех уровней, с первого (h1) до шестого (h6). Все бы ничего, но вручную создавать стили для заголовков всех уровней как-то утомительно.
HTML-разметка для цикла for
Вот я и озаботился задачей автоматизировать этот процесс, через цикл. Для этой цели я использовал цикл
1
for
. Упростил пример, выкинув параграфы и оставив только заголовки всех уровней:
Обзор краткий такого же небольшого плагина Smooth Scroll, написанного под библиотеку jQuery.
Этот скрипт предназначен только для одной цели - плавного скроллинга (прокрутки) страницы. Благодаря этому улучшается юзабилити страницы и сайта в целом, так как нет резких скачков при переходе по ссылкам.
Подключение плагина Smooth Scroll
Подключение Smooth Scroll к HTML-странице производится как обычно:
, что дает плавный скроллинг. В принципе, этого достаточно - больше ничего и не надо.
Варианты выборки в Smooth Scroll
Помимо показанной выше строчки, скрипт Smooth Scroll имеет несколько других вариантов режима работы. Другими словами, эти режимы работы - все навсего усложненный первый вариант, вариации на тему выборки HTML-элемента в библиотеке jQuery.
Примеры выборок взяты мною из файла
1
readme.md
, переводить их мне совсем не хочется; да и нет в этом необходимости - все понятно даже по коду:
Allows for easy implementation of smooth scrolling for same-page links.
Works like this:
1
$('a').smoothScroll();
Specify a containing element if you want:
1
$('#container a').smoothScroll();
Exclude links if they are within a containing element:
Add a callback function that is triggered before the scroll starts: `$(‘a’).smoothScroll({beforeScroll: function() { alert(‘ready to go!’); }});
Add a callback function that is triggered after the scroll is complete:
1
$('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});
Пример работы Smooth Scroll
Ниже привожу пример HTML, SCSS и JS-кода, на котором проходил “испытание” плагин Smooth Scroll у меня, в моей “лаборатории”.
<head><metacharset="utf-8"><title>Smooth Scroll Plugin</title><linkrel="stylesheet"href="css/style.css"></head><body><h1class="head">smooth scroll plugin</h1><ulclass="scroll"><li><ahref="#h1">header 1</a></li><li><ahref="#h2">header 2</a></li><li><ahref="#h3">header 3</a></li><li><ahref="#h4">header 4</a></li><li><ahref="#h5">header 5</a></li></ul><h1>header 1</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h2>header 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h3id="h3">header 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h4>header 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5id="h5">header 5</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 6</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 7</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h1>header 1</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h2id="h2">header 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h3>header 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h4>header 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 5</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 6</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 7</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h1id="h1">header 1</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h2>header 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h3>header 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h4id="h4">header 4</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 5</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 6</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><h5>header 7</h5><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p><!-- SCRIPTS --><script src="js/jquery-1.11.1.min.js"></script><script src="js/jquery.smooth-scroll.min.js"></script><script src="js/settings.js"></script></body>