add task solution

mate-academy · Nov 1, 2024 · 6eaf49a · 6eaf49a
1 parent 17db078
commit 6eaf49a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 59 deletions.
diff --git a/readme.md b/readme.md
@@ -27,7 +27,7 @@ Hold `Alt` key (`Option` on MacOS) to measure distances in Figma.
 
 ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
 
-- [ ] Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
-- [ ] Each BEM block has its own separate file
-- [ ] All `Typical Mistakes` from `BEM` lesson theory are checked.
-- [ ] Code follows all the [Code Style Rules ❗️](./checklist.md)
+- [x] Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
+- [x] Each BEM block has its own separate file
+- [x] All `Typical Mistakes` from `BEM` lesson theory are checked.
+- [x] Code follows all the [Code Style Rules ❗️](./checklist.md)
diff --git a/src/index.html b/src/index.html
@@ -16,54 +16,52 @@
   <!-- #endregion -->
 
   <body class="page">
-    <div class="container">
-      <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--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--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--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--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--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>
+    <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>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -2,24 +2,13 @@
   margin: 0;
 }
 
-.container {
-  height: 96px;
-
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-}
-
 .stars {
-  width: 96px;
-
   display: flex;
-  justify-content: space-between;
   flex-direction: row;
 }
 
 .stars__star {
-  margin: 2px 1.5px 1.5px 2px;
+  margin: 2px 5px 2px 2px;
   background-image: url(./images/star.svg);
   width: 13px;
   height: 12px;