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><section class="card">
<h1>Nike Air Max</h1>
<img src="./images/airmax2020.png" alt="Nike Air Max">
<button>Buy</button>
</section></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 theinline-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.