From 8a5e09e373ceb659e85ece727353b6328206ea6a Mon Sep 17 00:00:00 2001 From: Denis Reznik Date: Sat, 19 Aug 2023 23:14:06 +0300 Subject: [PATCH 1/3] add task solution --- readme.md | 21 +++++++++++++++------ src/index.html | 45 ++++++++++++++++++++++++++++++++++++++++++++- src/style.css | 31 +++++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 7 deletions(-) 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); +} From 03b8da418320472c96c685a3d8c589b53916d306 Mon Sep 17 00:00:00 2001 From: Denis Reznik Date: Sun, 20 Aug 2023 21:21:44 +0300 Subject: [PATCH 2/3] fix task solution --- src/index.html | 44 +++++++++++++++++++++----------------------- src/style.css | 22 +++++++++++++++++----- 2 files changed, 38 insertions(+), 28 deletions(-) diff --git a/src/index.html b/src/index.html index c371bf8377..5d3a526ba0 100644 --- a/src/index.html +++ b/src/index.html @@ -1,4 +1,3 @@ - @@ -8,49 +7,48 @@ Stars - -
+
-
-
+
+
-
-
-
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css index d32ab70992..45ed8a667a 100644 --- a/src/style.css +++ b/src/style.css @@ -22,10 +22,22 @@ body { margin-right: 4px; } -.stars--1, -.stars--2, -.stars--3, -.stars--4, -.stars--5 { +.stars--1 > .stars__star:nth-child(-n + 1) { + background-image: url(./images/star-active.svg); +} + +.stars--2 > .stars__star:nth-child(-n + 2) { + background-image: url(./images/star-active.svg); +} + +.stars--3 > .stars__star:nth-child(-n + 3) { + background-image: url(./images/star-active.svg); +} + +.stars--4 > .stars__star:nth-child(-n + 4) { + background-image: url(./images/star-active.svg); +} + +.stars--5 > .stars__star:nth-child(-n + 5) { background-image: url(./images/star-active.svg); } From e24f96199c5f7da95cc3e53e4d7aea8487af7e0a Mon Sep 17 00:00:00 2001 From: Denis Reznik Date: Tue, 22 Aug 2023 21:43:30 +0300 Subject: [PATCH 3/3] add task solution --- src/index.html | 5 +++++ src/style.css | 20 ++++---------------- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/src/index.html b/src/index.html index 5d3a526ba0..6189de0ad2 100644 --- a/src/index.html +++ b/src/index.html @@ -15,6 +15,7 @@
+
@@ -22,6 +23,7 @@
+
@@ -29,6 +31,7 @@
+
@@ -36,6 +39,7 @@
+
@@ -43,6 +47,7 @@
+
diff --git a/src/style.css b/src/style.css index 45ed8a667a..405991f328 100644 --- a/src/style.css +++ b/src/style.css @@ -22,22 +22,10 @@ body { margin-right: 4px; } -.stars--1 > .stars__star:nth-child(-n + 1) { - background-image: url(./images/star-active.svg); -} - -.stars--2 > .stars__star:nth-child(-n + 2) { - background-image: url(./images/star-active.svg); -} - -.stars--3 > .stars__star:nth-child(-n + 3) { - background-image: url(./images/star-active.svg); -} - -.stars--4 > .stars__star:nth-child(-n + 4) { - background-image: url(./images/star-active.svg); -} - +.stars--1 > .stars__star:nth-child(-n + 1), +.stars--2 > .stars__star:nth-child(-n + 2), +.stars--3 > .stars__star:nth-child(-n + 3), +.stars--4 > .stars__star:nth-child(-n + 4), .stars--5 > .stars__star:nth-child(-n + 5) { background-image: url(./images/star-active.svg); }