Skip to content

Latest commit

 

History

History
35 lines (25 loc) · 1.96 KB

readme.md

File metadata and controls

35 lines (25 loc) · 1.96 KB
Raw

Product cards

Create a page with product card using flexbox, BEM and SCSS based on this mockup.

Here are the Layout Tasks Instructions

Requirements:

  • reset the browser's default margins
  • card width is 200px including border
  • use images from src/images
  • change link styles on :hover
  • add data-qa="card" attribute to the card block
  • add data-qa="hover" attribute to the link BUY
  • background-image: url() should be relative to the index.scss. So it should start with ../images.
  • Rewrite the stars block from the Stars task with SCSS and use it
  • Find the required font on google fonts and use.

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.

  • there 2 BEM blocks card and stars each in their own file
  • SCSS Nesting is used for elements, modifiers and pseudo-classes
  • SCSS Variables are used for main values and placed in a separate file
  • all stars--N modifiers work as expected (Highlight first N stars)
  • Code follows all the Code Style Rules ❗️