From 46434b6c49fe0f870d0c00cc0e827f2152008a9d Mon Sep 17 00:00:00 2001 From: Misha Grinko Date: Fri, 19 May 2023 21:28:04 +0300 Subject: [PATCH] Update readme.md --- readme.md | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/readme.md b/readme.md index da8860d743..67cabc463e 100644 --- a/readme.md +++ b/readme.md @@ -12,24 +12,20 @@ ___ ## ❗️❗️❗️ DON'T FORGET TO PROOFREAD YOUR CODE WITH [CHECKLIST](https://github.com/mate-academy/layout_stars/blob/master/checklist.md) BEFORE SENDING YOUR PULL REQUEST❗️❗️❗️ ## The task -Implement the [`stars` block](https://www.figma.com/file/EIBkG1dy1jnK88YPO34Qir/Moyo-Catalog-updated) used in card and catalog. +Implement the [`stars` block](https://www.figma.com/file/EIBkG1dy1jnK88YPO34Qir/Moyo-Catalog-updated) used in a card and catalog. You DON'T need to implement the card now, just the stars block. ![Stars](./reference/stars.png) ___ -- You can find star images in `images` folder +- You can find star images in the `images` folder - Reset browser's default `margin` -- Implement 6 blocks with `stars` class - - Each block should have an extra class `stars--0`, `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 active (yellow) stars should be different for all 6 blocks depending on modifier class - - The first block (with `stars--0` modifier) 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` - - Add stars as background-images, not as "img" or "svg" tags -- 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 +- Implement 6 blocks with `stars` class. Each block should have 5 elements inside with the class `stars__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 the `stars` 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 exactly `N` first stars active + --- --> [CHECKLIST](https://github.com/mate-academy/layout_stars/blob/master/checklist.md) @@ -37,4 +33,4 @@ ___ - 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 because it does not work in tests +- !!! DON'T use `gap` property for `flex` container because it does not work in tests