From 7ab9a9172f3c1ee6ce9c2667de1281cd0932d26f Mon Sep 17 00:00:00 2001 From: Sneha6003 <22bce400@nirmauni.ac.in> Date: Mon, 29 Jan 2024 15:24:09 +0530 Subject: [PATCH] feedback --- assets/main.html | 1 + feedback/feed.html | 54 ++++++++++++++++++ feedback/style.css | 137 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 192 insertions(+) create mode 100644 feedback/feed.html create mode 100644 feedback/style.css diff --git a/assets/main.html b/assets/main.html index ea49cd5..8e739ca 100644 --- a/assets/main.html +++ b/assets/main.html @@ -512,6 +512,7 @@

Score: 0

+ diff --git a/feedback/feed.html b/feedback/feed.html new file mode 100644 index 0000000..e67b86d --- /dev/null +++ b/feedback/feed.html @@ -0,0 +1,54 @@ + + + + + Star Rating Form + + + + +
+
+
Thanks for rating us!
+
Home
+
+
+ + + + + + + + + + +
+
+
+ +
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/feedback/style.css b/feedback/style.css new file mode 100644 index 0000000..251f050 --- /dev/null +++ b/feedback/style.css @@ -0,0 +1,137 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +html,body{ + display: grid; + height: 100%; + place-items: center; + text-align: center; + background: #e30db1; +} +.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; +} \ No newline at end of file