Skip to content

mate-academy/layout_catalog-test_task

Repository files navigation

Frontend practice with catalog page

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

  • use Header, Stars and Card blocks from previous tasks but rewrite them using BEM and SCSS
  • 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
  • nav links color is not black any more (nav links should have #060b35 color)
  • add class is-active to the first link (Apple) in navigation
  • use <main> tag for cards container
  • use grid for cards with different number of columns:
    • 1 for the smaller screens
    • 2 starting at 488px
    • 3 starting from 768px
    • 4 starting from 1024px
  • cards have fixed width - 200px
  • gap between cards should be - 46px horyzontally and 48px vertically
  • cards container(catalog) have fixed paddings (50px vertically and 40px horyzontally)

Make all the changes smooth on hover (during 300ms):

  • increase the card by 20 percent (neighboring cards should not be affected)
  • change the card title text color to #34568b when the card is hovered (.card:hover .card__title)
  • change navigation link text color to #00acdc
  • change the button background to #fff and text color to #00acdc on hover

Here are the Layout Tasks Instructions

Checklist

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

❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.

  • All component follow BEM and use SCSS
  • repaeted sizes and special colors are put to variables
  • Grid is used for the columns
  • cards are shown in 1, 2, 3 or 4 columns based on screen resolution
  • All changes on :hover are smooth
  • Code follows all the Code Style Rules ❗️