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

CSS: Вёрстка на Grid 3 сообщения
Обновлено: 31 мая, 09:41
27
Студентов
70%
Завершения

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

Keyboard in CSS

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

Клавиши

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

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

Подсказки

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

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

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

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