Август 2017
Автор: Рубрика: Верстка Комментариев нет

Верстаем блок список преимуществ


Верстаем блок список преимуществ

Блок будет состоять из заголовка, двух колонок с текстом, иконками и картинки посередине.

Открываем чистый шаблон.

В index.html в теге body создаем секцию section с классом sec_cl.

Зададим секции стиль в main.sass отступов padding верх и низ по 90, а по бокам 0.

Так как у нас подключен в чистом шаблоне фреймворк bootstrap, то любая верстка начинается с контейнера container.

Внутри контейнера расположим заголовок второго уровня h2. Сделаем h2 посередине.

Оформляем колонки

У нас контейнер разделяется на три колонки сетки bootstrap.

Для этого мы делаем после container обязательно идет клас row.

Row это строка в bootstrap сетке, в которой находятся колонки.

Пишем в row .col-sm-4*3, для трех колонок.

Внутри первой колонки зададим див с классом cl_item.

Внутри будет структура из логотипа и текста напротив, значит есть расположение справа и слева.

Зададим два класса .item-text+.item-icon.

Верстаем с emmet для ускорения верстки.

Добавим два класса .text-left и text-right, потому что иконки в одной колонки слева от текста, а в другой справа будут.

Каждому преимуществу добавим заголовок третьего уровня h3.

  1. В клас item-text добавим тег p c 10 словами loremru10 в emmet.
  2. В item-icon добавим враперский тег span с класом icon-wrap обромим иконку и добавим саму иконку из шрифта fontawesome, например, книгу book.

Оформляем колонки

Добавим стиль иконки

Переходим в main.sass и добавляем стили классу icon-wrap.

  • Размеры сделаем 80 пикселей.
  • Добавим желтый цвет бекграунду.

Пропишем display: inline-block и увидим квадратную обертку желтого цвета, для округления сделаем border-radius: 10em

Добавим стиль иконки

Иконка сейчас висит под текстом.

Нам нужно сделать чтобы она была напротив текста.

Зададим в стилях каскаду item-text и item-icon свойство display: table-cell.

Сделаем вертикальное выравнивание в получившейся табличке vertical-align.

У h3 зададим margin-top: 0.

В Класс item-right поместим все дивы, для стилизации отступов в ячейке. Добавим свойства item-right.

иконку сделать чтобы она была напротив текста.

Продублируем еще 4 раза item.

Копируем все строки в третью колонку.

Меняем item на left. Переносим свойства h3 в icon-wrap и добавим новое свойство item-left.

Получится так.

Осталось добавить картинку посередине.

Для этого возьмем родительский клас sec_cl и добавим img и создадим новый клас text-center, чтобы картинка была посередине.

Выравниваем картинку относительно колонок путем изменения margin-top.

Выравниваем картинку относительно колонок

Проверяем как будет на мобильных устройствах выглядеть.

Можно, чтобы текст не провисал вниз при уменьшении экрана сделать не col-sm, а col-md.

Этим мы увеличим разрешение экрана при, котором происходит схлопывание.

Комментариев нет