Skip to content

oltarasov/layout_product-cards

 
 

Repository files navigation

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
  • 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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 89.6%
  • HTML 9.2%
  • Other 1.2%