703
Студента
78%
Завершения

Timeline — распространённый приём подачи информации на веб-сайтах. Это одновременно информативный и визуальный инструмент, позволяющий быстро донести важные этапы для пользователя.

Существует множество различных дизайнов для создания временной шкалы и одну из них вы реализуете в этом испытании.

Результатом выполнения задания станет следующий макет:

Timeline HTML CSS

Вся необходимая вёрстка уже представлена в файле index.html. Допишите стили для нужных классов. Сделайте их без привязки к определённым тегам. Это позволит использовать не только ту структуру, которая дана, но и построить timeline на других тегах.

Базовые стили обёртки timeline

  • Внутренние отступы: 30px сверху, 0px справа, 30 пикселей снизу и 50px слева.
  • От обёртки строится вертикальная черта. Она должна растягиваться на 100 процентов высоты обёртки. Ширина линии: 2px, цвет: #fff.
  • Внешние отступы: 0px

Базовые стили элементов timeline

  • Внешний отступ снизу: 100px. У последнего элемента не должно быть отступа.

Базовый стиль круга элемента timeline

  • Ширина и высота: 20px
  • Цвет: #80fcff
  • Отступ сверху от элемента timeline: 15%
  • Круг должен быть отцентрован относительно вертикальной линии.

Для закругления используйте свойство border-radius со значением 50%.

Подсказки

  • Подумайте, какие значения left имеют вертикальная линия и круг. Исходите из ширины элементов и внутренних отступов обёртки .timeline
  • В качестве вертикальной черты вы можете использовать псевдоэлемент или свойство border. В последнем случае необходимо компенсировать внутренние отступы слева и сделать их 48px

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

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

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