diff --git a/readme.md b/readme.md index 67cabc463e..20af3ada58 100644 --- a/readme.md +++ b/readme.md @@ -1,22 +1,29 @@ # Stars block + Replace `` with your Github username and copy the links to Pull Request description: -- [DEMO LINK](https://.github.io/layout_stars/) -- [TEST REPORT LINK](https://.github.io/layout_stars/report/html_report/) + +- [DEMO LINK](https://reznik-denis.github.io/layout_stars/) +- [TEST REPORT LINK](https://reznik-denis.github.io/layout_stars/report/html_report/) > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline) -___ + +--- > Disable `Multiplayer Cursors` in figma to hide other cursors ([Learn how](https://mate-academy.github.io/layout_task-guideline/figma.html#multiplayer-cursors)) -___ + +--- ## ❗️❗️❗️ 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 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 the `images` folder - Reset browser's default `margin` - Implement 6 blocks with `stars` class. Each block should have 5 elements inside with the class `stars__star`. @@ -27,10 +34,12 @@ ___ - 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) ## Tips & Hints + - Check the design again. See the difference in size between star image and its -container? + container? - There's no need to add vertical margins between rows of stars. - !!! DON'T use `gap` property for `flex` container because it does not work in tests diff --git a/src/index.html b/src/index.html index 3963c1c4cd..c371bf8377 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,4 @@ + @@ -7,7 +8,49 @@ Stars + -

Stars

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css index e69de29bb2..d32ab70992 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,31 @@ +html { + box-sizing: border-box; +} + +body { + margin: 0; +} + +.stars { + display: flex; +} + +.stars__star { + background-image: url(./images/star.svg); + width: 16px; + height: 16px; + background-position: center; + background-repeat: no-repeat; +} + +.stars__star:not(:last-child) { + margin-right: 4px; +} + +.stars--1, +.stars--2, +.stars--3, +.stars--4, +.stars--5 { + background-image: url(./images/star-active.svg); +}