diff --git a/Css-files/navbarstyles.css b/Css-files/navbarstyles.css
index 5f22fd7c..572d1269 100644
--- a/Css-files/navbarstyles.css
+++ b/Css-files/navbarstyles.css
@@ -33,6 +33,7 @@ body {
color: black;
font-weight: bold;
transition: transform 0.3s ease;
+ font-family: var(--ff-philosopher);
}
.navbar-brand:hover {
@@ -164,4 +165,179 @@ body {
.nav-item {
margin-bottom: 1rem;
}
-}
\ No newline at end of file
+}
+
+.dark-mode{
+ body {
+ font-family: 'Philosopher', sans-serif;
+ margin: 0;
+ padding: 0;
+ }
+
+ /* Navbar styles */
+ .navbar {
+ background-color: black;
+ color: white;
+ padding: 1rem;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ margin: 10px 1px!important;
+ border-radius: 20px;
+ }
+
+ .nav-right {
+ margin-left: auto;
+ /* Pushes the login/signup to the right side */
+ display: flex;
+ gap: 15px;
+ /* Space between login and signup */
+ }
+
+ .ms-auto {
+ margin-left: auto;
+ /* Pushes to the right */
+ }
+
+ .navbar-brand {
+ font-size: 1.5rem;
+ color: whitesmoke;
+ font-weight: bold;
+ transition: transform 0.3s ease;
+ font-family: var(--ff-philosopher)
+ }
+
+ .navbar-brand:hover {
+ transform: scale(1.6);
+ }
+
+ .navbar-nav .nav-item {
+ margin-right: 15px;
+ }
+
+ .nav-link {
+ color: white;
+ font-size: 1rem;
+ font-family: var(--ff-philosopher);
+ text-decoration: none;
+ /* Remove default underline */
+ position: relative;
+ transition: all 0.3s ease;
+ font-weight: 400;
+ font-size: 21px;
+ line-height: 31px;
+ }
+
+ .nav-item.dropdown .nav-link {
+ text-decoration: none;
+ /* No underline for dropdown toggle */
+ }
+
+ .nav-link:hover {
+ text-decoration: none;
+ /* Prevent default underline on hover */
+ }
+
+ .nav-link::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ width: 0%;
+ height: 3.5px;
+ /* Thicker underline */
+ background: transparent;
+ transition: all 0.3s ease-in-out;
+ box-shadow:
+ 0 0 30px rgba(255, 159, 128, 1),
+ /* Initial glow effect with bright peach color */
+ 0 0 60px rgba(255, 159, 128, 1);
+ /* Increased glow effect */
+ }
+
+ .nav-link:hover::after {
+ background: rgba(243, 187, 183, 1);
+ width: 100%;
+ box-shadow: 0 0 20px rgba(243, 187, 183, 1);
+ }
+
+ .nav-btn {
+ background: none;
+ border: none;
+ font-size: 1rem;
+ cursor: pointer;
+ color: white;
+ text-decoration: none;
+ position: relative;
+ }
+
+ .nav-btn:hover {
+ color: #d2691e;
+ }
+
+ .nav-btn::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ width: 0%;
+ height: 2px;
+ background: #ffb6c1;
+ /* Adjust to match background color */
+ transition: all 0.3s ease-in-out;
+ box-shadow: 0 20px #ffb6c1;
+ /* Glow effect */
+ }
+
+ .nav-link:hover::after {
+ background: rgba(255, 159, 128, 1);
+ width: 100%;
+ box-shadow:
+ 0 0 25px rgba(255, 159, 128, 1),
+ 0 0 50px rgba(255, 159, 128, 1);
+ /* Glow effect with bright peach color */
+ }
+
+ .nav-link:hover,
+ .nav-btn:hover {
+ color: hwb(327 21% 3%) !important;
+ }
+
+ .dropdown-menu {
+ background-color: #ffe5e5;
+ border: none;
+ }
+
+ .dropdown-item {
+ /*color: black;*/
+ font-family: var(--ff-philosopher);
+ }
+
+ .dropdown-item:hover {
+ background-color: #f0c0a0;
+ color: #d2691e;
+ }
+
+ /* Mobile Styles */
+ @media (max-width: 768px) {
+ .navbar-brand {
+ margin-left: 10px;
+ }
+
+ .navbar-nav {
+ text-align: center;
+ }
+
+ .navbar-toggler {
+ border: none;
+ }
+
+ .navbar-toggler-icon {
+ color: white;
+ }
+
+ .nav-item {
+ margin-bottom: 1rem;
+ }
+ }
+}
diff --git a/Css-files/themeToggle.css b/Css-files/themeToggle.css
new file mode 100644
index 00000000..69f2ba59
--- /dev/null
+++ b/Css-files/themeToggle.css
@@ -0,0 +1,85 @@
+* {
+ box-sizing: border-box;
+ transition: 0.5s;
+}
+
+input {
+ display: none;
+}
+
+.display {
+ position: relative;
+ width: 100%;
+ top: 18%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: white;
+}
+
+label {
+ width: 80px;
+ height: 40px;
+ border-radius: 40px;
+ background: #F3F3F3;
+ box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05) inset;
+ cursor: pointer;
+ position: relative;
+}
+
+.circle {
+ width: 160px;
+ height: 160px;
+ border-radius: 99px;
+ background: white;
+ box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.05),
+ -10px -10px 30px rgba(0, 0, 0, 0.05) inset;
+ position: absolute;
+ top: 50%;
+ left: 0%;
+ transform: translate(10%, -50%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+}
+svg {
+ width: 80px;
+ position: absolute;
+}
+.sun {
+ color: #FFD600;
+ margin-top: 0%;
+ opacity: 1;
+}
+.moon {
+ margin-top: -150%;
+ color: white;
+ opacity: 0;
+}
+
+input[type=checkbox]:checked + .display {
+ background: #2C2C2F;
+}
+input[type=checkbox]:checked + .display label {
+ background: #1F1F21;
+ box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5) inset;
+}
+input[type=checkbox]:checked + .display label .circle {
+ left: 100%;
+ transform: translate(-110%, -50%);
+ background: #2C2C2F;
+ box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
+ -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
+}
+input[type=checkbox]:checked + .display label .circle .sun {
+ margin-top: 150%;
+ opacity: 0;
+}
+input[type=checkbox]:checked + .display label .circle .moon {
+ margin-top: 0%;
+ opacity: 1;
+}
+label:active .circle {
+ width: 200px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 7d22b671..798c1b06 100644
--- a/index.html
+++ b/index.html
@@ -15,19 +15,14 @@
}
-
-
-
+
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/themeToggle.js b/themeToggle.js
new file mode 100644
index 00000000..d8db51a9
--- /dev/null
+++ b/themeToggle.js
@@ -0,0 +1,11 @@
+function toggleDarkMode() {
+ let isDark = document.body.classList.toggle('dark-mode');
+ localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
+ }
+
+ // On page load
+ document.addEventListener('DOMContentLoaded', (event) => {
+ if (localStorage.getItem('darkMode') === 'enabled') {
+ document.body.classList.add('dark-mode');
+ }
+ });
\ No newline at end of file
-