Skip to content

Commit

Permalink
Merge pull request #10 from ankit071105/main
Browse files Browse the repository at this point in the history
Added Light And Dark Made And Added Side Navigation Bar And added Som…
  • Loading branch information
Krest-Coder authored Oct 31, 2023
2 parents 47487b6 + 01c8186 commit cde9ae9
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 42 deletions.
140 changes: 126 additions & 14 deletions index.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -191,3 +302,4 @@ button {
padding-left: 5px;
  }
  }

87 changes: 60 additions & 27 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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.">
Expand All @@ -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>
Expand All @@ -97,7 +131,6 @@ <h2></h2>
</div>
</div>


<div class="footer">
<div class="Owner">
This project is made by Sanjib Mohanty.
Expand Down
2 changes: 1 addition & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -212,4 +212,4 @@ table thead tr{

@media (max-width: 1445px){

}
}

0 comments on commit cde9ae9

Please sign in to comment.