Create Simple Login Screen Template

Simple yet creative login form created using HTML5 and CSS3. This form can be used as registration form as well. This is our favorite template on this list thanks to its flexibility and similarity that allows you to create.

The HTML


<!--
This Page is Design by TAQI RAZA KHAN
E-Mail: taqiniazi61@gmail.com
Website: http://www.taqirazakhan.com
Phone: 0092-345-7372343
-->
<div class="wrapper">
<div class="login">
<div class="logo-image"><img src="http://i67.tinypic.com/xd8sph.png"></div>
<h2 class="login-header"><span class="fa fa-key"></span> Log in </h2>

<form class=”login-container”>
<p><input type=”text” placeholder=”Email”></p>
<p><input type=”password” placeholder=”Password”></p>
<p><input type=”submit” value=”Log in”></p>
</form>
<div class=”copy-right”>&copy; Copyright 2016, All &reg; Rights Reserved by <a href=”http://www.taqirazakhan.com”> Taqi Raza Khan </a></div>
</div>
</div>

The CSS

/*
This Page is Design by TAQI RAZA KHAN
E-Mail: taqiniazi61@gmail.com
Website: http://www.taqirazakhan.com
Phone: 0092-345-7372343
*/

html{
background: #2a3b4c;
}
body {
font-family: ‘Open Sans’, sans-serif;
width: 100%;
margin: 0;
}
img{
width: 50%;
}
input::-webkit-input-placeholder {
color: #2A3B4C;
}

input:-moz-placeholder { /* Firefox 18- */
color: #2A3B4C;
}

input::-moz-placeholder { /* Firefox 19+ */
color: #2A3B4C;
}

input:focus:-ms-input-placeholder {
color: #fff;
}

input:focus::-webkit-input-placeholder {
color: #fff;
}

input:focus:-moz-placeholder { /* Firefox 18- */
color: #fff;
}

input:focus::-moz-placeholder { /* Firefox 19+ */
color: #fff;
}

input:focus:-ms-input-placeholder {
color: #fff;
}
.wrapper{
width: 100%;
overflow: hidden;
}
.login {
max-width: 400px;
width: 100%;
margin: 16px auto;
font-size: 16px;
position: relative;
}
.logo-image{
text-align: center;
}
.login-header,
.login p {
margin-top: 0;
margin-bottom: 0;
}
.login-header {
background: #28d;
padding: 20px;
font-size: 1.8em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: gold;
font-family: Tahoma,Geneva,sans-serif, sans-serif;
position: relative;
}
.login-header:before {
margin-right: auto;
margin-left: auto;
border: 12px solid gold;
border-bottom-color: #28d;
position: absolute;
content: ”;
left: 20px;
top: 0;
}
.login-container {
background: #ebebeb;
padding: 12px;
}
.login p {
padding: 12px;
}
.login input {
box-sizing: border-box;
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
padding: 10px;
outline: 0;
font-family: inherit;
font-size: 0.95em;
}
.login input[type=”text”],
.login input[type=”password”] {
background: #fff;
border-color: #bbb;
color: #555;
}
.login input[type=”text”]:focus,
.login input[type=”password”]:focus {
border-color: #2288DD;
}
.login input[type=”submit”], .submit {
background: #2288DD;
border-color: transparent;
color: #fff;
cursor: pointer;
box-shadow: 0px 3px 6px #888;
}
.login input[type=”submit”]:hover{
background: #17c;
box-shadow: 0px 3px 6px #fff;
}
.login input[type=”submit”]:focus {
border-color: #05a;
background: #2A3B4C;
box-shadow: 0px 3px 6px #fff;
}
.text-danger{
color: #F00;
}
form .text-success{
color: #3c763d;
float: right;
margin: -32px 10px 0 0;
}
.copy-right{
background: #2288DD;
text-align: center;
color: #fff;
font-size: 12px;
padding: 5px 0;
}
.copy-right a{
color: gold;
}

/* This Page is Design by TAQI RAZA KHAN */

The Demo Page

Login forms are everywhere on the web. Are you using the social networks? You must go through login form of some sort. Do you have an email? Did you join any forums? Did you try to leave a comment on a WordPress site? To gain access to anything on the internet, the chances are you will have to go through some sort of login process. You will probably have to register first, sign up or leave some information behind. You will have to use some sort of login form to do anything on the internet.