В этом испытании вы реализуете терминал с кодом и проработаете навыки работы с тегом <pre>
.
Стили
Терминал
- Внутренние отступы: 20 пикселей по вертикали и 30 пикселей по горизонтали
- Цвет текста: белый
- Цвет фона:
#263238
- Закругление: 5 пикселей. Для закругления используйте свойство
border-radius
Шапка
Внутри шапки терминала содержится три круглые кнопки с разными цветами.
- Закругление: 50%
- Высота и ширина: 11px
- Отступ справа: 5px
- Внешний отступ снизу: 20px
Перед написанием стилей для кнопок сбросьте свойства border
и padding
для них
Цвета кнопок:
- Красный:
#ff5f56
- Желтый:
#ffbd2e
- Зелёный:
#27c93f
Код
- Для тега
pre
сбросьте стандартные внешние отступы - Для тега
code
установите следующие стили:- Размер шрифта: 18px
- Межстрочный интервал: 1.5
- Шрифт:
JetBrains Mono
. Файл шрифта находится в директории assets. Семейство шрифтов:monospace
Каждый логический элемент внутри кода имеет своё цветовое выделение:
- Тег:
#ff5370
- Атрибут:
#ffcb6b
- Значение атрибута:
#c3e88d
Вёрстка «кода»
Используйте следующую конструкцию для получения отформатированного кода:
<pre><code><span class="code-tag"><section</span> <span class="code-attr">class</span>="<span class="code-string">card</span>"<span class="code-tag">></span>
Здесь вы можете увидеть несколько различных мнемоник. Их полезно знать, так как они часто используются при создании веб-приложений.
<
— знак «меньше». Он используется при открытии тега.>
— знак больше. Он используется при закрытии тега."
— двойные кавычки.
Важно сохранить форматирование. Попробуйте поиграться с этой частью кода и посмотрите, как это отобразится в браузере.
Подсказки
<pre>
— тег для вставки отформатированного текста. Подробнее можно прочитать на Code Basics- Внешний отступ снизу необходимо создать у шапки, но не у каждой кнопки
- Пути к шрифту:
../assets/fonts/JetBrainsMono-Regular.woff2
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.