Timeline — распространённый приём подачи информации на веб-сайтах. Это одновременно информативный и визуальный инструмент, позволяющий быстро донести важные этапы для пользователя.
Существует множество различных дизайнов для создания временной шкалы и одну из них вы реализуете в этом испытании.
Результатом выполнения задания станет следующий макет:
Вся необходимая вёрстка уже представлена в файле 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
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.