[Урок 28] Первый сайт на Zero Block (10 часть - третий блок, десктопная версия)

И так, продолжаем работу над третим блоком нашего сайта вебинара. В предыдущем уроке мы сделали анимацию фона.

Сегодня мы добавим остальные объекты, сделаем анимацию изображений и посмотрим как выглядит весь сайт на ПК версии. Погнали!)

Обращаемся к макету

Зрим в корень. Открываем макет.

Опять вернёмся к фону и заблокируем его. Открываем настройки фона, ищем actions и нажимаем lock.

Это упросит работу с дальнейшими элементами, фон не будет двигаться.

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

Шрифт у нас везде Roboto. Подзаголовок "НЕМНОГО О СПИКЕРАХ" : размер 41, цвет #fcb224, начертание bold.

Заголовок "МАРК ЦУКЕРБЕРГ", размер 90, начертание bold, цвет белый.

Далее идёт текст описание. Начертание Medium, размер 16, цвет белый.

ВНИМАНИЕ! ВСЕ ТЕКСТОВЫЕ БЛОКИ МЫ ВЫРАВНИВАЕМ ПО ЛЕВОЙ СТОРОНЕ.

Добавляем иконки : Instagram, Forbes и MH.

Все иконки есть в архиве 4го материала. Размещаем их в оригинальном размере согласно макету.

Загружаем изображение

Теперь нам нужно загрузить фото самого Марка. Сделаем это мы в двух слоях.

Для начала загружаем файл "mark_back.png". Он есть в материалах номер 4. Выравнивание по правому краю.

Второе изображение "mark_img.png" загружаем и ставим поверх бэка. К бэкграунду применяем базовую анимацию Zoom In.

Выглядеть будет это вот так:

Дублируем блоки

Нам нужно установить второго спикера, поэтому выделяем содержимое с Марком, копируем (ctrl + с ; ctrl + v) или же зажимаем alt и тянем объекты в любую сторону.
Размещаем блок прямо под блоком с Марком.

Шрифты, размеры, цвета - аналогичны. Единственное, что нам нужно поменять это одну из иконок (MH на VK).

Заполняем блок с Павлом нужным тектом (из макета)

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