Skip to content

Commit

Permalink
Merge pull request #54 from ankit9958/main
Browse files Browse the repository at this point in the history 
Updated the login page to make it more consistent with the current theme.
  • Loading branch information
@adityakmrmishra
adityakmrmishra authored Oct 24, 2023
2 parents 8ee0bfe + ad2681e commit 7e6bb72
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 104 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ <h5>
</div>

<div class="login-link">
<a href="login.html">LOGIN</a>
<a href="login.html">LOGIN/SIGNUP</a>
</div>

<div id="toggle">
Expand Down
73 changes: 48 additions & 25 deletions login.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form Design</title>
<link rel="stylesheet" type="text/css" href="login_style.css">
</head>
<body>
<div class="loginbox">
<img src="https://icon-library.com/images/login-icon-images/login-icon-images-24.jpg" class="avatar">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="submit" value="Log in">
<a href="#">Forgot password? click here</a>
<br>
<br>

</form>
<html>
<head>
<title>Slide Navbar</title>
<link rel="stylesheet" type="text/css" href="login_style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="geet-logo">
<img src="geetlogo.png" alt="geet-logo" />
</div>
</body>
</html>
<div class="container">
<div class="main">
<input type="checkbox" id="chk" aria-hidden="true" />

<div class="signup">
<form>
<label for="chk" aria-hidden="true">Sign up</label>
<input type="text" name="txt" placeholder="User name" required="" />
<input type="email" name="email" placeholder="Email" required="" />
<input
type="password"
name="pswd"
placeholder="Password"
required=""
/>
<button>Sign up</button>
</form>
</div>

<div class="login">
<form>
<label for="chk" aria-hidden="true">Login</label>
<input type="email" name="email" placeholder="Email" required="" />
<input
type="password"
name="pswd"
placeholder="Password"
required=""
/>
<button>Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
169 changes: 91 additions & 78 deletions login_style.css
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,102 @@
body{
margin: 0;
padding: 0;
background: url(img/music.jpg);
background-size: cover;
background-position: centre;
font-family: sans-serif;
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: "Jost", sans-serif;
background: rgb(230, 226, 173);
}

.loginbox{
width: 320px;
height: 420px;
background: rgba(0, 0, 0, 0.486);
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
.container {
background: rgb(194, 179, 96);
border-radius: 10px;
position: absolute;
margin: auto;
}

.avatar{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
.main {
width: 350px;
height: 500px;
background: red;
overflow: hidden;
background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38")
no-repeat center/ cover;
border-radius: 10px;
box-shadow: 5px 20px 50px #000;
}

h1{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
#chk {
display: none;
}

.loginbox p{
margin: 0;
padding: 0;
font-weight: bold;
.signup {
position: relative;
width: 100%;
height: 100%;
}

.loginbox input{
width: 100%;
margin-bottom: 20px;
label {
color: #fff;
font-size: 2.3em;
justify-content: center;
display: flex;
margin: 60px;
font-weight: bold;
cursor: pointer;
transition: 0.5s ease-in-out;
}

.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
input {
width: 60%;
height: 20px;
background: #e0dede;
justify-content: center;
display: flex;
margin: 20px auto;
padding: 10px;
border: none;
outline: none;
border-radius: 5px;
}

.loginbox input[type="submit"]
{
border: none;
outline: none;
background: #ff17b2;
color: #fff;
font-size: 18px;
border-radius: 20px;
button {
width: 60%;
height: 40px;
margin: 10px auto;
justify-content: center;
display: block;
color: #fff;
background: #573b8a;
font-size: 1em;
font-weight: bold;
margin-top: 20px;
outline: none;
border: none;
border-radius: 5px;
transition: 0.2s ease-in;
cursor: pointer;
}

.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
button:hover {
background: #6d44b8;
}

.loginbox a{
text-decoration: none;
font-size: large;
font-size: 15px;
line-height: 20px;
color: rgb(216, 216, 216);
.login {
height: 460px;
background: #eee;
border-radius: 60% / 10%;
transform: translateY(-180px);
transition: 0.8s ease-in-out;
}
.login label {
color: #573b8a;
transform: scale(0.6);
}

.loginbox a:hover
{
color: #ffc107;
}
#chk:checked ~ .login {
transform: translateY(-500px);
}
#chk:checked ~ .login label {
transform: scale(1);
}
#chk:checked ~ .signup label {
transform: scale(0.6);
}
.geet-logo {
position: relative;
top: -200px;
left: -450px;
}

0 comments on commit 7e6bb72

Please sign in to comment.