/test-mate-layout_catalog

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

Frontend practice with catalog page

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

Follow this instruction

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

❗️❗️❗️ DON'T FORGET TO PROOFREAD YOUR CODE WITH CHECKLIST BEFORE SENDING YOUR PULL REQUEST❗️❗️❗️

The task

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

Requirements:

  • use Card and Header blocks from previous tasks but rewrite them using BEM and SCSS
  • Nav links color is not black any more
  • there should always be 4 cards in a row (not 2, 3 or 5)
    • use :nth-child(4n) to select every 4th element
    • use :nth-last-child(-n + 4) to select 4 last elements
  • cards should have fixed width and fixed distances between them
  • cards container should have fixed paddings (see 1024px example), bottom the same as top
  • use semantic tags. <header>, <nav>, <main>
  • add class is-active to the first link (Apple) in navigation
  • remove old data-qa attributes
  • add data-qa="nav-hover" (not just hover) to the 4th nav link for testing (Laptops & computers)
  • add data-qa="card" to the first card
  • add data-qa="card-hover" (not just hover) to the link Buy inside the first card

--> CHECKLIST

screenshot

Tips & Hints

Don't use flex gap property, it's not yet supported by tests.