پیشنمایش زنده
کد HTML
<div class="content-wrapper">
<div class="content">
<div class="rating-star">
<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
fill="#FC7614"
></path>
</svg>
</div>
<span class="title">How did we do?</span>
<p class="text">
Please let us know how we did with your support request. All feedback is
appreciated to help us improve our offering!
</p>
<div class="rating">
<input id="rate-1" class="radio" type="radio" name="rating" value="1" />
<label for="rate-1">1</label>
<input id="rate-2" class="radio" type="radio" name="rating" value="2" />
<label for="rate-2">2</label>
<input id="rate-3" class="radio" type="radio" name="rating" value="3" />
<label for="rate-3">3</label>
<input id="rate-4" class="radio" type="radio" name="rating" value="4" />
<label for="rate-4">4</label>
<input id="rate-5" class="radio" type="radio" name="rating" value="5" />
<label for="rate-5">5</label>
</div>
<button class="button">Submit</button>
</div>
</div>
کد CSS
.content-wrapper .content {
background-color: hsl(213, 19%, 18%);
display: flex;
flex-direction: column;
justify-content: space-between;
color: hsl(0, 0%, 100%);
width: 20rem;
height: 20rem;
padding: 20px;
border-radius: 30px;
}
.rating-star {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(217, 12%, 63%, 0.4);
border-radius: 50%;
}
.rating-star img {
width: 15px;
}
.title {
font-size: 20px;
font-weight: 700;
}
.text {
font-size: 15px;
font-weight: 400;
line-height: 1.3;
color: hsl(217, 12%, 63%);
}
.rating {
display: flex;
justify-content: space-between;
}
.rating label {
cursor: pointer;
width: 40px;
height: 40px;
background-color: hsla(217, 12%, 63%, 0.4);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 400;
}
.rating label:hover {
color: hsl(213, 19%, 18%);
background-color: hsl(0, 0%, 100%);
}
.rating input[type="radio"] {
display: none;
}
.rating input[type="radio"]:checked + label {
background-color: hsl(25, 97%, 53%);
color: var(--Dark-Blue);
font-weight: 400;
}
.button {
background-color: hsl(25, 97%, 53%);
color: hsl(213, 19%, 18%);
font-weight: 700;
text-transform: uppercase;
width: 100%;
padding: 10px;
border-radius: 30px;
border: none;
}
.button:hover {
background-color: hsl(0, 0%, 100%);
}
.center {
display: flex;
align-items: center;
text-align: center;
}
.select {
color: hsl(25, 97%, 53%);
background: hsl(217, 12%, 63%);
border-radius: 30px;
padding: 4px 20px;
}