Html: Terminal

Content layout fundamentals
Last update: 19 Jul 23:20
0
Students

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

Terminal on CSS

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

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.

  • &lt; is the "less than" sign that used to open a tag
  • &gt; is the "more than" sign that used to close a tag
  • &quot; 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

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests