[Урок 29] Первый сайт на Zero Block (11 часть - адаптируем третий блок)

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

Приступаем к адаптации

Тут немного элементов, но всё же есть с чем повозиться. Начнём с плавающего чёрного блока на фоне.

Для начала я увеличу высоту контейнера до 2254 пикселей, чтобы все элементы точно уместились. Вытягиваем чёрный блок по высоте +- на столько же.

Не забудьте его разблокировать!

Блокируем блок и оставляем его. Приступаем к редактированию текста.

Порядок расположения блоков будет такой:

1. Имя спикера
2. Изображения
3. Описание
4. Изображения (соц сети И так далее)

ЗАГЛОВОК "НЕМНОГО О СПИКЕРАХ" - уменьшаем размер шрифта до 25 и выравниваем по центру.

Марк Цукерберг - сужем контейнер блока с самим текстом, ставим размер шрифта 54 и делаем SPACING примерно на 1.05. выравниваем по центру.

Изображение помещаем под именем. Центруем.

У подложки не забываем нажимать SWITCH ON MOBILE ANIMATION в настройках (включаем анимацию на мобильном)

Ниже помещаем текст описание. Размер шрифта не трогаем, просто уменьшаем контейнер блока текста. Выравниваем по центру.

Иконки помещаем под текстом описания. Готово.

Аналогичные действия повторяем с блоком Павла.

ВНИМАНИЕ! Не забываем включить мобильную анимацию у нашего фона!

Видим, что рабочая область оказалась слишком большой - подтягиваем черный блок и размер контейнера.

Я уменьшил контейнер до 2112 пикселей.

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