При верстке верхнего меню 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.

Обязательный блок для идеального lendinga является faq ответы на вопросы, в котором рассмотрены все ключевые вопросы, которые интересуют покупателя.

Если покупатель сразу ответит на вопросы, то увеличится сила убеждения для совершения действия, то есть нажать на кнопку и заказать.

Структура будет состоять из секции с идентификатором #faq в одну колонку col-xs-12 с заголовком второго уровня с названием информация о товаре и двумя уточняющими предложениями.

Зададим три колонки для трех тарифов, например.

В первом тарифе будет большая цена, потом поменьше и минимальная.

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

Этим немного увеличивается вероятность заказа тарифа, то есть поднимаем конверсию сайта.