Html: Hero Section

CSS: Основы Flex 41 сообщение
Обновлено: 23 мая, 12:03
291
Студент
64%
Завершения

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

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

Hero Section на CSS

Макет

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

Базовые настройки макета

  • Межстрочный интервал: 2.3. Установите его для <body>
  • Внутренние отступы у колонок — по 30 пикселей слева и справа
  • Внутренние отступы контейнера — по 100 пикселей сверху и снизу

Подсказки

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

Для полного доступа к испытанию нужен базовый план

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

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