[Урок 22] Первый сайт на Zero Block (4 часть - работаем с изображениями)

Всем привет! Продолжаем большую работу над сайтом вебинары на Zero Block.
Сегодня приступим к работе с изображениями и немного углубимся в пошаговую анимацию. Урок важный, изучаем!)

Результат, который у нас есть на данный момент.

Добавляем изображения

Переходим к редактированию блока, нажимаем на добавление элемента и добавляем изображение (Add image).

У нас добавился серый квадратик, который мы перетаскиваем в правую часть рабочей области. Переходим к настройкам блока с изображением.

Нажимаем "Upload image" и загружаем изображение "bank.png".

Внимание! Данное изображение векторное, его нужно заливать в формате .svg! Я заливаю png только в качестве урока.

Готово. У нас загрузилось изображение. Нажимаем на кнопку "Original size" - наше изображение растянется на максимально допустимый размер (на весь его размер). Сверху настроек выравниваем изображение по центру контейнера.

Смотрим макет и теперь выравниваем изображение по модульной сетке. У меня получилось +- так:

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

Повторяем действия, добавляем изображение, загружаем файл "coin.png" и уменьшаем его. Помещаем его примерно так