Added Light And Dark Made And Added Side Navigation Bar And added Som…

…e Css
CareerDevelopmentHub · Oct 27, 2023 · 01c8186 · 01c8186
1 parent e235b98
commit 01c8186
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 42 deletions.
diff --git a/index.css b/index.css
@@ -4,10 +4,134 @@
 }
 
 body {
-     background-color: rgb(56, 128, 230);
+  font-family: "Lato", sans-serif;
+}
+
+.sidenav {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #111;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+}
+
+.sidenav a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+#main {
+  transition: margin-left .5s;
+  padding: 16px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+:root {
+  --bg: rgb(137, 144, 158);
+  --bg-input: #141419;
+}
+
+
+:root{
+  --bg:linear-gradient(to  left, #363690 41%, #3ec7f5 100%);
+
+  --bg-input: #e1e1ed;
+}
+
+
+/* light mode edited */
+
+.light-mode {
+  --bg: linear-gradient(to left, #2a2d30, #080a0c);
+  --bg-input: #fcf9f9;
+}
+
+body {
+  background: var(--bg);
+  color: var(--color-text);
+  /*font-weight: 500;
+  display: flex;*/
+}
+
+.switch {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+
+.switch+label {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+
+.switch+label {
+  padding: 2px;
+  width: 52px;
+  height: 27px;
+  background-color: var(--color-border), rgba(23, 21, 21, 0.3);
+  border-radius: 100px;
+}
+
+.switch+label:before,
+.switch+label:after {
+  display: block;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  bottom: 1px;
+  content: "";
+}
+
+.switch+label:before {
+  right: 1px;
+  background-color: var(--bg-input);
+  border-radius: 60px;
+  transition: all 0.4s;
+}
+
+.switch+label:after {
+  width: 30px;
+  background-color: #fff;
+  border-radius: 100%;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  transition: all 0.4s;
+}
 
+.switch:checked+label:before {
+  background-color: #f3eff5;
+}
 
+.switch:checked+label:after {
+  transform: translateX(30px);
 }
+
 .row {
     display: flex;
 }
@@ -45,20 +169,7 @@ text-decoration: none;
 font-size: 20px;
 }
 
-.dark-mode {
-    background-color: rgb(5, 57, 53);
-    color: rgb(98, 185, 114);
 
-}
-.logo{
-    position: absolute;
-    left: 1400px;
-    top: 30px;
-  }
-
-.dark-mode a {
-    color: rgb(36, 207, 17);
-}
 
 .footer {
     height: 50px;
@@ -191,3 +302,4 @@ button {
       padding-left: 5px;
     }
   }
+
diff --git a/index.html b/index.html
@@ -27,31 +27,58 @@
 	  }
 	});
   };
-
-function darkMode() {
-	var element = document.body;
-	element.classList.toggle("dark-mode");
-  }
   </script>
-  <div class="lg">
-<img src="https://is3-ssl.mzstatic.com/image/thumb/Purple71/v4/55/22/2d/55222de9-12ee-3a3c-2b29-9c0e74e3c953/source/512x512bb.jpg" alt="This is an image!!" width="50px" height="50px"></div>
-<div class="navbar">
-
-  <a href="#home"><mark>Home</mark></a>
-  <a href="#news"><mark>News</mark></a>
-  <a href="#contact"><mark>Contact</mark></a>
-  <a href="#about"><mark>About</mark></a>
+  <div class="lg" style="display: flex; justify-content: space-evenly; align-items: center; text-align: center;">
+
+<div id="mySidenav" class="sidenav">
+  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+  <a href="#">Home</a>
+  <a href="#">News</a>
+  <a href="#">Contact</a>
+  <a href="#">About</a>
 </div>
-<div class="logo1">
-<div class="logo"><button type="button" class="btn btn-dark" onclick="darkMode()">🌒</button>
+
+<div id="main" style="color: aliceblue;">
+
+  <span style="font-size:30px;cursor:pointer ;align-items: center;display: flex; justify-content: space-evenly;" onclick="openNav()">&#9776;  
+    <img src="https://is3-ssl.mzstatic.com/image/thumb/Purple71/v4/55/22/2d/55222de9-12ee-3a3c-2b29-9c0e74e3c953/source/512x512bb.jpg" alt="This is an image!!" width="50px" height="50px" style=" margin-left:20px ; margin-right: 20px;">
+    Attendance</span>
+
 </div>
+
+<script>
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.getElementById("main").style.marginLeft = "250px";
+}
+
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "0";
+  document.getElementById("main").style.marginLeft= "0";
+}
+</script>
+
+
+<label for="switch" style="float: right; padding-left: 50px;">
+  <input type="checkbox" id="switch" class="switch">
+  <label for="switch"></label>
+</label>
+<script>
+const $html = document.querySelector("html");
+const $checkbox = document.querySelector("#switch");
+
+$checkbox.addEventListener("change", function() {
+  $html.classList.toggle("light-mode");
+});
+</script>
 </div>
 
     <div class="row">
+
         <div class="column1" >
-          <h2>Present Sir</h2>
+          <h2 style="color: whitesmoke;">Present Sir</h2>
 <br>
-          <p>An efficient Solutions for both Students and Teachers. </p>
+          <p style="color: gainsboro;">An efficient Solutions for both Students and Teachers. </p>
 <br>
           <div class="button-cls">
             <form name="sign up.">
@@ -62,30 +89,37 @@ <h2>Present Sir</h2>
 
               </tr>
               <tr>
-               <td colspan=2 text-align="center"><h2>Login</h2></td>
+               <td colspan=2 text-align="center" style="color: aliceblue;"><h2>Login</h2></td>
                </tr>
                <tr>
-               <td><label for="uname">userName</label></td>
+               <td><label for="uname" style="padding: 10px; margin-right: 20px; font-size: 20px; color: aliceblue;">userName</label></td>
 
-               <td><input type="text" id="uname" name="uname" pattern="[A-Za-z]{5}" title="seven letter allwed" required></td>
+               <td style="padding: 20px;"><input type="text" id="uname" name="uname" pattern="[A-Za-z]{5}" title="seven letter allwed" required></td>
+
                </tr>
+
                <tr>
-               <td><label for="pwd">Password</label></td>
+               <td><label for="pwd" style="padding: 10px; margin-right: 20px; font-size: 20px; color: aliceblue; ">Password</label></td>
                <td><input type="password" id="pwd" name="uname" pattern="{4}" title="three or more character"></td>
                </tr>
 
                <tr><pre>
-
-               <td><input type="submit" name="login-btn" id="login-btn" value="login"></td>
+
+               <td>
+                <br>
+                <br>
+                <button style="background: gainsboro;">
+                <input type="submit" name="login-btn" id="login-btn" value="login" style="border-radius: 30%; background-color: black; color: whitesmoke;">
+               </button></td>
 
 
-               <td><a href="regitration.html">Sign up</a></td>
+               <td><button style="background: aliceblue; margin-top: 35px;"><a href="regitration.html" style="color: blue;">Sign up</a></button></td>
 
                </tr></pre>
               </table>
               </form>
-
-                <button class="btn-primary1">Login as Students</button>
+       <br>
+            <button class="btn-primary1">Login as Students</button>
                 <br />
                 <button class="btn-primary2">Login as Teachers</button>
           </div>
@@ -97,7 +131,6 @@ <h2></h2>
         </div>
     </div>
 
-
   <div class="footer">
     <div class="Owner">
       This project is made by Sanjib Mohanty.

diff --git a/style.css b/style.css
@@ -212,4 +212,4 @@ table thead tr{
 
 @media (max-width: 1445px){
 
-}
+}