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

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

Верстка блока Порядок Работы

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

Для того нужно вырезать, кроме фона, еще и изображение с картинками.

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

 

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

В данном коде используются такие «хитрости»:

  • Чтобы назначить разный цвет цифрам, используются правила для потомков (#steps .step:nth-child (5) .number), где цифра — это потомок+1;
  • Для выравнивания в один ряд используется код float: left;
  • Чтобы сбросить позиционирование, используется класс Clear, для которого в CSS прописано clear: both;
  • Центрирование внутренней картинки задается через фиксированные размеры и margin: 50px auto;
  • Позиционирование текста опять-таки идет через потомков .step:nth-child (1) {margin-left: 4px;}

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