What is Login Page ?
The login page allows a user to gain access to an application by entering their username and password.
HTML Code :
<!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"> <link rel="stylesheet" href="style.css"></head>
<body> <div class="login-box"> <h2>Login</h2> <form> <div class="user-box"> <input type="text" name="" required=""> <label>Username</label> </div>
<div class="user-box"> <input type="password" name="" required=""> <label>Password</label> </div> <div> <a href="#" class="forgot__pass">Forgot password?</a> </div> <a class="btn__submit" href="#"> <span></span> <span></span> <span></span> <span></span> Submit </a> </form> </div>
<!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">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="" required="">
<label>Password</label>
</div>
<div>
<a href="#" class="forgot__pass">Forgot password?</a>
</div>
<a class="btn__submit" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
CSS Code :
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;
600;700;800;900&display=swap');
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #172031
}
* {
font-family: 'Outfit', sans-serif;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .6);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .7);
border-radius: 10px;
}
.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.login-box .user-box {
position: relative;
}
.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
top: -20px;
left: 0;
color: #03e9f5;
font-size: 12px;
}
.forgot__pass {
font-size: 12px;
color: #5b6b8c;
float: right;
}
.btn__submit {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f5;
font-size: 13px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 20px;
letter-spacing: 4px
}
.btn__submit:hover {
background: #03e9f5;
color: rgb(11, 12, 22);
border-radius: 5px;
}
.btn__submit span {
position: absolute;
display: block;
}
.btn__submit span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f5);
animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.btn__submit span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f5);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}
@keyframes btn-anim2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
.btn__submit span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f5);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}
@keyframes btn-anim3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
.btn__submit span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f5);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}
@keyframes btn-anim4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
0 Comments
Ask Your Queries in the comments