Designing an attractive and pretty looking Login Page wouldn’t be a thing to bother for a professional designer. However, non designers ( perhaps programmers), are always looking for a template for these HTML designs.
Most of the templates or designs that we find in online are either heavy or not as simple as we would want them to be.
In this post, I have come up with a simple yet pretty looking login HTML template and moreover you can add your custom CSS and change the look and feel of this design too.
Full Source Code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Admin Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body{
background-color: #eee !important;
}
.wrapper{
margin-top:80px;
}
.form-signin-header{
margin-bottom: 20px;
color:#D42620;
}
.form-signin-header:after{
width: 20%;
border-bottom:solid 2px #D42620;
content:"";
display: block;
padding-bottom: 5px;
}
.form-signin{
max-width: 380px;
padding:15px 35px 45px;
margin:0 auto;
background-color:#fff;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 3px 10px rgba(140,152,164,0.3);
}
</style>
</head>
<body>
<div class="wrapper">
<form class="form-signin" action="login" method="post">
<h2 class="form-signin-header">Let Me In</h2>
<input type="text" class="form-control" name="username" placeholder="Username" required>
<br>
<input type="password" class="form-control" name="password" placeholder="Password" required>
<br>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
</body>
</html>
For complete guidance, follow this video:
