Merge pull request #342 from amin-xiv/input-field-replacement

Adjusted feedback form.

Author: multiverseweb

index.html

@@ -321,8 +321,8 @@ <h3 style="margin-top: 20px;text-align: center;">Our Social Media Handles</h3>
             <div class="feed-back inputclass">
             <i class="fa-solid fa-comment"></i>
 
-           <input name="Feedback" class="feedback" placeholder="Your Feedback (minimum 10 characters)"required oninput="checkFeedbackLength(this)"></input></div>
-          <span id="feedbackError"style="color:#ff5457; white-space: normal; opacity: 0%; transition: opacity 0.4s ease " display="none">Feedback must be at least 10 characters long.</span>  
+           <textarea name="Feedback" id="feedback" class="feedback" placeholder="Your Feedback (minimum 10 characters)" cols="39" rows="3" oninput="checkFeedbackLength(this)"></textarea></div>
+          <span id="feedbackError"style="color:#ff5457; white-space: normal; opacity: 0%; transition: opacity 0.4s ease; " display="none">Feedback must be at least 10 characters long.</span>  
 
 
           <div class="star-rating" style="text-align: center; margin: 10px;">

resources/styles/home-style.css

@@ -417,24 +417,29 @@ input {
   display: flex;
   align-items: center;
 }
-input.feedback{
-    padding-left: 10px;
+textarea.feedback{
+    padding-left: 50px;
     color: white;
     background-color: #76767639;
     border: 0.1px solid rgba(255, 255, 255, 0.193);
-    width: calc(100% - 10px);
+    width: 94.5%;
     height: 70px;
     margin-top: 20px;
+    margin-bottom: 10px;
     border-radius: 5px;
 }
 #send {
     padding: 5px 10px 5px 10px;
     border-radius: 5px;
     border: none;
-    margin-left: 100%;
+    margin-left: auto;
+    margin-right: auto;
     margin-top: 20px;
-    transform: translate(calc(-100% - 0px));
+    margin-bottom: 10px;
+    /* transform: translate(calc(-100% - 0px)); */
     width: min-content;
+    width: 80px;
+    height: 30px;
     background-color: #248e87;
     cursor: pointer;
     color:rgba(255, 255, 255, 0.63);

resources/styles/style.css

@@ -386,6 +386,11 @@ textarea:focus {
   border-color: #4ecdc4;
 }
 
+#feedback {
+  resize: none;
+  width: 348px 
+}
+
 #language:hover {
   box-shadow: 0px 0px 0px black;
 }