Login And Registration Form in Html and Css
Hello, Login and Registration form is very important part of website designing, because when we start designing website the first step is too create Sign In and Sign Up page. Thats why our website totalprogrammingcode provide an article of login and registration page in html css.
In this login and registration page there few main contents which make this login and registration form different from other Sign In , Sign Up pages.
- Simple and neat design
- Password hide feature
- Forgot password feature
- Fully Responsive Form
- Which is suitable for any website design
The login and registration form which is design by our website totalprogrammingcode is very simple and neat, our login and registration form is also feature of format password.
Most of Sign In and Sign Up pages are not feature of forgot password but our Sign In and Sign Up provide feature of forgot password.
Step to run program -
- create a folder with any name
- create file index.html add html code init
- next create css file add css code in it.
- next save it and run index.html
Code -
Index.html -
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form | totalprogrammingcode</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="title"><span>Login Form</span></div>
<form action="#">
<div class="row">
<i class="fas fa-user"></i>
<input type="text" placeholder="Email or Phone" required>
</div>
<div class="row">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" required>
</div>
<div class="pass"><a href="#">Forgot password?</a></div>
<div class="row button">
<input type="submit" value="Login">
</div>
<div class="signup-link">Not a member? <a href="#">Signup now</a></div>
</form>
</div>
</div>
</body>
</html>
CSS-
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
background: #1abc9c;
overflow: hidden;
}
::selection{
background: rgba(26,188,156,0.3);
}
.container{
max-width: 440px;
padding: 0 20px;
margin: 170px auto;
}
.wrapper{
width: 100%;
background: #fff;
border-radius: 5px;
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.1);
}
.wrapper .title{
height: 90px;
background: #16a085;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 30px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper form{
padding: 30px 25px 25px 25px;
}
.wrapper form .row{
height: 45px;
margin-bottom: 15px;
position: relative;
}
.wrapper form .row input{
height: 100%;
width: 100%;
outline: none;
padding-left: 60px;
border-radius: 5px;
border: 1px solid lightgrey;
font-size: 16px;
transition: all 0.3s ease;
}
form .row input:focus{
border-color: #16a085;
box-shadow: inset 0px 0px 2px 2px rgba(26,188,156,0.25);
}
form .row input::placeholder{
color: #999;
}
.wrapper form .row i{
position: absolute;
width: 47px;
height: 100%;
color: #fff;
font-size: 18px;
background: #16a085;
border: 1px solid #16a085;
border-radius: 5px 0 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper form .pass{
margin: -8px 0 20px 0;
}
.wrapper form .pass a{
color: #16a085;
font-size: 17px;
text-decoration: none;
}
.wrapper form .pass a:hover{
text-decoration: underline;
}
.wrapper form .button input{
color: #fff;
font-size: 20px;
font-weight: 500;
padding-left: 0px;
background: #16a085;
border: 1px solid #16a085;
cursor: pointer;
}
form .button input:hover{
background: #12876f;
}
.wrapper form .signup-link{
text-align: center;
margin-top: 20px;
font-size: 17px;
}
.wrapper form .signup-link a{
color: #16a085;
text-decoration: none;
}
form .signup-link a:hover{
text-decoration: underline;
}
Output -
 |
| Login and SignUp page in Html Css |
Hope, login page in html and css article is usefull for your future or your study. we will upload code of these login and registration page, hope these is usefull for you,
Thanks for reading our article
