Зададим три секции, у средней section будет класс grad, а фон сделаем с градиентом.

Добавим в секцию заголовок.

Переходы между секциями будут не прямые линии, а любой формы.

Код в index.html.

Четыре разных вида оформления текста.

Возможно пригодится для стилизации landing page.

1). Первый это неоновый текст.

Сделаем каркас из секции с идентификатором futur4.

Внутри будет заголовок первого уровня h1.

При верстке верхнего меню top-line, всегда требуется для маленьких экранов col-xs-12 делать значок открытия и закрытия меню в виде гамбургера.

Рассмотрим четыре симпатичных примера hamburger menu.

1). Гамбургер меню с плавным изменением полосок.

Добавим див с классом class=toggle, внутри будет тег span.

При скролле сайта вниз появляются цифры и начинают увеличиваться, такая секция иногда используется на лендингах, поэтому разберем подробнее как настроить.

Сперва зададим html структуру из cекеции с идентификатором id=line.

В контейнере будет четыре колонки col-md-3.

Для средних мониторов и для маленьких две col-sm-6.

У landing page часто внизу идет карта с указанием адреса.

Сделаем красивый указатель местоположения, цвета к нему используются любые.

Каркас будет из дива с классом location-item с двумя span внутри.

• Первый location-pointer.
• Второй location-pulse.

Вначале установим дополнение для браузера firebug, которое позволяет видеть отступы элементов.

Это преимущество в отличие от встроенной консоли кода.

Положим в контейнер со строкой row предложение и ссылку и посмотрим, как будут отображаться в firebug.

Видим, что предложение в теге div занимает всю ширину страницы, а ссылка не всю, только ширину размера текста.

Верстка трех видов социальных иконок.

Первая иконка 3d вида, при наведении мышкой поднимается вверх и меняет цвет.

Сделаем каркас для иконки в html.

Зададим секцию с идентификатором id=iconisometric, внутри будет контейнер со списком ul.

Класс у списка зададим iconisometric-ul3.

Сверстаем секцию id=items с заголовком, тремя изображениями и двумя абзацами, расположим в одном container.

В первой строке row будет 10 колонок col-sm-10, с отступом сбоку col-sm-offset-1.

Вначале идет заголовок h2 и векторное изображение в теге picture.

Этот тег сам определяет размер окна и подставляет нужный формат изображения.

Эта секция идет после меню сайта и шапки логотипа с телефоном.

Секцию назовем id=main, Будет контейнер с тремя колонками col-md-4.

В первой колонке с классом main-hdr, будет заголовок h1.

Этот заголовок h1 должен состоять из трех основных ключевых слов, один заголовок можно разложить на три ключевых слова.

Пример разложения трех ключевых слова, цена товара, купить товар, купить в таком городе.

Добавим код для переворачивающегося блока в 3d формате, первый блок в, котором будет анимация t3d, внутри блок с классом rotate, он и будет переворачиваться.

У этого блока две стороны на первом плане будет изображение img на другой стороне текст txt, с дополнительным классом pd для отступов текста от краев блока.

Внутри заголовок второго уровня и текст.

Код в index.html.