<!-- 
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>
/* 
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 */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.