Merge pull request #1210 from Riyachauhan11/main

adding dark mode styling to elements of home and contact page
mansiruhil13 · Nov 10, 2024 · ae7e642 · ae7e642
2 parents bc6891f + 8661288
commit ae7e642
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 0 deletions.
diff --git 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
@@ -405,6 +405,113 @@
       /* 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;
+}
+
+
+
     .search-box {
           display: flex;
           align-items: center; /* Center vertically */
@@ -476,6 +583,7 @@
         margin-right: 50px;
        }
 
+
   </style>
 </head>