HTML: Terminal

In this challenge, you'll implement a terminal with code and develop your skills in working with the <pre> tag.

Styles

Terminal

• Paddings: 20 pixels vertical and 30 pixels horizontal
• Text color: white
• Background color: #263238
• Rounding corners: 5 pixels. Use the border-radius to set it

Header

The terminal header contains three round buttons with different colors. Reset the main button styles: border and background.

• Rounding corners: 50%
• Height and width: 11px
• Right indent: 5px
• Bottom margin: 20px

Button colors:

• Red: #ff5f56
• Yellow: #ffbd2e
• Green: #27c93f

Code

• For the pre tag reset the default margins
• For the code tag set the following styles:
  • Font size: 18px
  • Line height: 1.5
  • Font: JetBrains Mono. The font file is located at assets directory

Each logically distinct element in the code has its own color highlighting:

• Tag: #ff5370
• Property: #ffcb6b
• Property value: #c3e88d

Code formation markup

Use the following construction to get the formatted code:

<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;Buy&lt;/button&gt;
&lt;/section&gt;</code></pre>

Here you can see several different aliases. They are useful to know since they are widely used in creating web applications.

• < is the "less than" sign that used to open a tag
• > is the "more than" sign that used to close a tag
• " is double quotes

It's important to preserve the formatting. Try playing with this part of the code and see how it looks in the browser.

Tips

• <pre> is a tag for formatted text presented exactly as written in the HTML file. More on Code Basics
• When creating button use a display property with the inline-block value