[Урок 32] Первый сайт на Zero Block (14 часть - пятый блок - оптимизация)

Всем доброго вечера. Это предпоследний урок серии "Первый сайт на Zero block". Не забывайте делать выбор в опросе - какой сайт будем делать дальше. Это очень важно.

Сейчас мы займёмся оптимизацией пятого экрана - экран с тарифами. Поехали!)

Открываем тильду и идём в мобильную версию пятого экрана

Выглядит не очень. Изменим это. Кстати, я отдалил рабочую область до 50%. Не забывайте этим пользоваться!

Шаг 1. Увеличиваем размер контейнера

Я поставлю 1848px. Скорее всего этого хватит. Изменить высоту можно в основных настройках - параметр GRID CONTAINER HEIGHT.

Шаг 2. Заголовок

Текстовый блок "Дешевле, чем тебе кажется." Открываем его настройки и изменяем размер шрифта до 34. Выравниваем текстовый блок по центру.

Шаг 3. Уменьшаем фон карточек прайса

Помещаем первую карточку по центру и изменяем его ширину до 296 пикселей. Высоту отредактируем чуть позже.

Шаг 4. Помещаем все элементы в карточку

И работаем с настройками текста:

"ОПТИМАЛЬНЫЙ" - размер шрифта 33. Выравниваем по центру.

ТЕКСТ ОПИСАНИЕ - размер шрифта 18. Выравниваем по центру.

ЦЕНА - размер шрифта 80. Выравниваем по центру

КНОПКА - размер шрифта 17. Размеры : (ширина) 231 на (высота)71 пиксель.

Подтягиваем высоту фона карточки до 569 пикселей. Смотрим.

Шаг 5. Повторяем четвертый шаг со второй карточкой.

Располагаем вторую карточку под первой. Смотрим.

Шаг 6. Уменьшаем рабочую область и публикуем

Возвращаемся к основным настройкам (GRID CONTAINER HEIGHT) и уменьшаем рабочую область до 1437 пикселей. Публикуем сайт и проверяем как выглядит всё это дело)

На этом всё. Осталось сделать подвал, этим мы займёмся в следующем уроке. Всем успехов!)