MKLNKs / layout_product-cards

Product cards

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

• DEMO LINK
• TEST REPORT LINK

Follow this instruction

---

Disable Multiplayer Cursors in figma to hide other cursors (Learn how)

---

❗️❗️❗️ DON'T FORGET TO PROOFREAD YOUR CODE WITH CHECKLIST BEFORE SENDING YOUR PULL REQUEST❗️❗️❗️

The task

❗️❗️❗️ In order to use SCSS delete the style.css file and change the <link> in the index.html to:

<link rel="stylesheet" href="./styles/index.scss">

Create a pages with product card using flexbox basing on the mockup.

Requirements:

• reset browser's default margins
• card width is 200px including border
• use images from src/images
• change link styles on :hover
• follow styles from the mock
• add data-qa="card" attribute to the card block
• add data-qa="hover" attribute to the link

--> CHECKLIST

Tips & Hints

• Add ALL data-qa attributes required in the task
• If you use SCSS, check background-image: url() to be relative to the main.scss. So should start with ../images.
• Reuse stars block from Stars task and keep it operational. If you change stars--4 modifier to stars--2 or other - number of selected stars should change correctly.
• There should be only 2 BEM blocks in your code card and stars all the others are just card elements
• Item with the text Buy should be a link.
• Check font styles on the mockup. Use google fonts

---