add task solution fix

mate-academy · Oct 19, 2024 · e5afd3e · e5afd3e
1 parent b023f6b
commit e5afd3e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 22 deletions.
diff --git a/src/index.html b/src/index.html
@@ -20,34 +20,39 @@
       <div class="stars__star"></div>
       <div class="stars__star"></div>
     </div>
+
     <div class="stars stars--1">
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
     </div>
+
     <div class="stars stars--2">
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
     </div>
+
     <div class="stars stars--3">
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
     </div>
+
     <div class="stars stars--4">
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
     </div>
+
     <div class="stars stars--5">
       <div class="stars__star"></div>
       <div class="stars__star"></div>

diff --git a/src/style.css b/src/style.css
@@ -1,12 +1,15 @@
-/* add styles here */
-* {
+/* Zamiast selektora uniwersalnego * użyjemy stylowania dla elementów body */
+body {
   margin: 0;
+  padding: 0;
 }
 
+/* Ustawienie dla bloków z gwiazdkami */
 .stars {
   display: flex;
 }
 
+/* Ustawienia dla pojedynczej gwiazdki */
 .stars__star {
   background-image: url(./images/star.svg);
   background-position: center;
@@ -15,30 +18,17 @@
   width: 16px;
 }
 
+/* Dodanie odstępu między gwiazdkami, ale tylko od drugiej gwiazdki */
 .stars__star:not(:first-child) {
   margin-left: 4px;
 }
 
-.stars--0 .stars__star:nth-last-child(n + 6) {
-  background-image: url(./images/star-active.svg);
-}
-
-.stars--1 .stars__star:nth-last-child(n + 5) {
-  background-image: url(./images/star-active.svg);
-}
-
-.stars--2 .stars__star:nth-last-child(n + 4) {
-  background-image: url(./images/star-active.svg);
-}
-
-.stars--3 .stars__star:nth-last-child(n + 3) {
-  background-image: url(./images/star-active.svg);
-}
-
-.stars--4 .stars__star:nth-last-child(n + 2) {
-  background-image: url(./images/star-active.svg);
-}
-
+/* Aktywne gwiazdki - różne dla poszczególnych bloków z klasą stars--N */
+.stars--0 .stars__star:nth-last-child(n + 6),
+.stars--1 .stars__star:nth-last-child(n + 5),
+.stars--2 .stars__star:nth-last-child(n + 4),
+.stars--3 .stars__star:nth-last-child(n + 3),
+.stars--4 .stars__star:nth-last-child(n + 2),
 .stars--5 .stars__star:nth-last-child(n + 1) {
   background-image: url(./images/star-active.svg);
 }