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
google adsense mobile app | adsense v4.7.5 old version, download Uptodown July 5, 2022August 24, 2022 AdSense App money earning app Online tips
coinswitch kuber app cryptocurrency buy and xchange September 29, 2021August 4, 2022 money earning app Online tips
about gst in india | three types of GST CGST/SGST/IGST February 23, 2020February 23, 2020 Gk samanya Gyan Online tips