Hello developers, today in this blog, you'll learn to create an Emoji Stars Rating using HTML & CSS.
A star rating is a rating card to give a rating or grade for the service provided by the company or for the product quality. It is a form of review from the client to the company or the product. Here the review of the client shows an expression by an emoji symbol.
In this blog (Emoji Stars Rating), there are three stars on the webpage which is below the emoji. The client may rate the service by using the stars, which shows the expression depends upon the rate of the client. Also, it gives the command for each review.
The source code of this Emoji Stars Rating is given below, if you want the source code of this program, you can copy it. You can use this Emoji Stars Rating with your creativity and can take this project to the next level.
Emoji Stars Rating [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(#FED151, #DE981F);
}
.container{
width: 100%;
max-width: 360px;
}
.wrapper{
background: #f6f6f6;
border-radius: 10px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .content{
padding: 30px;
display: flex;
align-items: center;
flex-direction: column;
}
.wrapper .outer{
height: 135px;
width: 135px;
overflow: hidden;
}
.outer .emojis{
height: 500%;
display: flex;
flex-direction: column;
}
.outer .emojis li{
height: 20%;
width: 100%;
list-style: none;
transition: all 0.3s ease;
}
.outer li img{
height: 100%;
width: 100%;
}
#star-2:checked ~ .content .emojis .slideImg{
margin-top: -135px;
}
#star-3:checked ~ .content .emojis .slideImg{
margin-top: -270px;
}
.wrapper .stars{
margin-top: 30px;
}
.stars label{
font-size: 30px;
margin: 0 3px;
color: #ccc;
}
#star-1:hover ~ .content .stars .star-1,
#star-1:checked ~ .content .stars .star-1,
#star-2:hover ~ .content .stars .star-1,
#star-2:hover ~ .content .stars .star-2,
#star-2:checked ~ .content .stars .star-1,
#star-2:checked ~ .content .stars .star-2,
#star-3:hover ~ .content .stars .star-1,
#star-3:hover ~ .content .stars .star-2,
#star-3:hover ~ .content .stars .star-3,
#star-3:checked ~ .content .stars .star-1,
#star-3:checked ~ .content .stars .star-2,
#star-3:checked ~ .content .stars .star-3
{
color: #fd4;
}
.wrapper .footer{
border-top: 1px solid #ccc;
background: #f2f2f2;
width: 100%;
height: 55px;
padding: 0 20px;
border-radius: 0 0 10px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer span{
font-size: 17px;
font-weight: 400;
}
.footer .text::before{
content: "Rate your experience";
}
.footer .numb::before{
content: "0 out of 3";
}
#star-1:checked ~ .footer .text::before{
content: "I don't like it";
}
#star-1:checked ~ .footer .numb::before{
content: "1 out of 3";
}
#star-2:checked ~ .footer .text::before{
content: "I just like it";
}
#star-2:checked ~ .footer .numb::before{
content: "2 out of 3";
}
#star-3:checked ~ .footer .text::before{
content: "I just love it";
}
#star-3:checked ~ .footer .numb::before{
content: "3 out of 3";
}
input[type="radio"]{
display: none;
}
.credit a {
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana,Geneva,Tahoma,sans-serif;
margin-top: 20px;
}
Thank you for reading our blog. If you face any problem in creating this Emoji Stars Rating using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team