In this challenge, you'll implement a terminal with code and develop your skills in working with the
- Paddings: 20 pixels vertical and 30 pixels horizontal
- Text color: white
- Background color:
- Rounding corners: 5 pixels. Use the
border-radiusto set it
The terminal header contains three round buttons with different colors. Reset the main button styles:
- Rounding corners: 50%
- Height and width: 11px
- Right indent: 5px
- Bottom margin: 20px
- For the
pretag reset the default margins
- For the
codetag set the following styles:
- Font size: 18px
- Line height: 1.5
JetBrains Mono. The font file is located at assets directory
Each logically distinct element in the code has its own color highlighting:
- Property value:
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.
<pre>is a tag for formatted text presented exactly as written in the HTML file. More on Code Basics
- When creating button use a
displayproperty with the
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.