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