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:

• DEMO LINK
• TEST REPORT LINK

❗️ 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 ❗️