From 5a750c88e0a1b8e6ac002d232e470b8ee3cb0e07 Mon Sep 17 00:00:00 2001 From: DmutroHavriliuk Date: Tue, 28 Jul 2026 11:22:30 +0200 Subject: [PATCH 1/2] add task solution --- readme.md | 6 +++--- src/index.html | 52 ++++++++++++++++++++++++++++++++++++++++++++++++-- src/style.css | 27 ++++++++++++++++++++++++++ 3 files changed, 80 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index b8c3a1d3f2..c61653251d 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://DmutroHavriliuknpm run lint.github.io/layout_stars/) +- [TEST REPORT LINK](https://DmutroHavriliuk.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..5735efccb7 100644 --- a/src/index.html +++ b/src/index.html @@ -4,15 +4,63 @@ Stars + + -

Stars

+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css index a63fa10d43..ab741cbaff 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,28 @@ /* add styles here */ +body { + margin: 0; +} + +.stars { + display: flex; +} + +.stars__star { + width: 16px; + height: 16px; + margin-right: 4px; + + background: url('./images/star.svg') center no-repeat; +} + +.stars__star:last-child { + margin-right: 0; +} + +.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'); +} From 760f127df9b2c99c7db7ae543bd83b4fd8247621 Mon Sep 17 00:00:00 2001 From: DmutroHavriliuk Date: Mon, 10 Aug 2026 17:25:48 +0200 Subject: [PATCH 2/2] add task solution --- src/index.html | 5 +++++ src/star.css | 23 +++++++++++++++++++++++ src/style.css | 24 ------------------------ 3 files changed, 28 insertions(+), 24 deletions(-) create mode 100644 src/star.css diff --git a/src/index.html b/src/index.html index 5735efccb7..7259e80e3f 100644 --- a/src/index.html +++ b/src/index.html @@ -6,12 +6,17 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> + Stars + diff --git a/src/star.css b/src/star.css new file mode 100644 index 0000000000..921d6a9184 --- /dev/null +++ b/src/star.css @@ -0,0 +1,23 @@ +.stars { + display: flex; +} + +.stars__star { + width: 16px; + height: 16px; + margin-right: 4px; + + background: url('./images/star.svg') center no-repeat; +} + +.stars__star:last-child { + margin-right: 0; +} + +.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'); +} diff --git a/src/style.css b/src/style.css index ab741cbaff..0b1430ff8c 100644 --- a/src/style.css +++ b/src/style.css @@ -2,27 +2,3 @@ body { margin: 0; } - -.stars { - display: flex; -} - -.stars__star { - width: 16px; - height: 16px; - margin-right: 4px; - - background: url('./images/star.svg') center no-repeat; -} - -.stars__star:last-child { - margin-right: 0; -} - -.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'); -}