Frontend practice with catalog page

Main goal:

Create HTML page with catalog. Develop semantic page structure.

Use this mockup for development.

If you don't want to see other users cursors you can disable Multiplayer Cursors in figma. Learn how

Common mistakes

• 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

Requirements:

• 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 header
• reuse :hover styles for nav and link inside card from previous tasks (header, product-cards)
• reuse styles for nav-item with .is-active class applied from previous task header
• follow styles from the mock
• card's width is 200px without 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

Screenshot of the catalog page:

---

Read the guideline before start

Guideline

Result

• UPDATE DEMO LINK
• UPDATE TEST REPORT LINK