- Replace
<your_account>
with your Github username in the links - Follow this instructions
Disable
Multiplayer Cursors
in figma to hide other cursors (Learn how)
Implement the stars
block used in the card.
You DON'T need to implement the card now, just the stars block.
- Reset browser's default
margin
- Implement 6 blocks with
stars
class- The first does not have additional classes
- The next 5 blocks should have an extra class
stars--1
,stars--2
...stars--5
(one extra class per block)
- Each block should have exactly 5 stars styled as in the card design
- The number of atcive (yellow) stars should be different for all 6 blocks depending on modifier class
- The first block (with just
stars
class) don't have active stars - The other 5 blocks have exactly N fisrt stars active where N is a numbers in an additional css class (modifier)
stars--N
- The first block (with just
- Each star in a block should have a class
stars__star
and no extra classes or inline styles- The star size is fixed (see in the design)
- The distance between the stars is also fixed
- Use
display: flex
for thestars
block to avoid an issue with extra spaces between individual stars