From c3282d12acbf2080c4ff862089136850d36ed3dc Mon Sep 17 00:00:00 2001
From: avleen <mehak.bakshi201@gmail.com>
Date: Thu, 29 Jun 2023 22:31:35 +0530
Subject: [PATCH] Toast functionality and contact section UI done

---
 index.html | 48 +++++++++++++++++++++++++++++++++++++++++++++++-
 style.css  | 43 ++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 87 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 5a19778..3b7f3b8 100644
--- a/index.html
+++ b/index.html
@@ -1269,7 +1269,7 @@ <h3>Call Us</h3>
                 </div>
               </div>
               <div class="text-center">
-                <button type="submit">Send Message</button>
+                <button type="submit" onclick=SendMail()>Send Message</button>
               </div>
             </form>
           </div>
@@ -1426,6 +1426,52 @@ <h3 class="chatbox__title">Eduhub Community 24/7</h3>
       })
     }
   </script>
+  <!-- Toastify library for successfull sending of email message --> 
+  <script> 
+    function SendMail() { 
+      var name = document.getElementById('name').value; 
+      var email = document.getElementById('email').value; 
+      var subject = document.getElementById('subject').value; 
+      var message = document.getElementById('message').value; 
+   
+      if (name === '' || email === '' || subject === '' || message === '') { 
+        showToast('Please fill in all fields.', 'error'); 
+        return false; 
+      } 
+   
+      var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
+      if (!email.match(emailRegex)) { 
+        showToast('Please enter a valid email address.', 'error'); 
+        return false; 
+      } 
+   
+      showToast('Your message has been sent successfully!', 'success'); 
+   
+      document.getElementById('name').value = ''; 
+      document.getElementById('email').value = ''; 
+      document.getElementById('subject').value = ''; 
+      document.getElementById('message').value = ''; 
+   
+      return true; 
+    } 
+   
+    function showToast(message, type) { 
+      var toast = document.createElement('div'); 
+      toast.className = 'toast ' + type; 
+      toast.textContent = message; 
+   
+      document.body.appendChild(toast); 
+   
+      setTimeout(function () { 
+        toast.classList.add('show'); 
+        setTimeout(function () { 
+          toast.classList.remove('show'); 
+          document.body.removeChild(toast); 
+        }, 3000); // Adjust the duration (in milliseconds) as needed 
+      }, 100); 
+    } 
+  </script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 7253d31..9e5f155 100644
--- a/style.css
+++ b/style.css
@@ -1393,7 +1393,9 @@ section {
   text-align: center;
   box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
   padding: 20px 0 30px 0;
-  background: #fff;
+  border-radius: 8px;
+  background: #e2e5fe;
+
 }
 
 .contact .info-box i {
@@ -1419,7 +1421,8 @@ section {
 .contact .javascript-email-form {
   box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
   padding: 30px;
-  background: #fff;
+  border-radius: 8px;
+  background: #e2e5fe;
 }
 
 .contact .javascript-email-form .error-message {
@@ -1473,15 +1476,19 @@ section {
 
 .contact .javascript-email-form input:focus,
 .contact .javascript-email-form textarea:focus {
-  border-color: #8ea5ca;
+  border-color: #3b4ef8;
 }
 
 .contact .javascript-email-form input {
   padding: 10px 15px;
+  background-color: #e2e5fe;
+  border-color: #8ea5ca;
 }
 
 .contact .javascript-email-form textarea {
   padding: 12px 15px;
+  background-color: #e2e5fe;
+  border-color: #8ea5ca;
 }
 
 .contact .javascript-email-form button[type="submit"] {
@@ -1496,6 +1503,36 @@ section {
 .contact .javascript-email-form button[type="submit"]:hover {
   background: #0a22f6;
 }
+.toast { 
+  visibility: hidden; 
+  min-width: 250px; 
+  margin-left: -125px; 
+  color: #fff; 
+  text-align: center; 
+  border-radius: 2px; 
+  padding: 16px; 
+  position: fixed; 
+  left: 50%; 
+  bottom: 30px; 
+  transform: translateX(-20%); 
+  font-size: 17px; 
+  z-index: 9999; 
+  opacity: 0; 
+  transition: opacity 0.3s; 
+} 
+ 
+.toast.success { 
+  background-color: #38c172; 
+} 
+ 
+.toast.error { 
+  background-color: #ff4b5a; 
+} 
+ 
+.toast.show { 
+  visibility: visible; 
+  opacity: 1; 
+}
 
 @-webkit-keyframes animate-loading {
   0% {