Frontend practice with catalog page

Replace <your_account> with your Github username and copy the links to Pull Request description:

• DEMO LINK
• TEST REPORT LINK

Follow this instructions

---

Write styles in src/styles/main.scss instead of src/style.css.

---

The task

Create HTML page with catalog. Develop semantic page structure as shown on the mockup.

Requirements:

• use SCSS in this task
• pay attention the mock is responsive. Develop the layout to fit on 1024px and 1200px the same as on the mock.
• reset browser's default margins
• use images from src/images
• use semantic tags. <header>, <nav>, main
• pay attention to the shadow below the header
• reuse the card from Product cards
• reuse the header from Moyo header
• card's width is 200px inluding borders
• add attribute data-qa="nav-hover" to the 4th nav link for testing (Ноутбуки и компьютеры)
• add attribute data-qa="card" to the first card
• add attribute data-qa="card-hover" to the link Купить inside first card
• use class is-active for apple link

---

--> CHECKLIST

Common mistakes

• IMPORTANT Save and push your changes to github manually after deploy
• Add ALL the data-qa attributes and class="is-active" required in the task
• Do not use tabs. Use 2 spaces for indentation.
• Don't use repeated styles.
• Check font styles. Use google fonts
• Pay attention to :hover state

---