Урок 07. Задания
⚡ Кратко
Три задания на границы и тени плюс четыре вопроса.
Задания
Задание 1. Две карточки
Сверстайте две карточки одинакового содержания: одну — на рамке, вторую — на тени. Скругление 12px, внутренний отступ 20px. Решите, какая уместнее для списка из двадцати элементов, и объясните почему.
Задание 2. Доступное поле
Сделайте текстовое поле с подписью, у которого при фокусе меняется цвет рамки и появляется кольцо. Проверьте навигацию клавишей Tab — фокус должен быть виден без мыши.
Задание 3. Всплывающая панель
Соберите панель уведомления: белый блок с крупным скруглением, тенью
уровня shadow-lg, кнопкой закрытия и цветной полосой слева
толщиной 4px.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Что делает класс border без указания цвета?
Вопрос 2
Чем удобен divide-y?
Вопрос 3
Какая тень уместна для модального окна?
Вопрос 4
Как правильно убрать стандартный контур фокуса?