Emoji Stars Rating using HTML & CSS

Emoji Stars Rating using HTML & CSS

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.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Emoji Stars Rating || Learningrobo</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> </head> <body> <div class="container"> <div class="wrapper"> <input type="radio" name="rate" id="star-1"> <input type="radio" name="rate" id="star-2"> <input type="radio" name="rate" id="star-3"> <input type="radio" name="rate" id="star-4"> <input type="radio" name="rate" id="star-5"> <div class="content"> <div class="outer"> <div class="emojis"> <li class="slideImg"><img src="https://cdn.pixabay.com/photo/2016/09/01/08/24/smiley-1635448__340.png" alt=""></li> <li><img src="https://cdn.pixabay.com/photo/2016/09/01/08/24/smiley-1635449__340.png" alt=""></li> <li><img src="https://cdn.pixabay.com/photo/2014/12/06/16/52/smiley-559124__340.png" alt=""></li> </div> </div> <div class="stars"> <label for="star-1" class="star-1 fas fa-star"></label> <label for="star-2" class="star-2 fas fa-star"></label> <label for="star-3" class="star-3 fas fa-star"></label> </div> </div> <div class="footer"> <span class="text"></span> <span class="numb"></span> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css 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;
}
We hope you would like this Emoji Stars Rating using HTML & CSS.

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.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome