[Урок 31] Первый сайт на Zero Block (13 часть - пятый блок)

Всем привет. Продолжаем тему разработки сайта вебинара и уже подходим к концу. Честно говоря я уже жду, когда мы начнём делать следующий сайт. С этим подустал))

Сегодня мы начнём делать пятый экран - цены на услуги. Не забывайте скачать материал номер 6, там макет пятого экрана. В общем - поехали!

Создаём Zero Block

Высота блока +-1000 пикселей, возможно поменяем в процессе. Цвет фона блока: fcb224

Добавляем текстовый блок

Для заголовка. Шрифт Roboto, размер 48, начертание bold. Тут всё просто.

Выравниваем по центру.

Добавляем фигуры

Нажимаем на крестик и добавляем shape. Появляется жёлтый квадрат. У него нам нужно изменить цвет и сделать небольшое округление. Открываем настройки.

Цвет блока: fc9424

Открываем в настройках параметр border и в параметр Radius ставим 20.

Высота блока 739 пикселей.

Дублируем фигуру и растягиваем их по ширине.

Добавляем кнопки

Нажимаем на крестик в левом верхнем углу и добавляем кнопку (add button)

Опять открываем настройки и делаем округление до 10 (radius border).

Ставим текст на кнопку "ОПЛАТИТЬ" и делаем шрифт 26.

Дублируем кнопку, выравниваем размер (высота кнопки 90пх) ставим на оба блока.

Опять добавляем текст

Добавим заголовки блоков (Оптимальный и Профи).

Размер 65, шрифт roboto, начертание bold. Ставим и выравниваем.

Дублируем текст

Копируем оба блока и вписываем в них цены (5990 и 9900р)

Меняем только размер - 101.

Добавляем ещё два текстовых блока

Это будет описание. Текст:

"Деньги и их функции
Главные принципы денег
Деньги в обществе 21 века
Капитал построить может каждый?
Свой капитал с 10.000 рублей
Нет ничего стабильного?"

Размер 27, шрифт roboto, начертание medium. Дублируем текст на оба блока.

Закрываем, сохраняем и смотрим.

Блок сверстали. По желанию добавляйте анимацию. В следующем уроке адаптируем данный экран под мобильное устройство.
Всем успехов!)