Implement the Stars Block used in a card and catalog. Follow
Here are the Layout Tasks Instructions
- Reset browser's default
margin - Add 6
starsblocks with 5stars__starelements each. - Add
stars--0,stars--1,stars--2...stars--5modifiers to the blocks one per each - Don't add any other classes to the elements.
- The block with
stars--Nmodifier should have exactlyNfirst stars active. - use
background-imagefor stars (seeimagesfolder). Don't use<img>or<svg>tags. - The star size and the distance should be taken from Figma
- Use
display: flexfor thestarsblock to avoid an issue with extra spaces between individual stars - Don't add vertical margins between blocks.
- DON'T use
gapproperty forflexcontainer 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 MistakesfromBEMlesson theory are checked. - Code follows all the Code Style Rules ❗️
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent