krajnova/layout_moyo-header

Moyo header

1. Replace <your_account> with your Github username in the links
   • DEMO LINK
   • TEST REPORT LINK
2. Follow this instructions

---

The task

Create HTML page with the header using flexbox basing on this mockup.

Common mistakes

• Add data-qa="hover" and class="is-active" required for tests
• Do not use tabs. Use 2 spaces for indentation.
• Don't use repeated styles.
• Don't use extra elements for blue line. Figure out how to work with ::after
• Check font styles. Use google fonts

Requirements:

• pay attention the mock is adaptive. Develop the layout to fit on 1024px and 1200px the same as on the mock.
• reset browser default margins
• use images from src/images
• Use semantic tags. <header>, <nav>
• change links styles on :hover
• follow styles from the mock
• the link with blue color and line below is an active link. It should have class="is-active" and relevant styles.
• the link with only blue color is an example of :hover styles. Every link in the row should have blue color on :hover.
• add data-qa="hover" attribute to the 4th link for testing (Ноутбуки и компьютеры)

---