HTML: Терминал

В этом испытании вы реализуете терминал с кодом и проработаете навыки работы с тегом <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">&lt;section</span> <span class="code-attr">class</span>=&quot;<span class="code-string">card</span>&quot;<span class="code-tag">&gt;</span>

Здесь вы можете увидеть несколько различных мнемоник. Их полезно знать, так как они часто используются при создании веб-приложений.

• < — знак «меньше». Он используется при открытии тега.
• > — знак больше. Он используется при закрытии тега.
• " — двойные кавычки.

Важно сохранить форматирование. Попробуйте поиграться с этой частью кода и посмотрите, как это отобразится в браузере.

Подсказки

• <pre> — тег для вставки отформатированного текста. Подробнее можно прочитать на Code Basics
• Внешний отступ снизу необходимо создать у шапки, но не у каждой кнопки
• Пути к шрифту:
  • ../assets/fonts/JetBrainsMono-Regular.woff2