Skip to content

Latest commit

 

History

History
46 lines (35 loc) · 2.14 KB

readme.md

File metadata and controls

46 lines (35 loc) · 2.14 KB
Raw

Product cards

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

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

screenshot