Гибкий блок. Задание 2

Создадим «Гибкий блок» с текстом, вращающимся и двигающимся элементами. Для примера возьмём вымышленную выставку и создадим вот такой блок:

Выставка молодых

10 августа 2021, Москва

посетить выставку

«керамика, картины и мы»

Красная Площадь, 1, подъезд 6

художников

Иванова Лиза, Морозов Коля и Сидорова Катя

1

Для начала нам нужно создать «Гибкий блок».
Открываем панель с блоками и в самом верху выбираем «Гибкий блок»

2

Теперь заходим в редактирование блока и удаляем все, что по умолчанию есть в блоке. Выделите мышью все элементы и нажмите ⌫ Backspace

3

Заливаем фон цветом, добавляем текст и кнопку

Напоминаем, чтобы вызвать настройки, нажмите клавишу табуляции ↹ Tab

4

Итак, мы добавили в блок все основные элементы. Теперь заполним его информацией и распределим её

Добавляем весь текст, который должен быть в блоке

5

Приступим к дизайну блока: распределим текст, настроим его цвет, кнопку, добавим дополнительные элементы

Разделим текст на две части, чтобы слово «художников» сместить правее и освободить место для доп. элемента

Распределим остальные элементы по блоку так, как нравится. Но не стоит забывать про поведение пользователя на странице

6

Добавим анимацию в блок.
В этом примере мы используем вращение и движение элементов

В настройках в разделе «Вращение и движение» выбираем в выпадающем списке «Вращение». Настраиваем характер, центр и скорость вращения. Нажмите «Воспроизвести», чтобы посмотреть результат

Теперь добавим движение на стрелку. В настройках в разделе «Вращение и движение» выбираем в выпадающем списке «Движение». Настраиваем направление, расстояние, характер движения и паузу. Нажмите «Воспроизвести», чтобы посмотреть результат

7

Адаптируем блок для различных устройств

Подбираем размер текста, перетаскиваем элементы так, чтобы они не выходили за границы контейнера

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

8