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><br />
<div><br />
<div><br />
<div>Thanks for rating us!</div><br />
<div>EDIT</div><br />
</div><br />
<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><br />
<header></header><br />
<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><br />
<div><button type=”submit”>Post</button>          </div><br />
</p></div><br />
<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><br /> <p>

Download button HTML code

Download button ys cod