Take a Survey & Give Your Experience (Maa Blogger Posts)

Ticker

10/recent/ticker-posts

Take a Survey & Give Your Experience (Maa Blogger Posts)

AK Creative 1/05/2021 05:45:00 PM

Make a Rate & Review Page By Source Codes 


HTML CODE:-


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Stars Rating with Emoji Signs</title>

    <link rel="stylesheet" href="style.css">

    <script src="https://kit.fontawesome.com/a076d05399.js"></script>

</head>

<body>

  <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.shopify.com/s/files/1/1061/1924/products/8_large.png?v=1571606116" alt=""></li>

          <li><img src="https://www.pngfind.com/pngs/m/44-443236_i-m-a-20-something-and-i-don.png" alt=""></li>

          <li><img src="https://www.pngitem.com/pimgs/m/227-2278831_emoji-world-awesome-you-are-awesome-emoji-hd.png" alt=""></li>

          <li><img src="https://i.pinimg.com/originals/06/87/85/0687851cc6a9bb1213b5a12c9f8408ac.png" alt=""></li>

          <li><img src="https://freepngimg.com/thumb/categories/1632.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>

        <label for="star-4" class="star-4 fas fa-star"></label>

        <label for="star-5" class="star-5 fas fa-star"></label>

      </div>

    </div>

    <div class="footer">

      <span class="text"></span>

      <span class="numb"></span>

    </div>

  </div>


</body>

</html>


CSS CODE:-

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Script MT';
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(#dd2929,#f4ea15,#ab13ec);
}
.wrapper{
  background: #f2b675;
  max-width: 650px;
  width: 100%;
  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.2s 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;
}
#star-4:checked ~ .content .emojis .slideImg{
  margin-top: -405px;
}
#star-5:checked ~ .content .emojis .slideImg{
  margin-top: -540px;
}
.wrapper .stars{
  margin-top: 30px;
}
.stars label{
  font-size: 50px;
  margin: 0 3px;
  color: #b3b3b3;
}
#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,

#star-4:hover ~ .content .stars .star-1,
#star-4:hover ~ .content .stars .star-2,
#star-4:hover ~ .content .stars .star-3,
#star-4:hover ~ .content .stars .star-4,
#star-4:checked ~ .content .stars .star-1,
#star-4:checked ~ .content .stars .star-2,
#star-4:checked ~ .content .stars .star-3,
#star-4:checked ~ .content .stars .star-4,

#star-5:hover ~ .content .stars .star-1,
#star-5:hover ~ .content .stars .star-2,
#star-5:hover ~ .content .stars .star-3,
#star-5:hover ~ .content .stars .star-4,
#star-5:hover ~ .content .stars .star-5,
#star-5:checked ~ .content .stars .star-1,
#star-5:checked ~ .content .stars .star-2,
#star-5:checked ~ .content .stars .star-3,
#star-5:checked ~ .content .stars .star-4,
#star-5:checked ~ .content .stars .star-5{
  color: #c00;
}
.wrapper .footer{
  border-top: 1px solid #ccc;
  background: #d0d0d0;
  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: 35px;
  font-weight: 400;
}
.footer .text::before{
  content: "Rate Your Experience";
}
.footer .numb::before{
  content: "0 out of 5";
}
#star-1:checked ~ .footer .text::before{
  content: "I Just Hate It";
}
#star-1:checked ~ .footer .numb::before{
  content: "1 out of 5";
}
#star-2:checked ~ .footer .text::before{
  content: "I Don't Like It";
}
#star-2:checked ~ .footer .numb::before{
  content: "2 out of 5";
}
#star-3:checked ~ .footer .text::before{
  content: "Awesome";
}
#star-3:checked ~ .footer .numb::before{
  content: "3 out of 5";
}
#star-4:checked ~ .footer .text::before{
  content: "Like It";
}
#star-4:checked ~ .footer .numb::before{
  content: "4 out of 5";
}
#star-5:checked ~ .footer .text::before{
  content: "Love It";
}
#star-5:checked ~ .footer .numb::before{
  content: "5 out of 5";
}
input[type="radio"]{
  display: none;
}


OUTPUT



                             

                         












Post a Comment

35 Comments

  1. Unique KnowJanuary 5, 2021 at 5:47 PM

    😘😘😘😘😘😘😘👌👌👌👌👌👌👌

    ReplyDelete
  2. UnknownJanuary 5, 2021 at 5:53 PM

    Nice kallu

    ReplyDelete
  3. Max Gaur presentsJanuary 5, 2021 at 6:25 PM

    Awosam

    ReplyDelete
  4. UnknownJanuary 5, 2021 at 6:38 PM

    Nice

    ReplyDelete
  5. ArzuJanuary 5, 2021 at 6:39 PM

    Wonderful

    ReplyDelete
  6. akhJanuary 5, 2021 at 6:41 PM

    Perfect 👌 👌 👌 👌

    ReplyDelete
  7. UnknownJanuary 5, 2021 at 6:43 PM

    👌 👌 👌 👌

    ReplyDelete
  8. UnknownJanuary 5, 2021 at 6:44 PM

    Super

    ReplyDelete
  9. UnknownJanuary 5, 2021 at 6:46 PM

    👌 👌 👌 👌

    ReplyDelete
  10. UnknownJanuary 5, 2021 at 6:49 PM

    Excellent

    ReplyDelete
  11. UnknownJanuary 5, 2021 at 6:50 PM

    Perfect Work

    ReplyDelete
  12. Kanchan KirtimanJanuary 5, 2021 at 6:53 PM

    Fantastic 👌 👌 👌 👌

    ReplyDelete
  13. UnknownJanuary 5, 2021 at 6:54 PM

    Attractive

    ReplyDelete
  14. UnknownJanuary 5, 2021 at 6:55 PM

    Awesome
    👌 👌 👌 👌

    ReplyDelete
  15. UnknownJanuary 5, 2021 at 6:57 PM

    Great Job Boss

    ReplyDelete
  16. KritikaJanuary 5, 2021 at 7:00 PM

    very good experience

    ReplyDelete
  17. UnknownJanuary 5, 2021 at 7:03 PM

    Interesting

    ReplyDelete
  18. UnknownJanuary 5, 2021 at 7:04 PM

    Superb Work

    ReplyDelete
  19. UnknownJanuary 5, 2021 at 7:06 PM

    Good Job

    ReplyDelete
  20. KKJanuary 5, 2021 at 7:07 PM

    Nice

    ReplyDelete
  21. UnknownJanuary 5, 2021 at 7:09 PM

    Wonderful Work By HTML

    ReplyDelete
  22. UnknownJanuary 5, 2021 at 7:10 PM

    Perfect

    ReplyDelete
  23. UnknownJanuary 5, 2021 at 7:13 PM

    Good Thoughts

    ReplyDelete
  24. UnknownJanuary 5, 2021 at 7:16 PM

    Awesome

    ReplyDelete
  25. UnknownJanuary 5, 2021 at 7:17 PM

    Wonderful

    ReplyDelete
  26. son aJanuary 5, 2021 at 7:25 PM

    Good
    Guys

    ReplyDelete
  27. UnknownJanuary 5, 2021 at 7:26 PM

    Superb

    ReplyDelete
  28. UnknownJanuary 5, 2021 at 7:29 PM

    Good
    Perfect

    ReplyDelete
  29. UnknownJanuary 5, 2021 at 7:30 PM

    Excellent

    ReplyDelete
  30. UnknownJanuary 5, 2021 at 7:32 PM

    Excellent

    ReplyDelete
  31. ShubhamJanuary 5, 2021 at 8:11 PM

    Amazing

    ReplyDelete
  32. SuperJanuary 6, 2021 at 3:38 PM

    Good Job

    ReplyDelete
  33. MLLJanuary 6, 2021 at 3:39 PM

    Perfect 👌

    ReplyDelete
  34. FabulousJanuary 6, 2021 at 3:39 PM

    Perfect 👌

    ReplyDelete
  35. AnonymousJanuary 6, 2021 at 5:40 PM

    Great 😊😊😊😊

    ReplyDelete