Hero-блок и кнопка
Теперь главная страница: нажмите «Главная» в окне просмотра. Наверху находится hero-блок, секция с заголовком и кнопкой «Смотреть афишу». В упражнении «Сначала мобильная версия» вы видели, что заголовок в 60 пикселей слишком велик для телефона. Поэтому заголовок — text-4xl на телефоне и md:text-6xl от 768 px и шире, а внутренний отступ hero-блока тоже меняется: py-12 md:py-20.
Ссылка «Смотреть афишу» снова должна выглядеть как кнопка. Ссылка — строчный элемент, поэтому ей нужен inline-block, иначе её внутренние отступы не оттолкнут текст над ней. А кнопке нужны состояния из урока «Наведение, фокус и другие состояния»:
hover:bg-gold/80: под указателем мыши золотой цвет при 80% непрозрачности, поэтому сквозь него немного просвечивает кремовый фон и кнопка становится светлее. Цвета вашей темы работают с модификатором непрозрачности так же, как цвета самого Tailwind.transition-colorsделает изменение плавным.focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-night: тёмный контур с небольшим зазором для тех, кто перемещается по странице клавишейTab.
Задание
- 1
В
index.htmlзамените классheroу hero-блока наpy-12 text-center md:py-20. Егоh1задайте классыfont-display text-4xl font-bold text-night md:text-6xl, а абзацу —mt-4 text-lg. - 2
Замените класс
buttonу ссылки «Смотреть афишу» наmt-8 inline-block rounded-full bg-gold px-6 py-3 font-bold text-night. - 3
Добавьте кнопке состояния:
transition-colors hover:bg-gold/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-night. Чтобы увидеть контур, щёлкните по пустому месту в окне просмотра и несколько раз нажмитеTab.