From e89ecc0a1339308bc40f40c71b4b21c819f9f4de Mon Sep 17 00:00:00 2001
From: Neeru <161798182+neeru24@users.noreply.github.com>
Date: Tue, 31 Dec 2024 21:20:26 +0530
Subject: [PATCH 1/2] Enhanced the contact form field interactions (#32)
---
assets/contact/contact.css | 14 ++++++++++++--
1 file changed, 12 insertions(+), 2 deletions(-)
diff --git a/assets/contact/contact.css b/assets/contact/contact.css
index b897467..384afba 100644
--- a/assets/contact/contact.css
+++ b/assets/contact/contact.css
@@ -37,7 +37,15 @@ textarea {
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 16px;
- transition: border-color 0.3s ease;
+ transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+input[type="text"]:hover,
+input[type="email"]:hover,
+textarea:hover {
+ border-color: var(--primary-color);
+ transform: scale(1.02);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
input[type="text"]:focus,
@@ -45,6 +53,8 @@ input[type="email"]:focus,
textarea:focus {
outline: none;
border-color: var(--primary-color);
+ transform: scale(1.03);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
textarea {
@@ -61,7 +71,7 @@ textarea {
font-weight: 600;
border-radius: 4px;
cursor: pointer;
- transition:
+ transition:
background-color 0.3s ease-in-out,
opacity 0.3s ease-in-out,
transform 0.3s ease-in-out,
From 599ba0042325892c6e257befa532e3f00cf98e5e Mon Sep 17 00:00:00 2001
From: Abankita Behera <138569378+Abankita@users.noreply.github.com>
Date: Thu, 2 Jan 2025 14:42:52 +0530
Subject: [PATCH 2/2] Added dark mode to the website (#25)
---
assets/about/about.css | 20 +++++++++
assets/about/about.html | 5 +++
assets/contact/contact.css | 23 ++++++++++
assets/contact/contact.html | 5 +++
assets/pastevents/pastevents.css | 26 +++++++++++
assets/pastevents/pastevents.html | 5 +++
index.html | 5 +++
script.js | 5 +++
style.css | 75 +++++++++++++++++++++++++++++++
9 files changed, 169 insertions(+)
diff --git a/assets/about/about.css b/assets/about/about.css
index ae97461..26abf9f 100644
--- a/assets/about/about.css
+++ b/assets/about/about.css
@@ -12,6 +12,26 @@ body {
height: 100%;
}
+/* Dark mode Css*/
+
+body.dark-mode .about-section {
+ background-color: #1e1e1e;
+ color: #f4f4f4;
+}
+
+body.dark-mode .about-image {
+ filter: brightness(80%);
+}
+
+body.dark-mode .feature-item {
+ background-color: #282828;
+ color: #f4f4f4;
+}
+
+body.dark-mode .about-content {
+ background-color: rgba(40, 44, 52, 1);
+}
+
.about-section {
padding: 6rem 0 4rem;
background: linear-gradient(135deg, #4a90e2, #e74c3c);
diff --git a/assets/about/about.html b/assets/about/about.html
index 846e347..1a2d97f 100644
--- a/assets/about/about.html
+++ b/assets/about/about.html
@@ -45,6 +45,11 @@
+
+
+
diff --git a/assets/contact/contact.css b/assets/contact/contact.css
index 384afba..352c11d 100644
--- a/assets/contact/contact.css
+++ b/assets/contact/contact.css
@@ -1,3 +1,26 @@
+/* Dark mode Css */
+
+body.dark-mode .contact-section {
+ background-color: #1e1e1e;
+ color: #f4f4f4;
+}
+
+body.dark-mode .contact-form {
+ background-color: #282828;
+ color: #f4f4f4;
+}
+
+body.dark-mode .contact-form input,
+body.dark-mode .contact-form textarea {
+ background-color: #333;
+ color: #f4f4f4;
+}
+
+body.dark-mode .submit-button {
+ background-color: #444;
+ color: #f4f4f4;
+}
+
.contact-section {
padding: 80px 0;
background-color: #f8f9fa;
diff --git a/assets/contact/contact.html b/assets/contact/contact.html
index 1ff14b1..003988a 100644
--- a/assets/contact/contact.html
+++ b/assets/contact/contact.html
@@ -45,6 +45,11 @@
+
+
+
diff --git a/assets/pastevents/pastevents.css b/assets/pastevents/pastevents.css
index 9334064..c8c3524 100644
--- a/assets/pastevents/pastevents.css
+++ b/assets/pastevents/pastevents.css
@@ -11,6 +11,32 @@ body {
color: var(--text-color);
}
+/* Dark mode Css */
+
+body.dark-mode .past-events-section {
+ background-color: #1e1e1e;
+ color: #f4f4f4;
+}
+
+body.dark-mode .event-grid {
+ background-color: #282828;
+ color: #f4f4f4;
+}
+
+body.dark-mode .event-card {
+ background-color: #333;
+ color: #f4f4f4;
+}
+
+body.dark-mode .past-event-card {
+ background-color: #333;
+}
+
+body.dark-mode .past-event-date,
+.past-event-time {
+ color: var(--light-text-color);
+}
+
.past-events-section {
padding: 6rem 0;
}
diff --git a/assets/pastevents/pastevents.html b/assets/pastevents/pastevents.html
index 534fea3..aac2250 100644
--- a/assets/pastevents/pastevents.html
+++ b/assets/pastevents/pastevents.html
@@ -45,6 +45,11 @@
+
+
+
diff --git a/index.html b/index.html
index bbdbe0b..c64441d 100644
--- a/index.html
+++ b/index.html
@@ -50,6 +50,11 @@
+
+
+
diff --git a/script.js b/script.js
index d9e5bec..5c5db02 100644
--- a/script.js
+++ b/script.js
@@ -228,6 +228,11 @@ document.addEventListener('DOMContentLoaded', function () {
});
});
+// Dark mode toggle
+document.getElementById('dark-mode-toggle').addEventListener('click', () => {
+ document.body.classList.toggle('dark-mode');
+});
+
// Mobile menu functionality
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const navItems = document.querySelector('.nav-items');
diff --git a/style.css b/style.css
index b184685..0df3eae 100644
--- a/style.css
+++ b/style.css
@@ -146,6 +146,7 @@ body {
height: 40px;
border-radius: 50%;
display: flex;
+ margin-left: 1rem;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
@@ -462,6 +463,80 @@ body {
padding: 2rem 0;
}
+/* Dark mode Css */
+
+body.dark-mode {
+ --background-color: #181818;
+ --text-color: #f4f4f4;
+ --light-text-color: #bbbbbb;
+}
+
+body.dark-mode .navbar {
+ background-color: rgba(24, 24, 24, 0.9);
+}
+
+body.dark-mode .footer {
+ background-color: #181818;
+}
+
+/* Dark mode toggle button Css */
+
+#dark-mode-toggle {
+ background-color: var(--primary-color);
+ border: none;
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.3s ease;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#dark-mode-toggle:hover {
+ background-color: var(--secondary-color);
+}
+
+#dark-mode-toggle i {
+ color: #fff;
+ font-size: 20px;
+}
+
+.dark-mode .events {
+ background-color: #2a2a2a;
+}
+
+.dark-mode .navbar {
+ background-color: #2a2a2a !important; /* Dark gray background */
+ transition: background-color 0.3s ease;
+}
+
+body.dark-mode .nav-links a {
+ color: #f4f4f4;
+}
+
+body.dark-mode .nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.event-description {
+ font-size: 0.95rem;
+ margin-bottom: 1rem;
+ color: var(--text-color);
+}
+
+body.dark-mode .event-card {
+ background-color: #333;
+ color: #f4f4f4;
+}
+
+body.dark-mode .event-date,
+.event-time {
+ color: var(--light-text-color);
+}
+
/* Media queries for responsiveness */
@media (max-width: 1024px) {