From fd19781e3f366b65b35ca46344386acd7d0e0f06 Mon Sep 17 00:00:00 2001 From: Oleksandr Robenko Date: Sun, 20 Aug 2023 21:30:03 +0300 Subject: [PATCH 1/3] solution for layout_stars --- readme.md | 4 +- src/index.html | 141 +++++++++++++++++++++++++++++++++++++++++++++++-- src/style.css | 40 ++++++++++++++ 3 files changed, 180 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index 67cabc463e..a26808b43b 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # 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://HokageHEL.github.io/layout_stars/) +- [TEST REPORT LINK](https://HokageHEL.github.io/layout_stars/report/html_report/) > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline) ___ diff --git a/src/index.html b/src/index.html index 3963c1c4cd..82112905ee 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - + Stars - -

Stars

+ +
+
    +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • +
+ +
    +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • +
+ +
    +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • +
+ +
    +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • +
+ +
    +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • +
+ +
    +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • + +
  • +
    +
    • +
+ +
+ + diff --git a/src/style.css b/src/style.css index e69de29bb2..4db9a9c80b 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,40 @@ +.page { + --star-size: 16px; +} + +.page__body { + margin: 0; + padding: 0; +} + +.stars { + display: inline-block; +} + +.stars__list { + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +.stars__item { + display: inline-block; + margin-right: 4px; +} + +.stars__star { + background-repeat: no-repeat; + background-position: center center; + width: var(--star-size); + height: var(--star-size); + +} + +.stars__star--inactive { + background-image: url(images/star.svg); +} + +.stars__star--active { + background-image: url(images/star-active.svg); +} From 02497a11e9991812699cb1e8b5d5e235b2a5eea6 Mon Sep 17 00:00:00 2001 From: Oleksandr Robenko Date: Sun, 20 Aug 2023 21:35:35 +0300 Subject: [PATCH 2/3] add minor changes v1.01 --- src/index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/index.html b/src/index.html index 82112905ee..b662052182 100644 --- a/src/index.html +++ b/src/index.html @@ -140,9 +140,6 @@
- - - From c8420d1275ec3a71cb74be40a592ba4e01dff0de Mon Sep 17 00:00:00 2001 From: Oleksandr Robenko Date: Mon, 21 Aug 2023 14:45:39 +0300 Subject: [PATCH 3/3] added sugesteed changes v1.1 --- src/index.html | 188 ++++++++++++++----------------------------------- src/style.css | 29 +++----- 2 files changed, 63 insertions(+), 154 deletions(-) diff --git a/src/index.html b/src/index.html index b662052182..c922ffacf3 100644 --- a/src/index.html +++ b/src/index.html @@ -1,145 +1,63 @@ - + - + Stars -
-
    -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • -
- -
    -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • -
- -
    -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • -
- -
    -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • -
- -
    -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • -
- -
    -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • - -
  • -
    -
    • -
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css index 4db9a9c80b..18a5862fe3 100644 --- a/src/style.css +++ b/src/style.css @@ -8,33 +8,24 @@ } .stars { - display: inline-block; -} - -.stars__list { display: flex; - list-style: none; - padding: 0; - margin: 0; -} - -.stars__item { - display: inline-block; - margin-right: 4px; } .stars__star { + display: inline-block; + padding: 0; + margin: 0 4px 0 0; + background-image: url(images/star.svg); background-repeat: no-repeat; - background-position: center center; + background-position: center; width: var(--star-size); height: var(--star-size); - -} - -.stars__star--inactive { - background-image: url(images/star.svg); } -.stars__star--active { +.stars.stars--1 .stars__star:nth-child(1), +.stars.stars--2 .stars__star:nth-child(-n+2), +.stars.stars--3 .stars__star:nth-child(-n+3), +.stars.stars--4 .stars__star:nth-child(-n+4), +.stars.stars--5 .stars__star:nth-child(-n+5) { background-image: url(images/star-active.svg); }