Skip to content

Latest commit

 

History

History
46 lines (37 loc) · 2.62 KB

readme.md

File metadata and controls

46 lines (37 loc) · 2.62 KB
Raw

Frontend practice with catalog page

Create an HTML page with a 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 anymore (nav links should have #060b35 color)
  • add the class is-active to the first link (Apple) in the navigation
  • use <main> tag for cards container
  • use the grid for cards with different numbers of columns:
    • 1 for the smaller screens
    • 2 starting at 488px
    • 3 starting from 768px
    • 4 starting from 1024px
  • cards have fixed width - 200px
  • the gap between cards should be - 46px horizontally and 48px vertically
  • cards container(catalog) have fixed paddings (50px vertically and 40px horizontally)

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

Important note: In this task, you are allowed to link *.scss files directly in HTML <link> tags using href attribute. This is possible because we use the Parcel library to bundle your solution's source code.

Checklist

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

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

  • All components follow BEM and use SCSS
  • Repeated 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 ❗️