Implement the Stars Block used in a card and catalog.
Hold Alt
key (Option
on MacOS) to measure distances in Figma.
Here are the Layout Tasks Instructions
- Reset browser's default
margin
- Add 6
stars
blocks with 5stars__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 exactlyN
first stars active. - use
background-image
for stars (seeimages
folder). Don't use<img>
or<svg>
tags. - The star size and the distance should be taken from Figma
- Use
display: flex
for thestars
block to avoid an issue with extra spaces between individual stars - Don't add vertical margins between blocks.
- DON'T use
gap
property forflex
container because it does not work in tests
❗️ 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
fromBEM
lesson theory are checked. - Code follows all the Code Style Rules ❗️