From 29f153592c05ff64dc8f4481224d8a6542326022 Mon Sep 17 00:00:00 2001
From: ChauhanAyush04 <162184705+ChauhanAyush04@users.noreply.github.com>
Date: Thu, 10 Oct 2024 16:20:28 +0530
Subject: [PATCH] solved #3172

---
 index.html | 212 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 153 insertions(+), 59 deletions(-)

diff --git a/index.html b/index.html
index 39f035b9..fa3e8b70 100644
--- a/index.html
+++ b/index.html
@@ -664,7 +664,7 @@
   }
 }
 .navbar-item {
-  /* Increase the top margin of each item */
+  margin-top: 1rem; /* Increase the top margin of each item */
   
 }
 .card-sty {
@@ -750,7 +750,7 @@
   /* Add transition for smooth animation */
 }
 
-{
+
 .footer-icons .icon:hover {
   transform: scale(1.5);
   /* Scale the icon on hover */
@@ -925,7 +925,8 @@
   background-color: var(--secondary-color);
   padding: 20px;
   border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 10px rgba(83, 18, 18, 0.1);
+  width: 75%;
 }
 
 .contact-card {
@@ -969,16 +970,6 @@
   border-radius: 10px;
 }
 
-.contact-info {
-  width: 400px; /* Adjust the width as needed */
-  display: inline-block;
-}
-
-.contact-info {
-  width: 500px; /* Adjust the width as needed */
-  display: inline-block;
-}
-
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .flexi {
@@ -1187,7 +1178,7 @@
   margin-right: 3rem;
 }
 .mobile-container-styles{
-  
+  margin-left: 5rem;
 }
 .nav{
   justify-content: space-around;
@@ -1206,7 +1197,8 @@
 }
 
 .contact {
-  width: 52%; /* Adjust width for the contact form */
+  
+  width: 1000px;  /* Adjust width for the contact form */
 }
 
 .cardi {
@@ -1221,6 +1213,10 @@
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+}
+.contact-container:hover{
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.386);
 }
 
 .contact-card {
@@ -1439,7 +1435,7 @@
 
         <ul class="navbar-list nav">
           <a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
-            <img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px 0px;">
+            <img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px 1.8rem;">
           </a>
           <li class="navbar-item">
             <a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
@@ -1485,7 +1481,8 @@
 
           <li class="navbar-item">
               <a href="audiobook.html" onclick="lenis.scrollTo('audiobooks')" class="navbar-link" data-nav-link>
-                  <i class="ri-bar-chart-fill"></i> Audio Books </a>
+                  <i class="ri-bar-chart-fill"></i> Audio<br> Books
+              </a>
           </li>
             
           <li>
@@ -3005,47 +3002,145 @@ <h3 class="card-sty" style="text-align: center;">Organizations</h3>
   }
 </style>
 
+
 <!-- rate us -->
-<!-- Rate Us Component -->
-<div id="rate-us">
-  <div class="heading">
-    <h3>Rate Us</h3>
-    <p>Tell us about your experience!</p>
-  </div>
+      <style>
+#rate-us {
+  transition: background-color 0.3s ease;  
+}
 
-  <div class="stars">
-    <input type="radio" id="star5" name="rate" value="5" />
-    <label for="star5">😭</label>
-    <input type="radio" id="star4" name="rate" value="4" />
-    <label for="star4">😢</label>
-    <input type="radio" id="star3" name="rate" value="3" />
-    <label for="star3">😐</label>
-    <input type="radio" id="star2" name="rate" value="2" />
-    <label for="star2">😊</label>
-    <input type="radio" id="star1" name="rate" value="1" />
-    <label for="star1">😍</label>
-  </div>
+#rate-us:hover {
+  background-color: #fde2e2;  
+  color: white;  
+} /* Closing brace for #rate-us:hover */
 
-  <div class="feedback-container">
-    <textarea id="feedback" placeholder="Enter your feedback..." rows="4"></textarea>
-  </div>
+/* Additional styles */
+.toast-message {
+  display: none;  
+  padding: 10px;
+  border-radius: 5px;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
 
-  <div class="button">
-    <center><button id="submit-btn">Submit</button></center>
-  </div>
-</div>
+.modal {
+  display: none;  
+}
+</style>
 
-<div id="toastMessage" class="toast-message"></div>
 
-<!-- Confirmation Modal -->
-<div id="confirmationModal" class="modal">
-  <div class="modal-content">
-    <span class="close" onclick="closeConfirmationModal()">&times;</span>
-    <p id="confirmationMessage"></p>
-  </div>
+
+
+      <!-- rate us -->
+
+
+       <!-- Rate Us Component -->
+       <div id="rate-us">
+        <div class="heading">
+            <h3>Rate Us</h3>
+            <p>Tell us about your experience!</p>
+        </div>
+    
+        <div class="stars">
+            <input type="radio" id="star5" name="rate" value="5" />
+            <label for="star5">😭</label>
+            <input type="radio" id="star4" name="rate" value="4" />
+            <label for="star4">😢</label>
+            <input type="radio" id="star3" name="rate" value="3" />
+            <label for="star3">😐</label>
+            <input type="radio" id="star2" name="rate" value="2" />
+            <label for="star2">😊</label>
+            <input type="radio" id="star1" name="rate" value="1" />
+            <label for="star1">😍</label>
+        </div>
+    
+        <div class="feedback-container">
+            <textarea id="feedback" placeholder="Enter your feedback..." rows="4"></textarea>
+        </div>
+    
+        <div class="button">
+          
+            <center><button id="submit-btn">Submit</button></center>
+        </div>
+    </div>
+    
+    <div id="toastMessage" class="toast-message"></div>
+    <script>
+     document.addEventListener("DOMContentLoaded", function() {
+    const toastMessage = document.getElementById("toastMessage");
+
+    document.getElementById("submit-btn").addEventListener("click", function(event) {
+        event.preventDefault(); // Prevent default form submission
+
+        let selectedEmoji = document.querySelector('input[name="rate"]:checked');
+        let feedback = document.getElementById("feedback").value.trim();
+        
+        if (selectedEmoji && feedback !== "") {
+            // Show success toast message
+            toastMessage.textContent = "Feedback submitted successfully :)";
+            toastMessage.style.backgroundColor = "green"; // Green color for success
+            toastMessage.style.color = "white";
+            toastMessage.style.borderRadius = "0.5rem";
+            toastMessage.style.position = "fixed";
+                      toastMessage.style.display = "block";
+
+            // Hide toast message after 3 seconds (adjust as needed)
+            setTimeout(function() {
+                toastMessage.style.display = "none";
+            }, 3000);
+
+            // Reset form fields
+            document.getElementById("feedback").value = "";
+            let starInputs = document.querySelectorAll('input[name="rate"]');
+            starInputs.forEach(input => {
+                input.checked = false;
+            });
+        } else {
+            // Show failure toast message
+            toastMessage.textContent = "Select Emoji and give Feedback :(";
+            toastMessage.style.backgroundColor = "red"; // Red color for failure
+            toastMessage.style.color = "white";
+            toastMessage.style.borderRadius = "0.5rem";
+            toastMessage.style.position = "fixed";
+            
+            toastMessage.style.display = "block";
+
+            // Hide toast message after 3 seconds (adjust as needed)
+            setTimeout(function() {
+                toastMessage.style.display = "none";
+            }, 3000);
+            
+            document.getElementById("feedback").value = "";
+            let starInputs = document.querySelectorAll('input[name="rate"]');
+            starInputs.forEach(input => {
+                input.checked = false;
+            });
+        }
+    });
+});
+
+  </script>
+  <div id="toastMessage"></div>
+
+    <!-- Confirmation Modal -->
+    <div id="confirmationModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeConfirmationModal()">&times;</span>
+            <p id="confirmationMessage"></p>
+        </div>
+    </div>
 </div>
 
-<script src="/assets/js/rate.js"></script>
+    <!-- Confirmation Message Popup -->
+    <div id="confirmationModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeConfirmationModal()">&times;</span>
+            <p id="confirmationMessage"></p>
+        </div>
+    </div>
+
+    <script src="/assets/js/rate.js"></script>
 
 
   <!-- --Contact Us -->
@@ -3057,10 +3152,10 @@ <h1 class="h1 section-title has-underline" style="margin-top: 15px;">
   </h1>
   <p class="p">Have a Question?</p> 
   <h3 style="text-align: center; color: #A30F17;">GET IN TOUCH</h3>
-  <div class="flexi common-width">
-    <div class="contact">
+  <div class="flexi">
+    <div class="contact" >
       <div class="contact-container">
-        <form class="contact-form" id="contactForm">
+        <form class="contact-form" id="contactForm" style=" width: 500px;">
           <label for="name">Name</label>
           <input type="text" id="name" name="name" placeholder="Your Name" required>
 
@@ -3088,18 +3183,17 @@ <h3 style="text-align: center; color: #A30F17;">GET IN TOUCH</h3>
     </div>
 
     <!-- Contact Information Section -->
-    <div class="cardi common-width">
+    <div class="cardi">
       <div class="contact-card white-border-card">
-        <ul class="flex-container">
+        <ul>
           <li>
             <p class="card-title address-title">
               <lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover" colors="primary:#000000" style="width:25px;height:25px"></lord-icon>
               Address:
             </p>
-            <address class="address contact-info">
-              <span>12, Nayabad<br>
-                Kolkata, India 700054
-              </span>
+            <address class="address">
+              12, Nayabad<br>
+              Kolkata, India 700054
             </address>
           </li>
           <li>