Responsive login page using (HTML , CSS and JavaScript)
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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="login.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="image">
<img src="login.png" alt="">
</div>
<div class="loginform">
<form action="" class="forms">
<div class="Pimage"><img src="profile.png" alt=""></div>
<h2>WELCOME</h2>
<div class="inputdiv username">
<div class="icon">
<i class="fa fa-user"></i>
</div>
<div class="inputblock">
<h5>UserName</h5>
<input type="text" name="" id="">
</div>
</div>
<div class="inputdiv pass">
<div class="icon">
<i class="fa fa-lock"></i>
</div>
<div class="inputblock">
<h5>Password</h5>
<input type="password" name="" id="">
</div>
</div>
<div class="forgotpass">
<h6><a href="">Forgot Password?</a></h6>
</div>
<div class="go">
<button><h3>LOGIN</h3></button>
</div>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="login.js"></script>
</body>
</html>
CSS code:-
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.image{
display: flex;
justify-content: center;
align-items: center;
background-image: url(drawing.svg);
background-repeat: no-repeat;
background-position: center;
}
.image>img{
width: 350px;
}
.loginform{
display: grid;
align-items: center;
justify-content: center;
}
.forms{
display: grid;
align-content: center;
grid-template-columns: auto;
grid-template-rows: 80px 50px 75px 75px 14px 42px;
row-gap: 12px;
width: 400px;
height: 441px;
border-radius: 37px;
background-color: rgba(255,255,170,0.09);
box-shadow: rgba(50,50,93,0.25) 0px 50px 100px -20px,
rgba(0,0,0,0.3) 0px 30px 60px -30px,
rgba(10,37,64,0.35) 0px -2px 6px 0px inset;
}
.Pimage{
text-align: center;
}
.Pimage>img{
width: 25%;
height: 100%;
box-shadow: rgba(50,50,93,0.25) 0px 50px 100px -20px,
rgba(0,0,0,0.3) 0px 30px 60px -30px,
rgba(10,37,64,0.35) 0px -2px 6px 0px inset;
border-radius: 45%;
}
h2{
display: flex;
justify-content: center;
align-items: center;
font-size: 35px;
}
.inputdiv{
position: relative;
display: grid;
grid-template-columns: 10% 90%;
margin: 20px 10px;
padding: 0;
}
.inputdiv .username{
margin-top: 0;
}
.icon{
color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
}
.icon>i{
transition: .2s;
}
.inputdiv>div{
position: relative;
height: 35px;
color: #999;
}
.inputblock>h5{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
transition: .3s;
}
.inputblock>input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 2px 0px;
color: #999;
font-size: 18px;
}
.forgotpass{
position: relative;
}
.forgotpass>h6{
position: absolute;
right: 15px;
}
a{
text-decoration: none;
color: #999;
}
.go{
display: grid;
justify-content: center;
align-content: center;
}
.go>button{
width: 380px;
height: 40px;
padding: 5px 0px 5px 0px;
border-radius: 20px;
border-style: none;
color: rgb(233,230,230);
background: #53B6FE;
}
.go>button:hover{
color: rgb(255,255,255);
background: #0c9aff;
}
.inputdiv::after, .inputdiv::before{
position: absolute;
content: '';
width: 100%;
height: 2px;
background-color: #999;
bottom: -5px;
transition: 1s;
}
.inputdivv:after{
width: 0%;
}
.inputdivv:after{
background-color: #53B6FE;
width: 100%;
}
.inputdivv .icon{
color: #53B6FE;
}
.inputdivv .inputblock>h5{
top: 0px;
color: #53B6FE;
}
@media (max-width:840px){
.container{
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
}
.image{
display: none;
}
.forms{
background-image: url(drawing.svg);
background-repeat: no-repeat;
background-position: center;
}
.inputdivv:after{
background-color: #003653;
width: 100%;
}
.inputdivv .icon{
color: #003653;
}
.inputdivv .inputblock>h5{
color: #1d526e;
}
.go>button{
background-color: #3fa2e9;
}
}
JavaScript code:-
$('.username').on('click',function(){
$('.username').addClass('inputdivv')
});
$('.pass').on('click',function(){
$('.pass').addClass('inputdivv')
});
image using in page you can download it and use:-
visit and subscribe my youtube channel for more :-
Comments
Post a Comment