Html: Hero Section

CSS: Основы Flex 14 сообщений
Обновлено: 08 сент., 16:58
110
Студентов
65%
Завершения

Термином Hero Section часто описывают заглавный блок сайта или лендинга. Его цель — максимальное выделение ключевой мысли и привлечение внимания в самые первые секунды нахождения пользователя на странице.

В этом испытании вы реализуете один из примеров такой секции:

Hero Section на CSS

Макет

Макет для вёрстки расположен на сервисе Figma. Используйте его для определения размера отступов, шрифтов и размера различных элементов. Изображение и шрифты находятся в директории assets.

Подсказки

  1. Определите размер основного контейнера. В этом вам помогут направляющие — вертикальные красные линии.
  2. Задайте горизонтальные внутренние отступы. Здесь тоже можно воспользоваться направляющими.
  3. Задайте вертикальные внутренние отступы. Ориентируйтесь по расстоянию от края макета до слоёв.
  4. Цифры «01» располагаются на 30 пикселей ниже своего изначального месторасположения в потоке документа.

Для полного доступа к испытанию нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов