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

Первым делом, вырезаем фоновую картинку, картинку кнопки (нажатая и не нажатая) и изображения «преимуществ» и сохраняем в папку с картинками:

Верстка блока Наши Преимущества сайта

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

В данном участке кода создается «таблица на DIV'ах». Если провести аналогию, то table, row и cell — это table, tr и td. Весь этот код заносится в CSS:

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

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