Skip to content

mate-academy/layout_stars

Repository files navigation

Stars block

Implement the Stars Block used in a card and catalog. Follow

Here are the Layout Tasks Instructions

Requirements:

  • Reset browser's default margin
  • Add 6 stars blocks with 5 stars__star elements each.
  • Add stars--0, stars--1, stars--2 ... stars--5 modifiers to the blocks one per each
  • Don't add any other classes to the elements.
  • The block with stars--N modifier should have exactly N first stars active.
  • use background-image for stars (see images folder). Don't use <img> or <svg> tags.
  • The star size and the distance should be taken from Figma
  • Use display: flex for the stars block to avoid an issue with extra spaces between individual stars
  • Don't add vertical margins between blocks.
  • DON'T use gap property for flex container because it does not work in tests

Checklist

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

❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.

  • Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
  • Each BEM block has its own separate file
  • All Typical Mistakes from BEM lesson theory are checked.
  • Code follows all the Code Style Rules ❗️