HTML: Компонент «Клавиатура»

Обновлено: 17 апр., 23:20
99
Студентов
79%
Завершения

Создайте компонент клавиатуры, используя возможности модулей CSS Flex и CSS Grid:

Keyboard in CSS

В этом испытании вам доступна разметка верхнего ряда клавиатуры и вспомогательные классы. Ориентируясь на них, доработайте компонент по макету.

Клавиши

  • По умолчанию каждая клавиша занимает две колонки внутри сетки
  • Текст внутри клавиш должен быть отцентрован по всем осям
  • Расстояние между клавишами: 10px
  • Мнемоники, которые помогут в вёрстке кнопок:
    • <: &lt;
    • >: &gt;
    • : &#5130;
    • : &#5123;
    • : &#5121;
    • : &#5125;

Исходя из расположения клавиш в шаблоне, вам нужно создать дополнительные вспомогательные классы вида span-*.

Подсказки

  • Перед началом работы высчитайте оптимальное количество колонок внутри сетки. Размер каждой колонки будет равняться 1fr. Для расчетов проанализируйте первый ряд, который доступен в файле index.html
  • Классы p-0, border-none и w-100 помогут сверстать клавиши вверх и вниз

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

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

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

Отзывы

Аватар пользователя Антон
Антон 27 декабря 2022

Сделать клавиатуру - бесценно! :-) Спасибо за интересное испытание!