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

Всем доброго утра! Недавно мы закончили работу над первым блоком, самым сложным блоком всего сайта, как я считаю. Теперь приступаем делать сайт далее.
Сегодня мы замутим второй блок. Сделаем всё быстро и просто. Не забудьте скачать материал номер 3 с PSD макетом данного блока, так вам будет проще работать. Всем успехов.

Вот, что мы должны будем получить. Цифру 3 по центру мы не будем заливать фоном.

Приступаем к работе

Создаём новый Zero block и устанавливаем цвет всего фона #fcb224

Высоту блока сделаем немного больше чем в первом. Я поставлю 750px.

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

Добавляем цифру 3. Да, просто цифру 3 и ставим размер шрифта 500. Это максимальный размер, который мы можем сделать, нам его будет достаточно. Начертание шрифта Bold.

Цвет цифры 3: f69023

Далее просто дублируем эту цифру, комбинацией кнопок ctrl с + ctrl v. Цвет второй цифры делаем e07a0c .

Вторую цифру 3 (которая более тёмная) мы отправляем на задний план и сопоставляем обе цифры, накладывая их друг на друга.

Смещаем одну из цифр так, чтобы у нас получилась такая картина:

Выделяем обе цифры и выравниваем их по центру контейнера.

Далее открываем настройки каждой из цифр и ищем раздел Action. Нажимаем на кнопку Lock. Аналогично делаем со второй кнопкой. Цвет обводки у нас поменяется с синего на жёлтый.

Что мы сделали? Мы заблокировали эти цифры в контейнере. Теперь они будут выполнять роль фона, не будут выделяться. Это нам и нужно.

Добавляем другой текст.

Добавляем ещё несколько блоков. Блок с самой программой.

Заголовки: цвет чёрный, размер шрифта 30, начертание bold.

Описание: цвет чёрный, размер 16, начертание medium.

Теперь просто дублируем два текстовых блока и размещаем согласно макету.

Внимание! Когда мы редактируем текст справа, мы ставим выравнивание текста по правой стороне!

Нажимаем на блок текста, открываем настройки, ищем данный пункт и нажимаем right.

Готово. Программу разместили.

Совсем забыл!

Под цифрами у нас есть совсем небольшая надпись "ДНЯ ОБУЧЕНИЯ".

Тут всё просто. Давайте сделаем её.
Создаём текстовый блок. Шрифт Roboto bold, цвет e07a0c, размер 35. Помещаем её под цифру 3 и выравниваем по центру контейнера. Готово!

Сохраняем, закрываем и смотрим. Вот что у нас получилось:

Изучайте уроки, развивайтесь, успехов!)