Html: Терминал

Основы вёрстки контента 7 сообщений
Обновлено: 20 сент., 08:49
183
Студента
89%
Завершения

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

Терминал на CSS

Стили

Терминал

  • Внутренние отступы: 20 пикселей по вертикали и 30 пикселей по горизонтали
  • Цвет текста: белый
  • Цвет фона: #263238
  • Закругление: 5 пикселей. Для закругления используйте свойство border-radius

Шапка

Внутри шапки терминала содержится три круглые кнопки с разными цветами. Сбросьте основные стили кнопки: border и background.

  • Закругление: 50%
  • Высота и ширина: 11px
  • Отступ справа: 5px
  • Внешний отступ снизу: 20px

Цвета кнопок:

  • Красный: #ff5f56
  • Желтый: #ffbd2e
  • Зелёный: #27c93f

Код

  • Для тега pre сбросьте стандартные внешние отступы
  • Для тега code установите следующие стили:
    • Размер шрифта: 18px
    • Межстрочный интервал: 1.5
    • Шрифт: JetBrains Mono. Файл шрифта находится в директории assets

Каждый логический элемент внутри кода имеет своё цветовое выделение:

  • Тег: #ff5370
  • Атрибут: #ffcb6b
  • Значение атрибута: #c3e88d

Вёрстка «кода»

Используйте следующую конструкцию для получения отформатированного кода:

<pre><code>&lt;section class=&quot;card&quot;&gt;
  &lt;h1&gt;Nike Air Max&lt;/h1&gt;
  &lt;img src=&quot;./images/airmax2020.png&quot; alt=&quot;Nike Air Max&quot;&gt;
  &lt;button&gt;Купить&lt;/button&gt;
&lt;/section&gt;</code></pre>

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

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

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

Подсказки

  • <pre> — тег для вставки отформатированного текста. Подробнее можно прочитать на Code Basics
  • При создании кнопок вам понадобится свойство display со значением inline-block

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

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

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