diff --git a/readme.md b/readme.md
index b8c3a1d3f2..895c9a9e13 100644
--- a/readme.md
+++ b/readme.md
@@ -2,7 +2,7 @@
Implement the [Stars Block](https://www.figma.com/file/ojkArVazq7vsX0nbpn9CxZ/Moyo-%2F-Catalog-(ENG)?node-id=11325%3A2960) used in a card and catalog.
-Hold `Alt` key (`Option` on MacOS) to measure distances in Figma.
+Hold `Alt` key (`Option` on MacOS) to measure distances in Figma.
> Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline)
@@ -13,7 +13,7 @@ Hold `Alt` key (`Option` on MacOS) to measure distances in Figma.
- Don't add any other classes to the elements.
- The block with `stars--N` modifier should have exactly `N` first stars active.
- use `background-image` for stars (see `images` folder). Don't use `<img>` or `<svg>` tags.
-- The star size and the distance should be taken from Figma
+- The star size and the distance should be taken from Figma<
- Use `display: flex` for the `stars` block to avoid an issue with extra spaces between individual stars
- Don't add vertical margins between blocks.
- DON'T use `gap` property for `flex` container because it does not work in tests
@@ -22,8 +22,8 @@ Hold `Alt` key (`Option` on MacOS) to measure distances in Figma.
❗️ 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://OlgaDnepr.github.io/layout_stars/)
+- [TEST REPORT LINK](https://OlgaDnepr.github.io/layout_stars/report/html_report/)
❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
diff --git a/src/index.html b/src/index.html
index 3e4d7e8ab0..5b97fb85de 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,3 +1,4 @@
+<!-- #region head -->
<!doctype html>
<html lang="en">
<head>
@@ -9,10 +10,54 @@
<title>Stars</title>
<link
rel="stylesheet"
- href="./style.css"
+ href="style.css"
/>
</head>
+ <!-- endregion -->
<body>
- <h1>Stars</h1>
+ <div class="box-stars">
+ <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>
+ </div>
</body>
</html>
diff --git a/src/style.css b/src/style.css
index a63fa10d43..2fbee23645 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1 +1,40 @@
-/* add styles here */
+body {
+ margin: 0;
+}
+
+.box-stars {
+ display: flex;
+ flex-direction: column;
+
+ /* justify-content: space-between; */
+
+ /* width: 96px;
+ height: 116px; */
+
+ /* padding: 22px; */
+
+ background: #fff;
+}
+
+.stars {
+ display: flex;
+
+ /* justify-content: space-between; */
+}
+
+.stars__star {
+ background-image: url(images/star.svg);
+ width: 16px;
+ height: 16px;
+ background-repeat: no-repeat;
+ background-position: center;
+ margin: 0 4px 0 0;
+}
+
+.stars--1 .stars__star:nth-child(-n + 1),
+.stars--2 .stars__star:nth-child(-n + 2),
+.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);
+}