Tabs are a common way of data representation on web pages. They are used as a substitute for the usual lists, when you need to store a large amount of information. It's not always possible to do it "neatly" using the standard elements. Therefore, you can use tabs, whose appearance and functionality can vary greatly from site to site.
In this challenge, you'll design tabs that work on mouse hover or on the occurrence of a keyboard focus event.
Markup
Links
Tabs are implemented through links. To ensure that clicking doesn't take you to another page, use the # char as the value of the href attribute.
Use the custom attribute data-tab to define the name of each link.
- For the HTML tab, the value of
html - For the CSS tab, the value of
css - For the JavaScript tab, the value of
js
Each link has a .tab-name class.
Tabs
Tabs are placed inside the .tabs-content container. Use the custom attribute data-tab-content to define a name for each tab.
- For the HTML tab, the value of
html - For the CSS tab, the value of
css - For the JavaScript tab, the value of
js
Each tab has a .tabs-content-item class. The tab content has three parts:
- Image. Use proper images from assets/img directory
- Second-level heading
- text
Text in HTML tab
HTML (HyperText Markup Language) is a set of rules by which the browser distinguishes headings from lists, tables from pictures, and so on. HTML appeared in 1993 and was intended to standardize the rules for displaying text within web pages.
Take a good look at the page you're on now. All of it, regardless of how it looks, is defined using HTML. This shows well that no matter how complex the page is, the whole point has remained the same for more than 20 years.
The word "language" in HTML should be taken as a rule. HTML by itself only marks up the data, but it doesn't interact with it in any way and doesn't visually modify it. All the work of displaying textual data and markup is done by the browser.
Text in CSS tab
CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document (web page) written with a markup language (usually HTML or XHTML). It can also be applied to any XML document, such as SVG or XUL.
Text in JavaScript tab
JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard. It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles.
The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O.
JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js.
"JavaScript" is a trademark of Oracle Corporation in the United States.
Styles
Link the Raleway font, which is in assets/fonts directory. For body, use this font with the following properties:
- Font size: 20px
- Line height: 1.5
- Font family: sans-serif
Columns
The elements inside the container with the class .tabs are arranged in three columns. Note that there should be no gaps inside the links. There should be no space between links.
The .tabs-content' stretches over all available columns. Each element within.tabs-content` is also a container which splits the content into three columns. The space between columns is 30 pixels.
Links
- Paddings: 20px
- The text is centered.
- There is no underline. Use the
text-decorationproperty - Background color:
#00adb5 - A solid 3-pixels border and a color of
#5ffbf1is added on hovering and/or focusing on the link
Wrapper tabs-content
- Background color:
#393e46
Elements tabs-content-item
- By default, all elements are hidden. Use the
displayproperty with the valuenone - When hovering or focusing on a link, the corresponding tab should appear. Use the
displayproperty with the valueblock - Paddings: 20 pixels each side
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.