Skip to content

Commit

Permalink
stars task solution 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeorgiusX
GeorgiusX committed Oct 27, 2023
1 parent 6999ee9 commit f7d8ba3
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 110 deletions.
84 changes: 42 additions & 42 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,53 +9,53 @@
</head>
<body>
<main class="container">
<ul class="stars stars--0">
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
</ul>
<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>

<ul class="stars stars--1">
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
</ul>
<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>

<ul class="stars stars--2">
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
</ul>
<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>

<ul class="stars stars--3">
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
</ul>
<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>

<ul class="stars stars--4">
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
</ul>
<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>

<ul class="stars stars--5">
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
</ul>
<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>
</main>
</body>
</html>
76 changes: 8 additions & 68 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,87 +2,27 @@ body {
margin: 0;
}

/* .container {
margin: 32px 22px;
width: 80px;
height: 78px;
} */

.stars {
display: flex;
margin: 0;
padding: 0;
width: 80px;
height: 12px;
}

.stars__star {
background-image: url(images/star.svg);
width: 16px;
height: 12px;
list-style: none;
height: 16px;
background-repeat: no-repeat;
background-position: center;
}

.stars__star:not(:last-child) {
margin-right: 4px;
}

.stars--1 li:nth-child(1) {
background-image: url(images/star-active.svg);
}

.stars--2 li:nth-child(1) {
background-image: url(images/star-active.svg);
}

.stars--2 li:nth-child(2) {
background-image: url(images/star-active.svg);
}

.stars--3 li:nth-child(1) {
background-image: url(images/star-active.svg);
}

.stars--3 li:nth-child(2) {
background-image: url(images/star-active.svg);
}

.stars--3 li:nth-child(3) {
background-image: url(images/star-active.svg);
}

.stars--4 li:nth-child(1) {
background-image: url(images/star-active.svg);
}

.stars--4 li:nth-child(2) {
background-image: url(images/star-active.svg);
}

.stars--4 li:nth-child(3) {
background-image: url(images/star-active.svg);
}

.stars--4 li:nth-child(4) {
background-image: url(images/star-active.svg);
}

.stars--5 li:nth-child(1) {
background-image: url(images/star-active.svg);
}

.stars--5 li:nth-child(2) {
background-image: url(images/star-active.svg);
}

.stars--5 li:nth-child(3) {
background-image: url(images/star-active.svg);
}

.stars--5 li:nth-child(4) {
background-image: url(images/star-active.svg);
}

.stars--5 li:nth-child(5) {
.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);
}

0 comments on commit f7d8ba3

Please sign in to comment.