Kavster92 / layout_product-cards-en

Product Card Layout

Product cards

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

• DEMO LINK
• TEST REPORT LINK

Follow this instructions

---

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

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
• 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.
• Item with the 'Buy' text should be a link.
• Check font styles on the mockup. Use google fonts

---