Kamzed / layout_product-cards

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Frontend practice with product cards

Main goal:

Create HTML pages with product card catalog. Understand flexbox usage. Create HTML layout from the mockup.

Use this mockup for development.

If you don't want to see other users cursors you can disable Multiplayer Cursors in figma. Learn how

Common mistakes

  • Do not use tabs. Use 2 spaces for indentation.
  • Don't use repeated styles.
  • Item with text 'Купить' should be a link.
  • Check font styles. Use google fonts

Requirements:

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

Screenshot of the card: screenshot


Read the guideline before start

Guideline

Result

About

License:GNU General Public License v3.0


Languages

Language:JavaScript 70.2%Language:HTML 18.5%Language:Shell 11.3%