HTML: Терминал

Обновлено: 25 июля, 01:26
1507
Студентов
87%
Завершения

В этом испытании вы реализуете терминал с кодом и проработаете навыки работы с тегом <pre>.

Терминал на CSS

Стили

Терминал

  • Внутренние отступы: 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>

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

  • &lt; — знак «меньше». Он используется при открытии тега.
  • &gt; — знак больше. Он используется при закрытии тега.
  • &quot; — двойные кавычки.

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

Подсказки

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

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

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

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

Отзывы

Аватар пользователя Евгения
Евгения 13 сентября 2022

Спасибо за испытание!!! Очень интересное))