Skip to content

palyvodaBoi/ma-test-1

Repository files navigation

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

screenshot


Tips & Hints

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published