Rating system your website post blogger post rating system add what is rating style What is Rating Style Rating Style is a method of rating a product using ratings to find out how good that product is HTML CODE 🌟🌟🌟🌟🌟 <!DOCTYPE html><!– Created By Codingpatelji –> <head> <!– Somehow I got an error, so I comment the title, just uncomment to show –> <!– <title>Star Rating Form | Codingpatelji</title> –> <link rel=”stylesheet” href=”style.css”> </head> </p> <div> <div> <div>Thanks for rating us!</div> <div>EDIT</div> </div> <div> <label for=”rate-5″></label> <label for=”rate-4″></label> <label for=”rate-3″></label> <label for=”rate-2″></label> <label for=”rate-1″></label> </p> <header></header> <div> <textare cols=”30″ placeholder=”Describe your experience..”></textare> <!– Due to more textarea tags I got a problem So I’ve changed the textarea tag to textare. Please correct it. –> </p> <div><button type=”submit”>Post</button> </div> </p></div> <p> Css file : @import url(‘https://fonts.googleapis.com/css?display=swap&family=Poppins:400,500,600,700&display=swap’); *{ margin: 0; padding: 0; box-sizing: borer-box; font-family: ‘Poppins’, sans-serif; } html,body{ display: grid; height: 100%; place-items: center; text-align: center; background: #000; } .container{ position: relative; width: 400px; background: #111; padding: 20px 30px; border: 1px solid #444; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .container .post{ display: none; } .container .text{ font-size: 25px; color: #666; font-weight: 500; } .container .edit{ position: absolute; right: 10px; top: 5px; font-size: 16px; color: #666; font-weight: 500; cursor: pointer; } .container .edit:hover{ text-decoration: underline; } .container .star-widget input{ display: none; } .star-widget label{ font-size: 40px; color: #444; padding: 10px; float: right; transition: all 0.2s ease; } input:not(:checked) ~ label:hover, input:not(:checked) ~ label:hover ~ label{ color: #fd4; } input:checked ~ label{ color: #fd4; } input#rate-5:checked ~ label{ color: #fe7; text-shadow: 0 0 20px #952; } #rate-1:checked ~ form header:before{ content: “I just hate it 😠”; } #rate-2:checked ~ form header:before{ content: “I don’t like it 😒”; } #rate-3:checked ~ form header:before{ content: “It is awesome 😄”; } #rate-4:checked ~ form header:before{ content: “I just like it 😎”; } #rate-5:checked ~ form header:before{ content: “I just love it ♥️”; } .container form{ display: none; } input:checked ~ form{ display: block; } form header{ width: 100%; font-size: 25px; color: #fe7; font-weight: 500; margin: 5px 0 20px 0; text-align: center; transition: all 0.2s ease; } form .textarea{ height: 100px; width: 100%; overflow: hidden; } form .textarea textarea{ height: 100%; width: 100%; outline: none; color: #eee; border: 1px solid #333; background: #222; padding: 10px; font-size: 17px; resize: none; } .textarea textarea:focus{ border-color: #444; } form .btn{ height: 45px; width: 100%; margin: 15px 0; } form .btn button{ height: 100%; width: 100%; border: 1px solid #444; outline: none; background: #222; color: #999; font-size: 17px; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } form .btn button:hover{ background: #1b1b1b; } </div> <p> Download button HTML code go to this page Download button ys cod