Replace <your_account>
with your Github username and copy the links to Pull Request description:
Follow this instructions
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❗️❗️❗️
Implement the stars
block used in a card and catalog.
You DON'T need to implement the card now, just the stars block.
- You can find star images in the
images
folder - Reset browser's default
margin
- Implement 6 blocks with
stars
class. Each block should have 5 elements inside with the classstars__star
.- Stars should be added as centered background-images, not as "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
- Add one of the next extra classes (a
modifier
)stars--0
,stars--1
,stars--2
...stars--5
to each block - The block with
stars--N
modifier should have exactlyN
first stars active
--> CHECKLIST
- Check the design again. See the difference in size between star image and its container?
- There's no need to add vertical margins between rows of stars.
- !!! DON'T use
gap
property forflex
container because it does not work in tests