Шапка и hero-блок

Добро пожаловать в итоговый проект курса Tailwind! Вы уже знаете достаточно, чтобы оформить целый сайт самостоятельно, и именно этим вы займётесь на этом уроке: главной страницей кошачьего приюта «Усики», от шапки до подвала.

В редакторе вы найдёте страницу в виде простого HTML без единого класса. В ней есть шапка с навигацией, hero-блок (section с id="hero"), карточки кошек, шаги по тому, как взять кошку, форма для связи и подвал. В конце body находится маленький скрипт кнопки тёмной темы из урока о тёмной теме. Страницу вы оформите за четыре упражнения, по одной части за раз. Только добавляйте классы, а сами элементы не трогайте: проверки ищут их.

В style.css мы подготовили всё, что нужно странице, кроме @import "tailwindcss";: строку, которая включает тёмную тему с помощью класса dark, и блок @theme с собственным цветом приюта, brand (почти такой же оранжевый, как orange-500, в оттенках 50, 100, 200 и с 400 по 700), и шрифтом для заголовков, font-display (Baloo 2 из Google Fonts, он подключён в первой строке). Поэтому можно писать bg-brand-500 или font-display, точно так же, как в уроке о настройке Tailwind. Хотите другой цвет или шрифт? Измените их в style.css, и вместе с ними изменится вся страница.

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

• Цвета. Один основной цвет для кнопок и акцентов (brand), один серый для текстов, линий и фонов (тёплый stone хорошо сочетается с оранжевым) и белый. Везде используйте одни и те же несколько оттенков, например brand-500 для кнопок и brand-600, когда на них наведена мышь.
• Размеры. Крупный размер для главного заголовка, поменьше для заголовков разделов (например, text-3xl) и обычный для всего остального. То же с отступами: несколько значений из шкалы, например 4, 6 и 12, которые повторяются снова и снова.
• Ширина. Многие посетители придут с телефона. Сначала продумайте узкий экран, а потом добавьте то, что меняется на более широких. Время от времени переключайте панель над предпросмотром на 375 px (телефон) и 1280 px (компьютер).

Проверки в этом уроке открытые: они проверяют, что вы сделали то, о чём просит задание (например, что шапка прилипает к верху и имеет фон), а не какие именно классы, цвета и размеры вы выбрали. Классы в заданиях — лишь предложения.

Совет: ваш код не сохраняется, когда вы уходите из упражнения, а следующее упражнение начинается с нашей версии страницы. Если вы хотите продолжить работу над собственным дизайном, скопируйте свой код (оба файла), прежде чем идти дальше, и вставьте его поверх нашего в следующем упражнении.