From 0c7f523e0e7e8ca8e820c34b2694f0176c7d35de Mon Sep 17 00:00:00 2001 From: RuslanMudruj <13072003.rm@gmail.com> Date: Tue, 15 Oct 2024 16:12:32 +0300 Subject: [PATCH 1/2] add task solution --- readme.md | 6 +-- src/index.html | 45 +++++++++++++++- src/style.css | 141 ++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 187 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index b8c3a1d3f2..78476c77ac 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://.github.io/layout_stars/) +- [TEST REPORT LINK](https://.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..c56a1c8e2b 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,49 @@ /> -

Stars

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css index a63fa10d43..1c90f1d1e4 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,140 @@ -/* add styles here */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-size: inherit; + vertical-align: baseline; +} + +/* Для забезпечення належного відображення */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +.stars { + display: flex; +} + +.stars__star { + box-sizing: border-box; + background-repeat: no-repeat; + height: 16px; + width: 16px; + background-position: center; + background-image: url('./images/star.svg'); +} + +.stars__star:not(:first-child) { + margin-left: 4px; +} + +.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 423b7033e50caccda9a8bfd387e7592e07fe11db Mon Sep 17 00:00:00 2001 From: RuslanMudruj <13072003.rm@gmail.com> Date: Tue, 15 Oct 2024 16:24:53 +0300 Subject: [PATCH 2/2] add task solution2 --- src/style.css | 113 +------------------------------------------------- 1 file changed, 1 insertion(+), 112 deletions(-) diff --git a/src/style.css b/src/style.css index 1c90f1d1e4..fa7166d492 100644 --- a/src/style.css +++ b/src/style.css @@ -1,117 +1,6 @@ -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { +body{ margin: 0; padding: 0; - border: 0; - font-size: 100%; - font-size: inherit; - vertical-align: baseline; -} - -/* Для забезпечення належного відображення */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} - -body { - line-height: 1; -} - -ol, -ul { - list-style: none; -} - -blockquote, -q { - quotes: none; } .stars {