Блок будет состоять из заголовка, двух колонок с текстом, иконками и картинки посередине.
Открываем чистый шаблон.
В 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.
- В клас item-text добавим тег p c 10 словами loremru10 в emmet.
- В 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.
Этим мы увеличим разрешение экрана при, котором происходит схлопывание.