Added feedback system

Anishkagupta04 · May 13, 2024 · f34f6bd · f34f6bd
1 parent f9595c4
commit f34f6bd
Show file tree

Hide file tree

Showing 2 changed files with 166 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -63,6 +63,8 @@ <h1 class="logo me-auto"><a href="index.html">RapiDoc</a></h1>
           <li><a class="nav-link scrollto" href="#patient-portal">Patient Portal</a></li>
           <li><a class="nav-link scrollto" href="#doctors">Doctors</a></li>
           <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
+
+          <li><a class="nav-link" href="#feedback">Feedback</a></li>
         </ul>
         <i class="bi bi-list mobile-nav-toggle"></i>
       </nav><!-- .navbar -->
@@ -551,6 +553,43 @@ <h4>Call:</h4>
       </div>
     </section><!-- End Contact Section -->
 
+
+    <!-- Feedback System-->
+  <section id="feedback" class="feed">
+    <div class="feedback">
+      <h1>Give Us Your Valuable Feedback.</h1>
+      <p>Your feedback is very important for Rapidoc.</p>
+      <div class="emoji">
+          <button class="btn normal">&#128578;</button>
+          <button class="btn normal">&#128515;</button>
+          <button class="btn normal">&#128519;</button>
+          <button class="btn normal">&#128531;</button>
+          <button class="btn normal">&#128532;</button>
+          <button class="btn normal">&#128545;</button>
+      </div>
+      <p class="ques">What you want to say?</p>
+      <textarea id="textarea" cols="20" rows="5"></textarea>
+      <p class="ques">Are you satisfied with rapidoc?</p>
+      <div class="radiobtn">
+          <div class="one">
+            <input class="input"  type="radio" name="one" id="Yes" />
+            <label class="label" for="Yes">Yes</label>
+          </div>
+          <div class="one">
+            <input class="input"  type="radio" name="one" id="No" />
+            <label class="label" for="No">No</label>
+          </div>
+      </div>
+    </div>
+    <div class="info">
+      <div class="center">
+          <button class="btn button">Submit</button>
+      </div>
+
+    </div>
+  </section>
+
+
   </main><!-- End #main -->
 
 

diff --git a/style.css b/style.css
@@ -1029,6 +1029,133 @@ section {
 }
 
 
+/*################--feedback###############*/
+
+.feedback{
+  border-radius: 1rem;
+  background-color: #fff;
+  padding: 2rem 4rem;
+  box-shadow: rgba(50,50,93,0.25) 0px 2px 5px -1px,rgba(0, 0,0,0.3) 0px 1px 3px -1px;
+  margin: 50px;
+  width: 60%;
+  margin-left: 250px;
+  padding: 20px;
+}
+.feedback h1{
+  color: black;
+  font-size: 2.0rem;
+  margin-bottom: 0.3rem;
+  font-family: "Poppins", sans-serif;
+}
+.feedback p{
+  color: black;
+  font-size: 1.1rem;
+  font-family: "Poppins", sans-serif;
+}
+.emoji{
+  padding: 1rem 0;
+  width: 20%;
+  display: flex;
+  justify-content: space-between;
+}
+.btn{
+  background-color: transparent;
+  border: none;
+  font-size: 1.5rem;
+  font-family: "Poppins", sans-serif;
+  transition: 0.2s ease-in;
+  cursor: pointer;
+  &:hover {
+    transform: scale(1.5);
+  }
+}
+
+.ques{
+  margin: 0.5rem 0;
+}
+.feedback #textarea{
+  padding: 1rem;
+  width: 80%;
+  background-color: transparent;
+  border: 0.1rem solid black;
+  border-radius: 0.5rem;
+  color: black;
+  margin-bottom: 0.6rem;
+  &:active{
+    box-shadow: rgba(50, 50, 93,0.25) 0px 2px 5px -1px,rgba(0,0,0,0.3) 0px 1px 3px -1px;
+  }
+}
+
+.radiobtn{
+  width: 40%;
+  display: flex;
+  justify-content: space-between;
+
+}
+.one{
+  display: flex;
+}
+.input{
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  font-size: 1rem;
+  appearance: none;
+  width: 2rem;
+  height: 2rem;
+  border: 0.1rem solid black;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &::before{
+    content: " ";
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    transition: 0.2s;
+  }
+  &:checked::before{
+    background-color: #1977cc;
+
+  } 
+}
+.label{
+  color: black;
+  font-family: "Poppins", sans-serif;
+  font-size: 1.1rem;
+  margin-left: 1rem;
+}
+.info{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  margin: 0.5rem 0;
+}
+.center{
+  margin-top: 2rem;
+  text-align: center;
+
+  .button{
+    width: 15%;
+    background-color: white;
+    border-radius: 0.5rem;
+    border: none;
+    font-size: 1.4rem;
+    font-family: "Poppins", sans-serif;
+    padding:1rem 4rem;
+    cursor: pointer;
+    color: #000;
+  }
+  .button:active{
+    background-color: white;
+    transform: scale(1.0);
+
+  }
+  .button:hover{
+    background-color:rgb(63, 155, 124) ;
+  }
+}