From 8abd4748bb0eaeda82a58d0264bf22f6ff68da3b Mon Sep 17 00:00:00 2001
From: Varsani2520 <varsaniranjani2520@gmail.com>
Date: Thu, 1 Aug 2024 10:44:06 +0530
Subject: [PATCH 1/4] theme added

---
 Css-files/content.css   | 64 ++++++++++++++++++++++++++++++++++-------
 Css-files/navbar.css    | 16 ++++++-----
 Css-files/offers.css    | 52 +++++++++++++++++++++++++++++----
 Html-files/contact.html |  1 +
 Html-files/menu.html    |  7 +++--
 Html-files/offers.html  |  2 ++
 index.html              |  3 +-
 script.js               | 26 +++++++++++++++++
 8 files changed, 144 insertions(+), 27 deletions(-)

diff --git a/Css-files/content.css b/Css-files/content.css
index 041be70e..ba3ed02a 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -2,11 +2,53 @@
 	margin: 0px;
 	padding: 0px;
 }
-
-body {
-	background-color: black;
+:root {
+    --background-color: white;
+    --text-color: black;
+    --primary-color: rgb(204, 12, 12);
+    --secondary-color: rgb(177, 0, 0);
+    --tertiary-color: orangered;
+    --container-bg: rgb(224, 224, 252);
+    --filter-bg: transparent;
+    --contact-bg: rgb(208, 50, 50);
+    --button-bg: #ec0f25e3;
+    --button-hover-bg: rgba(208, 50, 50, 0.9);
+    --card-border: rgb(186, 186, 201);
+    --card-shadow: rgba(224, 224, 252, 0.678);
+    --link-color: rgb(177, 0, 0);
+    --pagination-bg: white;
+    --pagination-active-bg: rgb(177, 0, 0);
+    --pagination-btn-color: rgb(177, 0, 0);
+    --pagination-prev-next-bg: rgb(204, 12, 12);
+    --filter-text-color: black;
+    --filter-border-color: #dc3545;
+}
+
+.dark-theme  {
+    --background-color: black;
+    --text-color: white;
+    --primary-color: rgb(204, 12, 12);
+    --secondary-color: rgb(177, 0, 0);
+    --tertiary-color: orangered;
+    --container-bg: rgb(35, 35, 35);
+    --filter-bg: rgba(0, 0, 0, 0.6);
+    --contact-bg: rgb(208, 50, 50);
+    --button-bg: #ec0f25e3;
+    --button-hover-bg: rgba(208, 50, 50, 0.9);
+    --card-border: rgb(100, 100, 100);
+    --card-shadow: rgba(0, 0, 0, 0.5);
+    --link-color: rgb(177, 0, 0);
+    --pagination-bg: #2e2e2e;
+    --pagination-active-bg: rgb(177, 0, 0);
+    --pagination-btn-color: rgb(177, 0, 0);
+    --pagination-prev-next-bg: rgb(204, 12, 12);
+    --filter-text-color: white;
+    --filter-border-color: #dc3545;
+}
+/* body {
+	background-color: var(--background-color);
 	overflow-x: hidden;
-}
+} */
 
 /* MENU + LOGIN + SIGNUP + CONTACT PAGE */
 .head_container {
@@ -42,7 +84,7 @@ body {
 /* MENU PAGE SPECIFICS */
 .menu-container {
 	padding: 55px 10px 30px 10px;
-	background-color: rgb(224, 224, 252);
+	background-color: var(--background-color)
 }
 
 .menu-container .container-fluid {
@@ -77,7 +119,7 @@ body {
 
 .menu-container .nav-pills .nav-link.active {
 	background-color: rgb(204, 12, 12);
-	color: white;
+	/* color: white; */
 }
 
 .menu-items .row {
@@ -287,7 +329,7 @@ body {
 .contact-wrapper .text{
 	font-size: 1rem;
 	line-height: 1.5;
-	color: #080808;
+	color: var(--text-color);
 	margin-bottom: 2rem;
 }
 
@@ -322,7 +364,7 @@ body {
 	align-items: center; /* Center items vertically */
 	margin-bottom: 20px;
 	padding: 15px;
-	background-color: #fff;
+	background-color: var(--background-color);
 	border-radius: 20px;
 	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 	transition: transform 0.4s, box-shadow 0.4s, background-color 0.4s;
@@ -421,7 +463,7 @@ body {
   }
 */
 .contact-form-wrapper {
-	background-color: white;
+	background-color:var(--container-bg);
 	padding: 30px 0;
   }
   
@@ -668,7 +710,9 @@ body {
 .testimonal__container {
 	display: flex;
 }
-
+.nav-link {
+	color:var(--a)
+}
 .testimonal__card {
 	text-align: center;
 	padding: 2rem 3rem 2.5rem;
diff --git a/Css-files/navbar.css b/Css-files/navbar.css
index 945ca29c..6156be3f 100644
--- a/Css-files/navbar.css
+++ b/Css-files/navbar.css
@@ -21,7 +21,7 @@
   /* Additional Colors */
   --container-bg: black;
   --drop-bg: #212123;
-  --a: white;
+  --a: black;
   --nav: black;
   --invert: invert(1);
 }
@@ -52,15 +52,14 @@
   /* Additional Colors */
   --container-bg: rgb(224, 224, 252);
   --drop-bg: #ffffff;
-  --a: black;
   --nav: white;
   --invert: invert(0);
 }
 
 /* Navbar */
 .navbar {
-  --bs-navbar-color: var(--a);
-  background-color: var(--nav);
+  /* --bs-navbar-color: var(--a); */
+  background-color: var(--background-color);
   gap: 10px;
 }
 
@@ -83,7 +82,7 @@
 
 /* Navbar Links */
 .nav-link {
-  transition: color 0.3s, background-color 0.3s;
+  color:var(--a)
 }
 
 .nav-link:hover {
@@ -102,6 +101,8 @@ ul {
   display: flex;
   justify-content: center;
   align-items: center;
+  color:var(--a)
+
 }
 
 
@@ -140,6 +141,7 @@ ul {
 #theme-toggle-icon {
   width: 30px;
   cursor: pointer;
+  color:var(--drop-bg)
 }
 
 .center-links .nav-item .dropdown-menu {
@@ -165,7 +167,7 @@ ul {
   background-color: #dc3545;
 }
 
-:root {
+/* :root {
   --background-color: #fff;
   --text-color: #000;
   --button-bg: #D0EEB0;
@@ -177,7 +179,7 @@ ul {
 body {
   background-color: var(--background-color);
   color: var(--text-color);
-}
+} */
 
 .section {
   background-color: var(--background-color);
diff --git a/Css-files/offers.css b/Css-files/offers.css
index e526f01a..458e8203 100644
--- a/Css-files/offers.css
+++ b/Css-files/offers.css
@@ -43,7 +43,49 @@ ol {
   --primary-font: 'Roboto', sans-serif;
   --secondry-font: 'Quicksand', sans-serif;
 }
-
+:root {
+  --background-color: white;
+  --text-color: black;
+  --primary-color: rgb(204, 12, 12);
+  --secondary-color: rgb(177, 0, 0);
+  --tertiary-color: orangered;
+  --container-bg: rgb(224, 224, 252);
+  --filter-bg: transparent;
+  --contact-bg: rgb(208, 50, 50);
+  --button-bg: #ec0f25e3;
+  --button-hover-bg: rgba(208, 50, 50, 0.9);
+  --card-border: rgb(186, 186, 201);
+  --card-shadow: rgba(224, 224, 252, 0.678);
+  --link-color: rgb(177, 0, 0);
+  --pagination-bg: white;
+  --pagination-active-bg: rgb(177, 0, 0);
+  --pagination-btn-color: rgb(177, 0, 0);
+  --pagination-prev-next-bg: rgb(204, 12, 12);
+  --filter-text-color: black;
+  --filter-border-color: #dc3545;
+}
+
+.dark-theme  {
+  --background-color: black;
+  --text-color: white;
+  --primary-color: rgb(204, 12, 12);
+  --secondary-color: rgb(177, 0, 0);
+  --tertiary-color: orangered;
+  --container-bg: rgb(35, 35, 35);
+  --filter-bg: rgba(0, 0, 0, 0.6);
+  --contact-bg: rgb(208, 50, 50);
+  --button-bg: #ec0f25e3;
+  --button-hover-bg: rgba(208, 50, 50, 0.9);
+  --card-border: rgb(100, 100, 100);
+  --card-shadow: rgba(0, 0, 0, 0.5);
+  --link-color: rgb(177, 0, 0);
+  --pagination-bg: #2e2e2e;
+  --pagination-active-bg: rgb(177, 0, 0);
+  --pagination-btn-color: rgb(177, 0, 0);
+  --pagination-prev-next-bg: rgb(204, 12, 12);
+  --filter-text-color: white;
+  --filter-border-color: #dc3545;
+}
 html {
   scroll-behavior: smooth;
 }
@@ -137,7 +179,7 @@ h5 {
 
 p {
   font-size: 1rem;
-  color: var(--text-color);
+  color: var(--bs-heading-color);
   font-weight: 400;
   line-height: 1.75rem;
   letter-spacing: 1px;
@@ -430,11 +472,11 @@ nav {
 ==========================================
 */
 .testimonial-section {
-  background: lavender;
+  background: var(--background-color);
 }
 
 .testimonial-section h2 {
-  color: red;
+  color:var(--bs-heading-color);
 }
 
 .testimonial-section .carousel-item {
@@ -484,7 +526,7 @@ button.prev, button.next {
   top: 50%;
   margin: 20px;
   transform: translateY(-50%);
-  background-color: brown;
+  background-color: var(--pagination-btn-color);
   color: white;
   border: 1px white solid;
   padding: 10px;
diff --git a/Html-files/contact.html b/Html-files/contact.html
index 6f52b3c7..e1873a30 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -41,6 +41,7 @@
     <link rel="stylesheet" href="../Css-files/content.css" />
     <link rel="stylesheet" href="../Css-files/navbar.css" />
     <link rel="stylesheet" href="../Css-files/footer.css" />
+    <link rel="stylesheet" href="../style.css" />
 
     <style>
          #progressBar {
diff --git a/Html-files/menu.html b/Html-files/menu.html
index 31ee7388..650b9911 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -81,7 +81,7 @@
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="../Html-files/menu.html">
+                    <a class="nav-link dark-theme" href="../Html-files/menu.html">
                         <i class="fa-solid fa-book-open"></i> Menu
                     </a>
                 </li>
@@ -114,8 +114,9 @@
             </ul>
         </div>
         <div class="order-0 ml-auto p-2">
-            <img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
-        </div>
+          <img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
+      </div>
+      
         <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
             <ul class="navbar-nav end-links">
                 <li class="nav-item">
diff --git a/Html-files/offers.html b/Html-files/offers.html
index df7a0410..02138473 100644
--- a/Html-files/offers.html
+++ b/Html-files/offers.html
@@ -44,6 +44,8 @@
     <link rel="stylesheet" href="../Css-files/scroll-top-button.css" />
     <link rel="stylesheet" href="../Css-files/navbar.css" />
     <link rel="stylesheet" href="../Css-files/footer.css" />
+    <link rel="stylesheet" href="../style.css" />
+    <script href="../script.js" ></script>
     <!-- OWN CSS -->
     <link id="theme-link" rel="stylesheet" href="/Css-files/offers.css" />
     <style>
diff --git a/index.html b/index.html
index d020817c..980f8750 100644
--- a/index.html
+++ b/index.html
@@ -78,7 +78,7 @@
             <a href="index.html" class="navbar-brand opacity-75 flex-fill">
 
 
-                <img src="./Images/logo/Foodielogo.png" height="30" alt="Brand Logo" style="background-color: black;">
+                <img src="./Images/logo/Foodielogo.png" height="30" alt="Brand Logo" >
 
                 
 
@@ -166,7 +166,6 @@
 
                 <img class="nav-link" src="Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
 
-                <img class="nav-link" src="Images/navbar/sun.png" id="theme-toggle-icon" alt="Theme Toggler Button">
 
             </div>
 
diff --git a/script.js b/script.js
index 4ae83645..d7167751 100644
--- a/script.js
+++ b/script.js
@@ -17,3 +17,29 @@ document.querySelectorAll('.faq-item h2').forEach(item => {
       parent.classList.toggle('active');
   });
 });
+
+// Get themeToggleIcon element
+let themeToggleIcon = document.getElementById("theme-toggle-icon");
+
+// Load theme from localStorage
+const currentTheme = localStorage.getItem("theme");
+if (currentTheme === "dark") {
+  document.body.classList.add("dark-theme");
+  themeToggleIcon.src = "../Images/navbar/sun.png";
+} else {
+  document.body.classList.remove("dark-theme");
+  themeToggleIcon.src = "../Images/navbar/moon.png";
+}
+
+// Toggle theme and save to localStorage
+themeToggleIcon.addEventListener("click", function () {
+  document.body.classList.toggle("dark-theme");
+  
+  if (document.body.classList.contains("dark-theme")) {
+    themeToggleIcon.src = "../Images/navbar/sun.png";
+    localStorage.setItem("theme", "dark");
+  } else {
+    themeToggleIcon.src = "../Images/navbar/moon.png";
+    localStorage.setItem("theme", "light");
+  }
+});
\ No newline at end of file

From 28357d9d8b334dcf330538144452ecde2592fb38 Mon Sep 17 00:00:00 2001
From: Ayush Deb <ayushdeb848@gmail.com>
Date: Sun, 4 Aug 2024 13:12:03 +0530
Subject: [PATCH 2/4] Restyled the footer component

---
 Css-files/footer.css          | 277 ++++++++++++++++++++++++----------
 Html-files/ordertracking.html | 224 ++++++++-------------------
 index.html                    | 204 ++++++++-----------------
 3 files changed, 325 insertions(+), 380 deletions(-)

diff --git a/Css-files/footer.css b/Css-files/footer.css
index edd376dc..1f29e624 100644
--- a/Css-files/footer.css
+++ b/Css-files/footer.css
@@ -1,147 +1,258 @@
-/* FOOTER */
+/* Footer Styles */
 footer {
-  overflow: hidden;
+  background-color: rgb(95, 25, 25);
+  color: white;
+  font-family: 'Arial', sans-serif;
 }
 
 .foot-panel1 {
-  background-color: rgb(138, 37, 37);
-  color: white;
-  height: fit-content;
+  padding: 50px 0;
+}
+
+.footer-heading {
+  color: #ff6b6b;
+  font-size: 1.2rem;
+  margin-bottom: 20px;
+  position: relative;
+  padding-bottom: 10px;
+  transition: color 0.3s ease;
+}
+
+.footer-heading::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 50px;
+  height: 2px;
+  background-color: #ff6b6b;
+  transition: width 0.3s ease;
 }
 
-.foot-panel1 .container-fluid {
-  width: 90%;
+.footer-heading:hover {
+  color: #ff4757;
 }
 
-.foot-panel1 .nav-link {
-  font-size: 0.85rem;
-  color: #dddddd;
+.footer-heading:hover::after {
+  width: 100%;
+}
+
+.footer-links {
+  list-style: none;
   padding: 0;
 }
 
-.foot-panel1 .nav-link:hover {
+.footer-links li {
+  margin-bottom: 10px;
+  transition: transform 0.3s ease;
+}
+
+.footer-links li:hover {
+  transform: translateX(5px);
+}
+
+.footer-links a {
+  color: #cccccc;
   text-decoration: none;
-  color: #dddddd;
+  transition: color 0.3s ease;
 }
 
-#footer-email,
-#footer-message {
-  padding-left: 10px;
-  padding-right: 10px;
-  background-color: rgba(210, 167, 167, 0.5);
-  color: white;
+.footer-links a:hover {
+  color: #ff6b6b;
+}
+
+#contactForm .form-control {
+  background-color: rgba(255, 255, 255, 0.1);
   border: none;
+  color: #ffffff;
+  margin-bottom: 15px;
+  transition: background-color 0.3s ease;
 }
 
-#footer-email:focus,
-#footer-message:focus {
-  box-shadow: none;
+#contactForm .form-control:focus {
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
-#footer-email::placeholder,
-#footer-message::placeholder {
-  color: white;
+#contactForm .form-control::placeholder {
+  color: #cccccc;
 }
 
-.foot-panel1 .btn {
-  background-color: rgb(117, 21, 21);
+.btn-custom {
+  background-color: #ff6b6b;
+  color: #ffffff;
   border: none;
+  padding: 10px 20px;
+  transition: all 0.3s ease;
 }
 
-.foot-panel1 .btn:is(:hover, :focus) {
-  background-color: rgb(196, 89, 89);
-  border: none;
+.btn-custom:hover {
+  background-color: #ff4757;
+  transform: scale(1.05);
 }
 
 .foot-panel2 {
   background-color: rgb(110, 28, 28);
   color: white;
-  height: fit-content;
-  font-size: 0.9rem;
-  text-align: center;
+  padding: 30px 0;
 }
 
-.foot-panel2 .social-icons a {
-  font-size: 1.2rem;
-  padding: 10px;
-  margin: 10px;
+.follow-us {
+  font-size: 1.5rem;
+  margin: 0 45.5%;
+  margin-bottom: 20px;
+  transition: color 0.3s ease;
+}
+
+.follow-us:hover {
+  color: #ff6b6b;
+}
+
+.social-icons {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.social-icons a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background-color: #ffffff;
+  color: #1a1a1a;
+  border-radius: 50%;
+  margin: 0 10px;
   text-decoration: none;
-  color: black;
-  background-color: white;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.social-icons a i {
+  position: relative;
+  z-index: 2;
+  transition: color 0.3s ease;
+}
+
+.social-icons a::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
   border-radius: 50%;
-  transition: 0.2s;
+  transform: scale(0);
+  transition: transform 0.3s ease;
 }
 
-.foot-panel2 .fa-facebook:hover {
-  background-color: #3b5998;
-  color: white;
+.social-icons a:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }
 
-.foot-panel2 .fa-instagram:hover {
-  background-color: #833ab4;
-  background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
-  color: white;
+.social-icons a:hover::before {
+  transform: scale(1);
 }
 
-.foot-panel2 .fa-youtube:hover {
-  background-color: #ff0000;
-  background: linear-gradient(to right, #ff0000, #cc0000, #990000);
-  color: white;
+.social-icons a:hover i {
+  color: #ffffff;
 }
 
-.foot-panel2 .fa-snapchat:hover {
-  background-color: #fffc00; /* Yellow background */
-  background: linear-gradient(to right, #fffc00, #ffeb3b, #ffc107); /* Gradient background */
-  color: #fff; /* White color for the logo */
+/* Specific social media icon hover effects */
+.social-icons a.facebook:hover::before {
+  background-color: #4b9aea;
 }
 
+.social-icons a.instagram:hover::before {
+  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
+}
 
-.foot-panel2 .fa-x-twitter:hover {
-  background-color: black;
-  color: white;
+.social-icons a.twitter:hover::before {
+  background-color: #1da1f2;
 }
 
-.foot-panel2 .fa-linkedin:hover {
-  background-color: #0072b1;
-  color: white;
+.social-icons a.linkedin:hover::before {
+  background-color: #0077b5;
 }
 
-.foot-panel2 .fa-github:hover {
-  background-color: #040204;
-  color: white;
+.social-icons a.github:hover::before {
+  background-color: #333;
 }
 
-.foot-panel2 .fa-discord:hover {
-  background-color: #5865f2;
-  color: white;
+.social-icons a.discord:hover::before {
+  background-color: #7289da;
 }
-.fa-linkedin:hover {
-  background-color: blue;
-  color: white;
+
+/* Ensure smooth transition for all properties */
+.social-icons a,
+.social-icons a::before,
+.social-icons a i {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-#author {
-  padding: 3px;
-  color: #dddddd;
+.social-text {
+  max-width: 600px;
+  margin: 0 auto;
+  text-align: center;
+  color: #cccccc;
 }
 
-.foot-panel2 .copyright {
-  background-color: rgb(98, 25, 25);
+.copyright {
+  background-color: #0f0f0f;
+  padding: 15px 0;
+  text-align: center;
+  margin-bottom: -5rem;
 }
 
-.foot-panel2 .text {
+.copyright p {
+  font-style: italic;
   margin: 0;
+  font-size: 0.9rem;
+  color: #cccccc;
+}
+
+.copyright a {
+  color: #ff6b6b;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.copyright a:hover {
+  color: #ff4757;
 }
 
-.social-icons :hover{
-  transform:scale(1.3);
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .foot-panel1 .col-sm-6 {
+    margin-bottom: 30px;
+  }
+}
 
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
-.media-handles h4:hover{
-  /* transform:scale(1.1); */
-color:#d24b29;
+
+.footer-heading, .footer-links, #contactForm, .social-icons, .social-text {
+  opacity: 0;
+  animation: fadeIn 1s ease-out forwards;
 }
-.row h5:hover,
-.row h3:hover {
-  color:#d24b29;
+
+.social-icons a {
+  animation: bounceIn 0.5s ease-out;
 }
+
+@keyframes bounceIn {
+  0% { transform: scale(0.1); opacity: 0; }
+  60% { transform: scale(1.2); opacity: 1; }
+  100% { transform: scale(1); }
+}
+
+/* Ensure animations play on load */
+body:not(.preload) * {
+  transition: all 0.3s ease-in-out;
+}
\ No newline at end of file
diff --git a/Html-files/ordertracking.html b/Html-files/ordertracking.html
index 4e850d6b..8984e44e 100644
--- a/Html-files/ordertracking.html
+++ b/Html-files/ordertracking.html
@@ -186,170 +186,77 @@ <h4>Delivery Address</h4>
     </div>
 
     <footer>
-        <div class="foot-panel1 w-100">
-          <div class="container-fluid py-5 px-0">
-            <div class="row justify-content-evenly gy-5">
-              <div class="col-6 col-sm-3 col-md-2 col-xl-2">
-                <h5 class="mb-3">See Also</h5>
-                <ul class="nav flex-column">
-                  <li class="nav-item">
-                    <a class="nav-link" href="../index.html">Home</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" href="../Html-files/menu.html">Menu</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" href="../Html-files/services.html"
-                      >Services</a
-                    >
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" href="../Html-files/contact.html"
-                      >Contact us</a
-                    >
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" href="../Html-files/cart.html">Cart</a>
-                  </li>
-                </ul>
-              </div>
-  
-              <div class="col-6 col-sm-5 col-md-3 col-xl-3">
-                <h5 class="mb-3">Exclusive Offers</h5>
-                <ul class="nav flex-column">
-                  <li class="nav-item">
-                      <a href="#" class="nav-link">Foodie Discounts</a>
-                  </li>
-                  <li class="nav-item">
-                      <a class="nav-link" href="/Html-files/offers/limited-time-products.html">Limited-Time Promotions</a>
-                  </li>
-                  <li class="nav-item">
-                      <a class="nav-link" href="/Html-files/offers/special-event.html">Special Event Packages</a>
-                  </li>
-                  <li class="nav-item">
-                      <a class="nav-link" href="/Html-files/offers/membership-benifits.html">Membership Benefits</a>
-                  </li>
-                  <li class="nav-item">
-                      <a class="nav-link" href="/Html-files/offers/early-access.html">Early Access to New Recipes</a>
-                  </li>
-                  <li class="nav-item">
-                      <a class="nav-link" href="/Html-files/offers/vip-food-event.html">VIP Foodie Events</a>
-                  </li>
-                  <li class="nav-item">
-                      <a class="nav-link" href="/Html-files/offers/culinary-experience.html">Personalized Culinary Experiences</a>
-                  </li>
+      <div class="foot-panel1">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-3 col-sm-6">
+              <h5 class="footer-heading">See Also</h5>
+              <ul class="footer-links">
+                <li><a href="../index.html">Home</a></li>
+                <li><a href="../Html-files/menu.html">Menu</a></li>
+                <li><a href="../Html-files/services.html">Services</a></li>
+                <li><a href="../Html-files/contact.html">Contact us</a></li>
+                <li><a href="../Html-files/cart.html">Cart</a></li>
               </ul>
-              </div>
-  
-              <div class="col-6 col-sm-4 col-md-4 col-xl-3">
-                <h5 class="mb-3">Payment Products</h5>
-                <ul class="nav flex-column">
-                  <li class="nav-item">
-                    <a href="/Html-files/payment/secure-checkout.html" class="nav-link">Secure Checkout</a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="/Html-files/payment/credit-debit-card.html" class="nav-link">Credit/Debit Cards</a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="/Html-files/payment/secure-checkout.html" class="nav-link">Secure Checkout</a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="/Html-files/payment/online-payment.html" class="nav-link">Online Payment</a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="/Html-files/payment/mobile-wallet.html" class="nav-link">Mobile Wallets</a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="/Html-files/payment/contact-less-payment.html" class="nav-link">Contactless Payments</a>
-                  </li>
-                </ul>
-              </div>
-  
-              <div class="col-6 col-md-3 col-xl-4">
-                <form
-                  id="contactForm"
-                  action="https://formsubmit.co/xyz@gmail.com"
-                  method="POST"
-                >
-                  <h3 class="text-center mb-3">Contact Us!</h3>
-                  <input
-                    type="email"
-                    id="footer-email"
-                    name="email"
-                    placeholder="Your Email"
-                    class="text-center form-control mb-2"
-                    required
-                  />
-                  <textarea
-                    id="footer-message"
-                    name="message"
-                    placeholder="Your Message"
-                    class="text-center form-control mb-2"
-                    required
-                  ></textarea>
-                  <div class="d-grid gap-2 col-12">
-                    <button type="submit" class="btn btn-danger">
-                      Send Message
-                    </button>
-                  </div>
-                </form>
-              </div>
             </div>
-          </div>
-        </div>
-        <div class="foot-panel2">
-          <div class="media-handles pt-3 pb-2">
-            <h4>Follow Us</h4>
-            <div class="social-icons">
-              <a
-                class="fa-brands fa-facebook"
-                href="https://facebook.com"
-                target="_blank"
-              ></a>
-              <a
-                class="fa-brands fa-instagram"
-                href="https://instagram.com"
-                target="_blank"
-              ></a>
-              <a
-                class="fa-brands fa-x-twitter"
-                href="https://twitter.com"
-                target="_blank"
-              ></a>
-              <a
-                class="fa-brands fa-linkedin"
-                href="https://linkedin.com"
-                target="_blank"
-              ></a>
-              <a
-                class="fa-brands fa-github"
-                href="https://github.com/khushi-joshi-05/Food-ordering-website"
-                target="_blank"
-              ></a>
-              <a
-                class="fa-brands fa-discord"
-                href="https://discord.com/invite/sybYafYA"
-                target="_blank"
-              ></a>
+            <div class="col-md-3 col-sm-6">
+              <h5 class="footer-heading">Exclusive Offers</h5>
+              <ul class="footer-links">
+                <li><a href="#">Foodie Discounts</a></li>
+                <li><a href="/Html-files/offers/limited-time-products.html">Limited-Time Promotions</a></li>
+                <li><a href="/Html-files/offers/special-event.html">Special Event Packages</a></li>
+                <li><a href="/Html-files/offers/membership-benifits.html">Membership Benefits</a></li>
+                <li><a href="/Html-files/offers/early-access.html">Early Access to New Recipes</a></li>
+                <li><a href="/Html-files/offers/vip-food-event.html">VIP Foodie Events</a></li>
+                <li><a href="/Html-files/offers/culinary-experience.html">Personalized Culinary Experiences</a></li>
+              </ul>
+            </div>
+            <div class="col-md-3 col-sm-6">
+              <h5 class="footer-heading">Payment Products</h5>
+              <ul class="footer-links">
+                <li><a href="/Html-files/payment/secure-checkout.html">Secure Checkout</a></li>
+                <li><a href="/Html-files/payment/credit-debit-card.html">Credit/Debit Cards</a></li>
+                <li><a href="/Html-files/payment/online-payment.html">Online Payment</a></li>
+                <li><a href="/Html-files/payment/mobile-wallet.html">Mobile Wallets</a></li>
+                <li><a href="/Html-files/payment/contact-less-payment.html">Contactless Payments</a></li>
+              </ul>
+            </div>
+            <div class="col-md-3 col-sm-6">
+              <h5 class="footer-heading">Contact Us!</h5>
+              <form id="contactForm" action="https://formsubmit.co/xyz@gmail.com" method="POST">
+                <div class="form-group">
+                  <input type="email" id="footer-email" name="email" placeholder="Your Email" class="form-control" required />
+                </div>
+                <div class="form-group">
+                  <textarea id="footer-message" name="message" placeholder="Your Message" class="form-control" required></textarea>
+                </div>
+                <button type="submit" class="btn btn-custom">Send Message</button>
+              </form>
             </div>
-            <p class="text">
-              Stay connected with us on social media for the latest updates,
-              recipes, and foodie adventures.
-            </p>
           </div>
-          <div class="copyright py-1">
-            &copy;
-            <span id="copyright-year"></span> Foodies - All Rights Reserved |
-            <span id="author">
-              <a
-                href="https://www.linkedin.com/in/khushi-joshi-95a587256/"
-                target="_blank"
-                >Khushi Joshi</a
-              >
-            </span>
+        </div>
+      </div>
+      <div class="foot-panel2">
+        <div class="container">
+          <h4 class="follow-us">Follow Us</h4>
+          <div class="social-icons">
+            <a href="https://facebook.com" target="_blank" class="facebook"><i class="fab fa-facebook-f"></i></a>
+            <a href="https://instagram.com" target="_blank" class="instagram"><i class="fab fa-instagram"></i></a>
+            <a href="https://twitter.com" target="_blank" class="twitter"><i class="fab fa-twitter"></i></a>
+            <a href="https://linkedin.com" target="_blank" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
+            <a href="https://github.com/khushi-joshi-05/Food-ordering-website" target="_blank" class="github"><i class="fab fa-github"></i></a>
+            <a href="https://discord.com/invite/sybYafYA" target="_blank" class="discord"><i class="fab fa-discord"></i></a>
           </div>
+          <p class="social-text">Stay connected with us on social media for the latest updates, recipes, and foodie adventures.</p>
         </div>
-      </footer>
+      </div>
+      <div class="copyright">
+        <div class="container">
+          <p>&copy; <span id="copyright-year"></span> Foodies - All Rights Reserved | <a href="https://www.linkedin.com/in/khushi-joshi-95a587256/" target="_blank">Khushi Joshi</a></p>
+        </div>
+      </div>
+    </footer>
+    
 
     <!--Scroll top button-->
     <button id="scroll-top-button" class="scroll-top-button" onclick="goToTop()">
@@ -359,6 +266,7 @@ <h4>Follow Us</h4>
     </button>
 
     <script>
+      
         function initMap() {
     const defaultLocation = { lat: 40.7128, lng: -74.0060 }; // Default to New York City
     
diff --git a/index.html b/index.html
index b1637f61..55c9f527 100644
--- a/index.html
+++ b/index.html
@@ -892,150 +892,76 @@ <h2 class="text-center">Download This Amazing App Now!</h2>
     </div>
 
     <footer>
-        <div class="foot-panel1 w-100">
-            <div class="container-fluid py-5 px-0">
-                <div class="row justify-content-evenly gy-5">
-                    <div class="col-6 col-sm-3 col-md-2 col-xl-2">
-                        <h5 class="mb-3" style="margin-left: 70px;">See Also</h5>
-                        <ul class="nav flex-column">
-                            <li class="nav-item">
-                                <a class="nav-link" href="#">Home</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="./Html-files/menu.html">Menu</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="./Html-files/services.html">Services</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="./Html-files/contact.html">Contact us</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="./Html-files/cart.html">Cart</a>
-                            </li>
-                            
-                            <li class="nav-item">
-                                <a class="nav-link" href="/Html-files/contributor.html">Our Contributors</a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="col-6 col-sm-5 col-md-3 col-xl-3">
-                        <h5 class="mb-3" style="margin-left: 90px;">Exclusive Offers</h5>
-                        <ul class="nav flex-column">
-                            <li class="nav-item">
-                                <a href="#" class="nav-link">Foodie Discounts</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="#">Limited-Time Promotions</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="#">Special Event Packages</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="/Html-files/offers/membership-benifits.html">Membership Benefits</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="#">Early Access to New Recipes</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="#">VIP Foodie Events</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="/Html-files/offers/culinary-experience.html">Personalized Culinary Experiences</a>
-                            </li>
-                        </ul>
-                    </div>
-
-
-                    <div class="col-6 col-sm-4 col-md-4 col-xl-3">
-                        <h5 class="mb-3" style="margin-left: 70px;">Payment Products</h5>
-                        <ul class="nav flex-column">
-                            <li class="nav-item">
-                                <a href="" class="nav-link">Secure Checkout</a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="" class="nav-link">Credit/Debit Cards</a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="" class="nav-link">Secure Checkout</a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="" class="nav-link">Online Payment</a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="" class="nav-link">Mobile Wallets</a>
-                            </li>
-                            <li class="nav-item">
-                                <a href="" class="nav-link">Contactless Payments</a>
-                            </li>
-                        </ul>
-                    </div>
-
-
-                    <div class="col-6 col-md-3 col-xl-4">
-                        <form id="contactForm" action="https://formsubmit.co/xyz@gmail.com" method="POST">
-                            <h3 class="text-center mb-3">Contact Us!</h3>
-                            <input type="email" id="footer-email" name="email" placeholder="Your Email" class="text-center form-control mb-2" required>
-                            <textarea id="footer-message" name="footer-message" placeholder="Your Message" class="text-center form-control mb-2" required></textarea>
-                            <div class="d-grid gap-2 col-12">
-                                <button type="submit" class="btn btn-danger">Send Message</button>
-                            </div>
-                        </form>
-                    </div>
-
-
-
-                </div>
+        <div class="foot-panel1">
+          <div class="container">
+            <div class="row">
+              <div class="col-md-3 col-sm-6">
+                <h5 class="footer-heading">See Also</h5>
+                <ul class="footer-links">
+                  <li><a href="../index.html">Home</a></li>
+                  <li><a href="../Html-files/menu.html">Menu</a></li>
+                  <li><a href="../Html-files/services.html">Services</a></li>
+                  <li><a href="../Html-files/contact.html">Contact us</a></li>
+                  <li><a href="../Html-files/cart.html">Cart</a></li>
+                </ul>
+              </div>
+              <div class="col-md-3 col-sm-6">
+                <h5 class="footer-heading">Exclusive Offers</h5>
+                <ul class="footer-links">
+                  <li><a href="#">Foodie Discounts</a></li>
+                  <li><a href="/Html-files/offers/limited-time-products.html">Limited-Time Promotions</a></li>
+                  <li><a href="/Html-files/offers/special-event.html">Special Event Packages</a></li>
+                  <li><a href="/Html-files/offers/membership-benifits.html">Membership Benefits</a></li>
+                  <li><a href="/Html-files/offers/early-access.html">Early Access to New Recipes</a></li>
+                  <li><a href="/Html-files/offers/vip-food-event.html">VIP Foodie Events</a></li>
+                  <li><a href="/Html-files/offers/culinary-experience.html">Personalized Culinary Experiences</a></li>
+                </ul>
+              </div>
+              <div class="col-md-3 col-sm-6">
+                <h5 class="footer-heading">Payment Products</h5>
+                <ul class="footer-links">
+                  <li><a href="/Html-files/payment/secure-checkout.html">Secure Checkout</a></li>
+                  <li><a href="/Html-files/payment/credit-debit-card.html">Credit/Debit Cards</a></li>
+                  <li><a href="/Html-files/payment/online-payment.html">Online Payment</a></li>
+                  <li><a href="/Html-files/payment/mobile-wallet.html">Mobile Wallets</a></li>
+                  <li><a href="/Html-files/payment/contact-less-payment.html">Contactless Payments</a></li>
+                </ul>
+              </div>
+              <div class="col-md-3 col-sm-6">
+                <h5 class="footer-heading">Contact Us!</h5>
+                <form id="contactForm" action="https://formsubmit.co/xyz@gmail.com" method="POST">
+                  <div class="form-group">
+                    <input type="email" id="footer-email" name="email" placeholder="Your Email" class="form-control" required />
+                  </div>
+                  <div class="form-group">
+                    <textarea id="footer-message" name="message" placeholder="Your Message" class="form-control" required></textarea>
+                  </div>
+                  <button type="submit" class="btn btn-custom">Send Message</button>
+                </form>
+              </div>
             </div>
+          </div>
         </div>
-
         <div class="foot-panel2">
-            <div class="media-handles pt-3 pb-2">
-                <h4>Follow Us</h4>
-                <div class="social-icons">
-                    <a class="fa-brands fa-facebook" href="https://facebook.com" target="_blank"></a>
-                    <a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
-                    <a class="fa-brands fa-x-twitter" href="https://twitter.com" target="_blank"></a>
-                    <a class="fa-brands fa-snapchat" href="https://snapchat.com" target="_blank"></a>
-                    <a class="fa-brands fa-youtube" href="https://youtube.com" target="_blank"></a>
-                    <a class="fa-brands fa-linkedin" href="https://linkedin.com" target="_blank"></a>
-                    <a class="fa-brands fa-github" href="https://github.com/khushi-joshi-05/Food-ordering-website" target="_blank"></a>
-                    <a class="fa-brands fa-discord" href="https://discord.com/invite/sybYafYA" target="_blank"></a>
-                </div>
-                <p class="text"> Stay connected with us on social media for the latest updates, recipes, and foodie adventures. </p>
-                <div>
-                    Give your valuable
-                    <Link to="">
-                    <a href="/Html-files/feedback.html"><b>feedback!</b></a>
-                    </Link>
-                </div>
-            </div>
-            <div class="copyright py-1">
-                &copy;
-                <span id="copyright-year"></span> Foodies - All Rights Reserved |
-                <span id="terms"></span>
-
-                <Link to="" >
-                    <a href="/Html-files/terms.html" class="legal-pages">Terms and Conditions</a> |
-                </Link>
-                <span id="privacy"></span>
-                <Link to="" >
-                    <a href="/Html-files/privacy.html" class="legal-pages">Privacy Policy</a> |
-
-                </Link>
-
-                <span id="Licensing"></span>
-                <Link to="" >
-                    <a href="/Html-files/Licensing.html" class="legal-pages">Licensing</a> |
-                </Link>
-
-                <span id="author">
-                    <a href="https://www.linkedin.com/in/khushi-joshi-95a587256/" target="_blank" class="legal-pages">Khushi Joshi</a>
-                </span>
+          <div class="container">
+            <h4 class="follow-us">Follow Us</h4>
+            <div class="social-icons">
+              <a href="https://facebook.com" target="_blank" class="facebook"><i class="fab fa-facebook-f"></i></a>
+              <a href="https://instagram.com" target="_blank" class="instagram"><i class="fab fa-instagram"></i></a>
+              <a href="https://twitter.com" target="_blank" class="twitter"><i class="fab fa-twitter"></i></a>
+              <a href="https://linkedin.com" target="_blank" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
+              <a href="https://github.com/khushi-joshi-05/Food-ordering-website" target="_blank" class="github"><i class="fab fa-github"></i></a>
+              <a href="https://discord.com/invite/sybYafYA" target="_blank" class="discord"><i class="fab fa-discord"></i></a>
             </div>
+            <p class="social-text">Stay connected with us on social media for the latest updates, recipes, and foodie adventures.</p>
+          </div>
+        </div>
+        <div class="copyright">
+          <div class="container">
+            <p>&copy; <span id="copyright-year"></span> Foodies - All Rights Reserved | <a href="https://www.linkedin.com/in/khushi-joshi-95a587256/" target="_blank">Khushi Joshi</a></p>
+          </div>
         </div>
-    </footer>
+      </footer>
 
     <button id="scroll-top-button" class="scroll-top-button" onclick="goToTop()">
         <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="white"

From d95419896bfb3a554ee690e6bdb39caede38bb87 Mon Sep 17 00:00:00 2001
From: sauraabhh <saurabhsangam2704@gmail.com>
Date: Sun, 4 Aug 2024 16:02:11 +0530
Subject: [PATCH 3/4] fixed issue 1150

---
 index.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index b1637f61..2e0bd41b 100644
--- a/index.html
+++ b/index.html
@@ -76,17 +76,19 @@
         <div class="loader-section section-left"></div>
         <div class="loader-section section-right"></div>
     </div>
-    <div id="caduceus-container">
+    <!-- <div id="caduceus-container">
         <div class="rope"></div>
         <img id="caduceus" src="Images/image.png" alt="Caduceus">
-      </div>
+      </div> --> 
     <nav class="navbar navbar-expand-lg fixed-top">
         <div class="container-fluid">
             <!-- Brand Logo -->
 
 
             <a href="index.html">
-                <img id="theme-toggle-logo"  src="Images/logo/Logo-Light.png" height="70" width="70"  alt="Brand Logo">
+                <img id="theme-toggle-logo" 
+                style="height: 50px; width: 50px;"
+                src="Images/logo/Logo-Light.png"  alt="Brand Logo">
 
 
             </a>
@@ -97,7 +99,9 @@
                 <span class="navbar-toggler-icon"></span>
             </button>
             <!-- Centered Navbar Links -->
-            <div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
+            <div 
+            style=" margin-left: 25vw;"
+            class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
                 <ul class="navbar-nav center-links">
                     <li class="nav-item">
                         <a class="nav-link active" aria-current="page" href="index.html">
@@ -475,10 +479,11 @@ <h1 class="tagline py-2 text-center mx-auto" data-aos="zoom-out-up" data-aos-off
             .btn {
                 border: none;
                 padding: .7em 1.8em;
-                border-radius: 5px;
                 font-weight: 600;
+                border-radius: 2px;
                 cursor: pointer;
                 font-size: .8rem;
+                background-color: rgb(68, 67, 67);
             }
             
             .btn-card {
@@ -487,7 +492,7 @@ <h1 class="tagline py-2 text-center mx-auto" data-aos="zoom-out-up" data-aos-off
             }
             
             .btn-card:hover {
-                background: #59a10c;
+                background: #59a10cc9;
             }
         </style>
 

From 7c91fdc20de9b355556fe7435ed6aaf4d75b5c15 Mon Sep 17 00:00:00 2001
From: VijaySamant4368 <vijaysamant4368@gmail.com>
Date: Sun, 4 Aug 2024 20:07:41 +0530
Subject: [PATCH 4/4] Changed button

---
 Css-files/mode-toggler.css | 89 ++++++++++++++++++++++++++++++++++++++
 Html-files/navbar.js       | 13 +-----
 Images/moon.svg            | 17 ++++++++
 Images/sun.svg             | 23 ++++++++++
 index.html                 | 19 +++++---
 5 files changed, 144 insertions(+), 17 deletions(-)
 create mode 100644 Css-files/mode-toggler.css
 create mode 100644 Images/moon.svg
 create mode 100644 Images/sun.svg

diff --git a/Css-files/mode-toggler.css b/Css-files/mode-toggler.css
new file mode 100644
index 00000000..24ba661f
--- /dev/null
+++ b/Css-files/mode-toggler.css
@@ -0,0 +1,89 @@
+.toggle-container {
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  right: -4px;
+  top: 15px;
+  /* position: fixed; */
+  top: 40px;
+  right: 20%;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  width: 40px;
+  height: 20px;
+  margin-top: 10px;
+}
+
+
+/* Hidden Checkbox */
+.switch-checkbox {
+  display: none;
+}
+
+.theme-switch {
+  position: relative;
+  width: 45px;
+  height: 30px;
+  background-color: #ccc;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.5s ease;
+}
+
+.theme-switch .light-mode-icon,
+.theme-switch .dark-mode-icon {
+  font-size: 19px;
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: opacity 0.5s ease, color 0.5s ease;
+}
+
+.theme-switch .light-mode-icon {
+  color: #f39c12;
+}
+
+.theme-switch .dark-mode-icon {
+  color: #bdc3c7;
+  opacity: 0;
+}
+
+.toggle-button {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 25px;
+  height: 25px;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transition: transform 0.5s ease, background-color 0.5s ease;
+}
+
+/* Checkbox Checked State */
+.switch-checkbox:checked + .theme-switch {
+  background-color: #34495e;
+}
+
+.switch-checkbox:checked + .theme-switch .light-mode-icon {
+  opacity: 0;
+}
+
+.switch-checkbox:checked + .theme-switch .dark-mode-icon {
+  opacity: 1;
+}
+
+.switch-checkbox:checked + .theme-switch .toggle-button {
+  transform: translateX(13px);
+  /* background-color: #34495e; */
+}
diff --git a/Html-files/navbar.js b/Html-files/navbar.js
index 745bc203..3d02f678 100644
--- a/Html-files/navbar.js
+++ b/Html-files/navbar.js
@@ -1,17 +1,8 @@
 //Themechange icon toggling behaviour
-let themeToggleIcon = document.getElementById("theme-toggle-icon");
-let themeToggleLogo = document.getElementById("theme-toggle-logo");
-themeToggleIcon.addEventListener("click", function () {
+function toggleTheme() {
   document.body.classList.toggle("dark-theme");
   document.body.classList.toggle(":root")
-  if (document.body.classList.contains("dark-theme")) {
-    themeToggleIcon.src = "../Images/navbar/sun.png";
-    themeToggleLogo.src = "Images/logo/Logo-Dark.png";
-  } else {
-    themeToggleIcon.src = "../Images/navbar/moon.png";
-    themeToggleLogo.src="Images/logo/Logo-Light.png";
-  }
-});
+}
 
 //Services dropdown
 
diff --git a/Images/moon.svg b/Images/moon.svg
new file mode 100644
index 00000000..27b75366
--- /dev/null
+++ b/Images/moon.svg
@@ -0,0 +1,17 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="grey"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    
+>
+    <path
+        d="M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z"
+        fill="black"
+    />
+</svg>
\ No newline at end of file
diff --git a/Images/sun.svg b/Images/sun.svg
new file mode 100644
index 00000000..8619f787
--- /dev/null
+++ b/Images/sun.svg
@@ -0,0 +1,23 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="orange"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    
+>
+    <circle cx="12" cy="12" r="5"
+    fill="yellow" />
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index b1637f61..66ee29f3 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="Css-files/scroll-top-button.css">
     <link rel="stylesheet" href="Css-files/navbar.css">
     <link rel="stylesheet" href="Css-files/footer.css">
+    <link rel="stylesheet" href="Css-files/mode-toggler.css">
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
     <link rel="stylesheet" href="Css-files/googletranslate.css">
@@ -164,12 +165,18 @@
                 </ul>
             </div>
             <!-- Theme Toggle Icon -->
-            <div class="order-0 ml-auto p-2">
-
-                <img class="nav-link" src="Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
-
-            </div>
-
+            <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
+
+            <div id="sun-moon-mode-toggler" class="toggle-container" >
+              <input type="checkbox" id="themeToggle" class="switch-checkbox" onclick="toggleTheme()">
+              <label  id="themeChangeToggle" class="theme-switch" for="themeToggle">
+              <div class="toggle-button">
+                  <span class="light-mode-icon"><img src="images/sun.svg" style = "display: block;"></span>
+                  <span class="dark-mode-icon"><img src="images/moon.svg"style = "display: block;"></span>
+              </div>
+              </label>
+          </div>
+        
             <!-- End Navbar Links -->