[Урок 35] Интернет-магазин на Zero Block (1 экран - часть 2)

Братва, всем привет. Продолжаем тему разработки интернет-магазина на Zero Block. Первый экран мы уже начали делать, не забудьте посмотреть первую часть.

Сегодня добавим оставшиеся блоки, разберёмся со шрифтами и сделаем крутое меню. Поехали!

Что у нас есть? А что осталось?

Посмотрим макет и начнём пожалуй со шрифтов.

Тексты и шрифты.

В текстах используется два шрифта - это Roboto и и Playfair Display.

Идём в настройки сайта и открываем вкладку со шрифтами.

Загружаем оба нужных нам шрифта.

Для этого рекомендую прочитать инструкцию: https://teletype.in/@sitodeal/UMydyStVl

Либо, переходим в настройки - шрифты.

В качестве заголовка выбираем Playfair, в качестве основного текста берём Roboto.

Оба шрифта имеются в наличии в basic fonts.

Когда шрифт добавлен возвращаемся к нулевому блоку.

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

Нажимаем на крестик в левом верхнем углу и добавляем текстовый блок "Add text".

Один используем в качестве заголовка, второй в качестве описания.

Работаем с заголовком.

Размер шрифта: 42px.

Начертание: medium или regular

Так же уменьшаем spacing до 1.3

Работаем с описанием.

Добавляем текст ; шрифт roboto ; размер шрифта: 18пх ; spacing 1.7 ; начертание normal

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

В очередной раз нажимаем на любимую кнопку с крестиком и добавляем две кнопки "Add button"

Указываем на обоих кнопках тексты - "Каталог" и "Блог".

Меняем в настройках цвет текста и фона.

Цвет текста 1 кнопки: чёрный | Цвет фона 1 кнопки: белый

Цвет текста 2 кнопки: белый | Цвет фона 1 кнопки: 629e0c

В параметре border убираем radius, либо ставим 0. Скругление нам не нужно.

Размеры кнопок: 200х55px

Размещаем кнопки на экране.

Вот так выглядит сайт в предпросмотре:

Ништяк. Приступаем к менюхе. Это последнее, что мы сделаем в этом уроке.

Меню.

В макете оно выглядит вот так:

Фона нет, несколько кнопок и логотип. Я хочу немного усложнить меню, сделать его не таким, как мы делали его в предыдущих уроках.

Мы сделаем его плавающим. И в последствии модернизируем его.

Уходим из Zero Block и добавляем блоки меню.

Добавляем меню - ME201 - Меню с логотипом слева.

Открываем основные настройки.

ОСНОВНЫЕ НАСТРОЙКИ

Здесь ставим поведение позиционирования меню - с наложением на следующий блок но без фиксирования.

НАСТРОЙКИ ФОНА

- Цвет фона меню: #f5f5f5

- Непрозрачность: 0%

ПУНКТЫ МЕНЮ

- Цвет: черный

- Выравнивание по правому краю

- Размер текста пунктов меню: 14пх

- Расстояние между пунктами: 40px

- Насыщенность: medium

- Шрифт: roboto

- Активный цвет пункта: 629e0c

- При наведении цвет пунта: 629e0c

ЛОГОТИП

Здесь нам нужно поставить только ширину изображения 70px (ширина взята исходя из параметров лого в макете).

Фух, тут вроде всё. Сохраняем и закрываем.

Открываем настройки контента.

СПИСОК ПУНКТОВ МЕНЮ

Добавляем все пункты, ссылки не указываем.

ЛОГОТИП

Просто загружаем изображение логотипа. Он есть в папке с материалами "logo.png".

Сохраняем и закрываем.

Смотрим, что у нас получилось.

У меня как-то так. Всё согласно нашему макету. Ну и отлично.
На этом всё, ждите новых уроков. Уже скоро продолжим!
Всем удачи!)