Here is an amazing and awesome design of login page design in HTML CSS with a source code free download. you can download the free source code of simple login form page design template using HTML CSS. You can use this layout in your PHP, Laravel, Codeigniter, .net, java etc scripting language.
I have one question, Do you have a website? If your answer to this question is yes, then a classic must have is an attractive login form. It's no matter in which language or framework of your website. because this script is very simple and easy to integrate with all language or framework. we created using simple HTML and CSS code. it looks very professional login form.
So, let's simply get a code of professional login form design layout bellow HTML and CSS tab.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="main-section">
<div class="content-section">
<div class="head-section">
<h3>Login</h3>
</div>
<div class="body-section">
<form>
<div class="form-input">
<input type="text" name="" placeholder="Username or Email">
</div>
<div class="form-input">
<input type="text" name="" placeholder="Password">
</div>
<div class="form-input">
<input type="checkbox" name=""> <label>Remember me on this computer</label>
<button type="submit" class="btn-submit">Login</button>
</div>
</form>
</div>
</div>
<div class="footer-section">
<a href="">Forgot your password?</a> <span>Click here to reset it.</span>
</div>
</div>
</body>
</html>
body{
font-family: 'Lato', sans-serif;
position: relative;
background: #3DA6D4;
margin: 0px;
}
.main-section{
width: 460px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content-section{
background: #FFF;
border-radius: 2px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.1);
}
.head-section{
background: #F3F3F3;
text-align: center;
padding: 15px 0px;
border-bottom: 1px solid #CECECE;
}
.head-section h3{
margin: 0px;
color: #565656;
}
.body-section{
padding:15px 30px 30px 30px;
overflow: hidden;
}
.body-section .form-input{
width: 100%;
padding: 15px 0px;
}
.body-section .form-input input[type='text']{
width: calc(100% - 30px);
border: 1px solid #D3D3D3;
border-radius: 1px;
padding:10px 10px;
box-shadow: 0px 0px 0px 5px rgb(239,244,247);
}
.body-section .form-input input[type='checkbox']{
float: left;
}
.body-section label{
color: #565656;
padding: 1px 5px;
float: left;
}
.body-section .btn-submit{
float: right;
background: #DEEDF4;
border:1px solid #B5CBCD;
color: #56778E;
font-weight: bold;
padding:7px 20px;
border-radius: 15px;
}
.footer-section{
color: #F1F1F1;
text-align: center;
padding-top: 15px;
font-size: 12px;
}
.footer-section a{
color: #fff;
font-weight: bold;
text-decoration: none;
}
NiceSnippets.com
