fixing problems

mate-academy · Nov 1, 2024 · 22fa189 · 22fa189
1 parent bdc3231
commit 22fa189
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 50 deletions.
diff --git a/src/index.html b/src/index.html
@@ -13,48 +13,31 @@
     />
   </head>
   <body>
-    <div class="stars stars--0">
-      <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--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>
-      <div class="stars__star"></div>
-      <div class="stars__star"></div>
-      <div class="stars__star"></div>
-  </div>
-
+    <section class="stars">
+      <div class="stars stars--0">
+        <span class="stars__star"></span><span class="stars__star"></span><span class="stars__star"></span>
+        <span class="stars__star"></span><span class="stars__star"></span>
+      </div>
+      <div class="stars stars--1">
+        <span class="stars__star"></span><span class="stars__star"></span><span class="stars__star"></span>
+        <span class="stars__star"></span><span class="stars__star"></span>
+      </div>
+      <div class="stars stars--2">
+        <span class="stars__star"></span><span class="stars__star"></span><span class="stars__star"></span>
+        <span class="stars__star"></span><span class="stars__star"></span>
+      </div>
+      <div class="stars stars--3">
+        <span class="stars__star"></span><span class="stars__star"></span><span class="stars__star"></span>
+        <span class="stars__star"></span><span class="stars__star"></span>
+      </div>
+      <div class="stars stars--4">
+        <span class="stars__star"></span><span class="stars__star"></span><span class="stars__star"></span>
+        <span class="stars__star"></span><span class="stars__star"></span>
+      </div>
+      <div class="stars stars--5">
+        <span class="stars__star"></span><span class="stars__star"></span><span class="stars__star"></span>
+        <span class="stars__star"></span><span class="stars__star"></span>
+      </div>
+    </section>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1,17 +1,19 @@
-* {
+
+body, html, section {
   margin: 0;
+  padding: 0;
 }
 
 .stars {
   display: flex;
-  width: fit-content;
 }
 
 .stars__star {
-  width: 16px;
-  height: 16px;
-  background-image: url("./images/star.svg");
+  width: 20px;
+  height: 20px;
+  background-image: url('./images/star.svg');
   background-size: cover;
+  margin-right: 5px;
 }
 
 .stars--0 .stars__star:nth-child(-n+0),
@@ -20,6 +22,5 @@
 .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");
+  background-image: url('./images/star-active.svg');
 }
-