From 877b5651a7930093c152c9d7d9f55660e79a6413 Mon Sep 17 00:00:00 2001
From: Riya Chauhan <96919050+Riyachauhan11@users.noreply.github.com>
Date: Fri, 8 Nov 2024 17:55:19 +0530
Subject: [PATCH] adding dark mode styling to elements of home and contact page

---
 contact.html |  15 ++++++++
 index.html   | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 120 insertions(+)

diff --git a/contact.html b/contact.html
index 3bb12f6..4134ca8 100644
--- a/contact.html
+++ b/contact.html
@@ -204,6 +204,21 @@
             margin: 20px auto;
             object-fit: cover;
         }
+        .dark-mode .contact-item {
+            background-color: rgba(40, 40, 40, 0.9); 
+            color: #e0e0e0; 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); 
+            border: 1px solid #555; 
+        }
+
+        .dark-mode .contact-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
+        }
+
+        .dark-mode .contact-item img {
+            border-color: #8ab4f8;
+        }
     </style>
 </head>
 
diff --git a/index.html b/index.html
index e91953f..8b9cbea 100644
--- a/index.html
+++ b/index.html
@@ -400,6 +400,111 @@
       padding: 20px;
       /* Optional: add padding for better spacing */
     }
+    /* Dark mode for profile icon */
+.dark-mode .profile-icon {
+  border: 1px solid #ccc;
+}
+
+/* Dark mode dropdown menu */
+.dark-mode .dropdown-menu {
+  background-color: #333;
+  color: #f3f4f6;
+  border: 1px solid #555;
+}
+
+.dark-mode .dropdown-menu a {
+  color: #f3f4f6;
+}
+
+.dark-mode .dropdown-menu a:hover {
+  background-color: #444;
+}
+
+/* Dark mode for content */
+.dark-mode .content {
+  background-color: #333;
+  color: #f3f4f6;
+}
+
+/* Dark mode for h1 */
+.dark-mode h1 {
+  color: #f3f4f6;
+}
+
+/* Dark mode for feature */
+.dark-mode .feature {
+  background-color: #444;
+  color: #f3f4f6;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+}
+
+/* Dark mode for feature images */
+.dark-mode .feature img {
+  border-color: #555;
+}
+
+/* Dark mode for feature titles and paragraphs */
+.dark-mode .feature h2 {
+  color: #8ab4f8;
+}
+
+.dark-mode .feature p {
+  color: #d1d5db;
+}
+
+/* Dark mode for team-feature and contact-feature */
+.dark-mode .team-feature,
+.dark-mode .contact-feature {
+  background-color: #333;
+  color: #e0e0e0;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+}
+
+/* Dark mode for FAQ section */
+.dark-mode .faq-section {
+  background-color: #333;
+}
+
+.dark-mode .faq-h2 {
+  color: #f3f4f6;
+}
+
+.dark-mode .faq {
+  background-color: #444;
+  border-color: #555;
+}
+
+.dark-mode .faq-question {
+  background-color: #555;
+  color: #f3f4f6;
+}
+
+.dark-mode .faq-question:hover {
+  background-color: #666;
+  color: #8ab4f8;
+}
+
+.dark-mode .faq-answer {
+  background-color: #333;
+  color: #d1d5db;
+  border-top: 1px solid #555;
+}
+
+/* Dark mode for footer */
+.dark-mode footer {
+  background-color: #222;
+  color: #f3f4f6;
+}
+
+.dark-mode footer a {
+  color: #8ab4f8;
+}
+
+/* Dark mode for social icons */
+.dark-mode .social-icon:hover {
+  color: #8ab4f8;
+}
+
   </style>
 </head>