From fb324985be4ace278dfc08a7116545f24270f49c Mon Sep 17 00:00:00 2001 From: Dmytro Khromiak Date: Fri, 6 Mar 2026 22:32:11 +0200 Subject: [PATCH 1/3] add task solution --- readme.md | 6 +++--- src/index.html | 44 +++++++++++++++++++++++++++++++++++++++++++- src/style.css | 44 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 89 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index b8c3a1d3f2..a56e9e539c 100644 --- a/readme.md +++ b/readme.md @@ -2,7 +2,7 @@ Implement the [Stars Block](https://www.figma.com/file/ojkArVazq7vsX0nbpn9CxZ/Moyo-%2F-Catalog-(ENG)?node-id=11325%3A2960) used in a card and catalog. -Hold `Alt` key (`Option` on MacOS) to measure distances in Figma. +Hold `Alt` key (`Option` on MacOS) to measure distances in Figma. > Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline) @@ -22,8 +22,8 @@ Hold `Alt` key (`Option` on MacOS) to measure distances in Figma. ❗️ 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://whomngmnt.github.io/layout_stars/) +- [TEST REPORT LINK](https://whomngmnt.github.io/layout_stars/report/html_report/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. diff --git a/src/index.html b/src/index.html index 3e4d7e8ab0..7c629cd33f 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,48 @@ /> -

Stars

+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css index a63fa10d43..74fdb5be87 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,43 @@ -/* add styles here */ +body { + margin: 0; + padding: 0; +} + +.stars { + display: flex; + line-height: 0; + font-size: 0; +} + +.stars__star { + width: 16px; + height: 16px; + background-image: url(./images/star.svg); + background-size: 16px 16px; + background-position: left top; + margin-right: 4px; +} + +.stars__star:last-child { + margin-right: 0; +} + +.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 581d22a5c261eb7a297b827a891a175221f1abc6 Mon Sep 17 00:00:00 2001 From: Dmytro Khromiak Date: Sat, 7 Mar 2026 00:36:02 +0200 Subject: [PATCH 2/3] add task solution --- src/images/Star.png | Bin 0 -> 364 bytes src/images/Star1.png | Bin 0 -> 391 bytes src/style.css | 7 +++---- 3 files changed, 3 insertions(+), 4 deletions(-) create mode 100644 src/images/Star.png create mode 100644 src/images/Star1.png diff --git a/src/images/Star.png b/src/images/Star.png new file mode 100644 index 0000000000000000000000000000000000000000..5af3107f45e3867ba272a2d293fb0f2db60e7fa9 GIT binary patch literal 364 zcmeAS@N?(olHy`uVBq!ia0vp^d>}Rl8<3oNC%zs?aTa()7Bet#3xhBt!>l*8o|0J>k`Ftg=5hcO-X(i=}MX3yKnd!NS^EOUP2Fg75 zba4!+V4NEGmbY0!K=jFS`&Vpz3FZrgukgO&c*`+&K`E29lY4>iO^3k$lFssMyiysD zRG;jq-t)VHrSW)M;)>bJEPocf^7>YLergcsQWJX@m6khc6E3}0RO->cXRdcpPydJL zk&a*UBJXNjBo^K(l$p=Nui8}o!0kvjUS^$pWK#6ei=HJS>+-DfC!4t>+Z06a3ZEXec-gPZz7Y#gOYSrHsL6Bq zOk|MP&o&RP`XAYlUz<%JzshdDAGkCiCxvX3_@Py!{;0mL9-mtaCb+F|T9*4knNUSRLe%$v9G0S@rFAM!r%Tz&PDbn5x?tK$3G zd5Z|8+FAGiJtDz3(&W3IOB@cyGGRA8Fk05cPCk)Ei4lK}KA`y`3ISXY)#9C})SSeW zo|7;tYKCkcA$Gx(w$~)4_~*|OCl=hm<>Fn- Date: Sat, 7 Mar 2026 07:58:18 +0200 Subject: [PATCH 3/3] add task solution --- src/style.css | 40 ++-------------------------------------- src/styles/stars.css | 37 +++++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 38 deletions(-) create mode 100644 src/styles/stars.css diff --git a/src/style.css b/src/style.css index e696a85b07..0cb9bec636 100644 --- a/src/style.css +++ b/src/style.css @@ -1,42 +1,6 @@ +@import './styles/stars.css'; + body { margin: 0; padding: 0; } - -.stars { - display: flex; -} - -.stars__star { - width: 16px; - height: 16px; - background-image: url(./images/star.svg); - background-size: 13px 12px; - background-repeat: no-repeat; - background-position: center; - margin-right: 4px; -} - -.stars__star:last-child { - margin-right: 0; -} - -.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); -} diff --git a/src/styles/stars.css b/src/styles/stars.css new file mode 100644 index 0000000000..edc0d26fae --- /dev/null +++ b/src/styles/stars.css @@ -0,0 +1,37 @@ +.stars { + display: flex; +} + +.stars__star { + width: 16px; + height: 16px; + background-image: url(./images/star.svg); + background-size: 13px 12px; + background-repeat: no-repeat; + background-position: center; + margin-right: 4px; +} + +.stars__star:last-child { + margin-right: 0; +} + +.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); +}