add task solution

mate-academy · Aug 19, 2023 · 8a5e09e · 8a5e09e
1 parent ab95b8d
commit 8a5e09e
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 7 deletions.
diff --git a/readme.md b/readme.md
@@ -1,22 +1,29 @@
 # Stars block
+
 Replace `<your_account>` with your Github username and copy the links to Pull Request description:
-- [DEMO LINK](https://<your_account>.github.io/layout_stars/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_stars/report/html_report/)
+
+- [DEMO LINK](https://reznik-denis.github.io/layout_stars/)
+- [TEST REPORT LINK](https://reznik-denis.github.io/layout_stars/report/html_report/)
 
 > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline)
-___
+
+---
 
 > Disable `Multiplayer Cursors` in figma to hide other cursors ([Learn how](https://mate-academy.github.io/layout_task-guideline/figma.html#multiplayer-cursors))
-___
+
+---
 
 ## ❗️❗️❗️ DON'T FORGET TO PROOFREAD YOUR CODE WITH [CHECKLIST](https://github.com/mate-academy/layout_stars/blob/master/checklist.md) BEFORE SENDING YOUR PULL REQUEST❗️❗️❗️
 
 ## The task
+
 Implement the [`stars` block](https://www.figma.com/file/EIBkG1dy1jnK88YPO34Qir/Moyo-Catalog-updated) used in a card and catalog.
 You DON'T need to implement the card now, just the stars block.
 
 ![Stars](./reference/stars.png)
-___
+
+---
+
 - You can find star images in the `images` folder
 - Reset browser's default `margin`
 - Implement 6 blocks with `stars` class. Each block should have 5 elements inside with the class `stars__star`.
@@ -27,10 +34,12 @@ ___
 - The block with `stars--N` modifier should have exactly `N` first stars active
 
 ---
+
 --> [CHECKLIST](https://github.com/mate-academy/layout_stars/blob/master/checklist.md)
 
 ## Tips & Hints
+
 - Check the design again. See the difference in size between star image and its
-container?
+  container?
 - There's no need to add vertical margins between rows of stars.
 - !!! DON'T use `gap` property for `flex` container because it does not work in tests
diff --git a/src/index.html b/src/index.html
@@ -1,3 +1,4 @@
+<!-- #region head -->
 <!doctype html>
 <html lang="en">
   <head>
@@ -7,7 +8,49 @@
     <title>Stars</title>
     <link rel="stylesheet" href="./style.css">
   </head>
+  <!-- #endregion -->
   <body>
-    <h1>Stars</h1>
+    <div class="stars">
+      <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">
+      <div class="stars__star stars--1"></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">
+      <div class="stars__star stars--2"></div>
+      <div class="stars__star stars--2"></div>
+      <div class="stars__star"></div>
+      <div class="stars__star"></div>
+      <div class="stars__star"></div>
+    </div>
+    <div class="stars">
+      <div class="stars__star stars--3"></div>
+      <div class="stars__star stars--3"></div>
+      <div class="stars__star stars--3"></div>
+      <div class="stars__star"></div>
+      <div class="stars__star"></div>
+    </div>
+    <div class="stars">
+      <div class="stars__star stars--4"></div>
+      <div class="stars__star stars--4"></div>
+      <div class="stars__star stars--4"></div>
+      <div class="stars__star stars--4"></div>
+      <div class="stars__star"></div>
+    </div>
+    <div class="stars">
+      <div class="stars__star stars--5"></div>
+      <div class="stars__star stars--5"></div>
+      <div class="stars__star stars--5"></div>
+      <div class="stars__star stars--5"></div>
+      <div class="stars__star stars--5"></div>
+    </div>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,31 @@
+html {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.stars {
+  display: flex;
+}
+
+.stars__star {
+  background-image: url(./images/star.svg);
+  width: 16px;
+  height: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.stars__star:not(:last-child) {
+  margin-right: 4px;
+}
+
+.stars--1,
+.stars--2,
+.stars--3,
+.stars--4,
+.stars--5 {
+  background-image: url(./images/star-active.svg);
+}