LOGIN PAGE
Create a Login Page Using HTML and CSS :
Source Code : -
HTML :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/6618bd5d88.js" crossorigin="anonymous"></script>
</head>
</head>
</head>
<body>
<div class="login-form">
<div class="text">LOGIN</div>
<form action="">
<div class="field">
<div class="fas fa-user"></div>
<input type="email" placeholder="Email or Phone" required>
</div>
<div class="field">
<div class="fas fa-lock"></div>
<input type="password" placeholder="Password" required/>
</div>
<button>LOGIN</button>
<div class="link">
Not a member?
<a href="#">Sign Up Now</a>
</div>
</form>
</div>
</body>
</html>
CSS :-
*{
padding: 0;
margin: 0;
font-family: 'Poppins' , sans-serif;
}
body{
display: flex;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
background: #151515;
}
.login-form{
position: relative;
width: 370px;
height: auto;
background: #1b1b1b;
padding: 40px 35px 40px;
box-sizing: border-box;
box-shadow: inset 0 0 15px #4b4b4b;
border-radius: 10px;
}
.text{
font-size: 30px;
color: #c7c7c7;
font-weight: 600;
letter-spacing: 2px;
border-bottom: 1.5px solid #03e9f4;
display: inline-block;
padding-bottom: 5px;
}
form .field{
margin-top: 20px;
display: flex;
}
form .field .fas{
height: 50px;
width: 60px;
background: linear-gradient(#333,#222);
color: #868686;
font-size: 20px;
line-height: 50px;
border-radius: 5px 0 0 5px;
border: 1px solid #444;
border-right: none;
}
.field input, form button{
height: 50px;
width: 100%;
background: linear-gradient(#333,#222);
outline: none;
font-size: 19px;
color: #868686;
border: 1px solid #444;
padding: 0 15px;
border-radius: 0 5px 5px 0;
caret-color: #03e9f4;
}
input:focus{
color: #03e9f4;
background: linear-gradient(#333939,#222929);
box-shadow: 0 0 5px rgba(5, 208, 255, 0.7),
inset 0 0 5px rgb(32, 32, 32);
animation: glow 0.9s ease infinite alternate;
}
@keyframes glow{
100%{
border-color: #03e9f4;
box-shadow: 0 0 20px rgba(5, 209, 255, 0.8),
inset 0 0 10px rgb(32, 32, 32);
}
}
button{
margin-top: 30px;
border-radius: 5px!important;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
transition: 0.3s ease;
}
button:hover{
color: #03e9f4;;
border: 1px solid #03e9f4;
box-shadow: 0 0 10px rgba(5, 209, 255, 0.1),
0 0 10px rgba(5, 209, 255, 0.2),
0 0 15px rgba(28, 213, 255, 0.3),
0 2px 0 black;
}
.link{
margin-top: 25px;
color: #868686;
}
.link a{
color: #03e9f4;
text-decoration: none;
}
.link a:hover{
text-decoration: underline;
color: rgba(5, 209, 255, 0.8);
}
Nice
ReplyDelete