our program dark mode

sau-mili · Jul 19, 2024 · 16aaa7c · 16aaa7c
1 parent 19f2cfb
commit 16aaa7c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/our program.html b/our program.html
@@ -84,6 +84,8 @@
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
   }
+
+
 </style>
 </head>
 
@@ -268,14 +270,7 @@
 
     </nav>
   </div>
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const toggleButton = document.getElementById('checkbox');
-      toggleButton.addEventListener('change', function () {
-        document.body.classList.toggle('dark-mode');
-      });
-    });
-  </script>
+
   <div class="intro">
     <div class="container">
       <h1>Welcome to Our Community Startup</h1>
@@ -296,7 +291,7 @@ <h2>Our Mission</h2>
   </section>
   <section class="join-us">
     <div class="container grids">
-      <img src="fav.png">
+      <img src="images/logo2.jpeg">
       <div class="left-sec">
 
         <h2>Join Us</h2>
@@ -336,6 +331,15 @@ <h2>Join Us</h2>
     });
   </script>
 
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const toggleButton = document.getElementById('checkbox');
+    toggleButton.addEventListener('change', function () {
+      document.body.classList.toggle('dark-mode');
+    });
+  });
+</script>
+
 </body>
 
 </html>
diff --git a/ourprogram.css b/ourprogram.css
@@ -48,6 +48,13 @@
   text-align: center;
 }
 
+body.dark-mode .intro{
+  background: #171616 !important;
+}
+
+body.dark-mode p{
+  color:rgb(225, 225, 225) !important;
+}
 /* Container inside .intro */
 .intro .container {
   width: 100%; /* Full width of viewport */
@@ -79,11 +86,24 @@
     margin-right:auto;
     width: 80% !important;
   }
+
+body.dark-mode .mission .borderbox{
+  background: linear-gradient(rgb(68, 67, 67), #1e1e1e);
+  border-color: rgb(74, 124, 179);
+}
+
+body.dark-mode h2{
+  color:white;
+}
   .mission,
   .join-us {
     padding: 20px 0;
     text-align: center;
   }
+
+  body.dark-mode .join-us{
+    background:linear-gradient(black,grey);
+  }
   .mission{
     background: none;
   }
@@ -106,7 +126,9 @@
   .grids img{
     max-height: 200px;
     max-width: 200px;
-    border-radius: 200px;
+    width: 200px;
+    height:200px;
+    border-radius: 50%;
     border-width: 3px;
     box-shadow: 0 2px 2px 2px rgb(153, 148, 142);
     border-color: white;
@@ -143,12 +165,21 @@
     transition: background-color 0.3s ease;
   }
 
+  body.dark-mode .join-us .btn{
+    border-color: rgb(74, 124, 179);
+    background: linear-gradient(90deg, #383838, #111111);
+  }
   .join-us .btn:hover {
     background: none;
     border-width: 3px;
     border-color:rgb(255, 128, 1);
     color: rgb(255, 128, 1);
-
+  }
+
+  body.dark-mode .join-us .btn:hover{
+    color:rgb(74,124,179);
+    border-color:rgb(74,124,179);
+    background: whitesmoke;
   }
 
  .changes{