Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по верстке блока «Почему Мы» сайта landing-order.ru.

Первым делом, вырезаем фоновую картинку и сохраняем в папку с картинками:

Верстка блока Почему Мы сайта landing-order.ru

Особенностью данного блока является то, что здесь текст идет в 2 ряда, но с различным количеством колонок — 3 и 2. 

Если идти по уроку, то такая реализация делается за счет таблицы (но через DIV'ы). Я же, ради эксперимента, попробовал сделать это же только через DIV'ы. Но правильно расположить блоки таким образом не получается, потому остается только таблица.

В файл index.html заносим такой код:

В файл main.css заносим такой код:

 

В следующей статье мы будем верстать блок «Галерея», не пропустите!