This tutorial helps you to design the login page by using HTML and CSS. For any question regarding the tutorial, you can leave a comment.
HTML:
_____________________________________________________
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="" content=""/>
<!------custom CSS------>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Login</title>
</head>
<body>
<div class="form-container">
<form class="container">
<input type="text" placeholder="Username" class="con1"/>
<input type="password" placeholder="Password" class="con2"/>
<div>
<input type="checkbox" class="check"><span class="txt">Remember me</span>
<a href="#" class="lin">Forgot Password</a>
</div>
<input type="button" value="login" class="btn"/>
</form>
</div>
</body>
</html>
CSS:
_____________________________________________________
body{
padding: 0;
margin: 0;
background-color:rgb(50,55,57);
font-family:;
}
.form-container{
height:380px ;
width: 350px;
background-color:rgb(0,18,32) ;
margin: 100px auto;
box-shadow: -3px 0px 20px 4px black;
}
.con1, .con2{
padding: 10px 60px 10px 10px;
border-style: solid;
border-color: rgb(30,83,118);
border-radius: 5px;
background:rgba(30,83, 118, 0.5) ;
outline: none;
border-width: 2px;
margin-bottom: 10px;
transition: 500ms;
color:rgba(255,255, 255, 0.5);
}
.container{
padding: 120px 20px 20px 30px;
}
.txt{
color:rgba(255,255, 255, 0.5);
font-size: 13px;
}
.lin{
text-decoration: none;
color:rgba(255,255, 255, 0.5);
font-size: 13px;
padding:0px 0px 0px 35px;
}
@font-face{
font-family: "mon";
src:url('Montserrat-Regular.ttf');
}
.btn{
padding:5px 30px 5px 30px;
text-transform: uppercase;
font-weight: 600;
border-style: solid;
border-color: rgb(61,230,175);
border-radius: 5px;
outline: none;
margin: 10px 0px 0px 0px;
background-color: rgb(61,230,175);
}
.con1:focus, .con2:focus{
padding: 10px 80px 10px 10px;
border-style: solid;
border-color: rgb(61,230,175);
border-radius: 5px;
background:rgba(30,83, 118, 0.5) ;
outline: none;
border-width: 2px;
margin-bottom: 10px;
}
.btn:hover{
background-color: rgb(30,83,118);
color:rgba(255,255, 255, 0.5);
border-color: rgb(30,83,118);
}
_____________________________________________________
0 Comments