27
Студентов
70%
Завершения
Создайте компонент клавиатуры, используя возможностей модулей CSS Flex и CSS Grid
В этом испытании вам доступна разметка верхнего ряда клавиатуры и вспомогательные классы. Ориентируясь на них, доработайте компонент в соответствии с макетом.
Клавиши
- По умолчанию, каждая клавиша занимает 2 колонки внутри сетки
- Текст внутри клавиш должен быть отцентрован по всем осям
- Расстояние между клавишами:
10px
- Мнемоники, которые помогут в вёрстке кнопок:
<
:<
>
:>
ᐊ
:ᐊ
ᐃ
:ᐃ
ᐁ
:ᐁ
ᐅ
:ᐅ
Исходя из расположении клавиш в шаблоне вам понадобиться создать дополнительные вспомогательные классы вида span-*
Подсказки
- Перед началом работы высчитайте оптимальное количество колонок внутри сетки. Размер каждой колонки будет равняться
1fr
. Для расчётов проанализируйте первый ряд, который доступен в файле index.html - Классы
p-0
,border-none
иw-100
помогут сверстать клавиши вверх и вниз
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.