Html

Sign in ui

Html 

 

   

   

   

   

   

   

     

 

 

   

     

       

Please sign in

       

       

       

          Remember me

       

       

     

   

 

Css

@charset "utf-8";

/* CSS Document */

body {

padding-top: 40px;

padding-bottom: 40px;

background-color: #eee;

font-family: Arial, Helvetica, sans-serif;

}

.form-signin {

max-width: 330px;

padding: 15px;

margin: 0 auto;

}

.form-signin .form-signin-heading, .form-signin .checkbox {

margin-bottom: 10px;

}

.form-signin .checkbox {

font-weight: normal;

}

.form-signin .form-control {

position: relative;

height: auto;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 10px;

font-size: 16px;

}

.form-signin input[type="email"], .form-signin input[type="password"] {

margin-top: 20px;

}

.form-signin input:focus {

border-color:#428bca;

-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #428bca;

box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #67b168;

border-color:#428bca;

-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #428bca;

box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #428bca;

}

.form-control {

display:block;

width:100%;

  *width:93%;

height:34px;

padding:6px 12px;

font-size:14px;

line-height:1.42857143;

color:#555;

background-color:#fff;

background-image:none;

border:1px solid #ccc;

border-radius:4px;

-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);

box-shadow:inset 0 1px 1px rgba(0,0,0,.075);

-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;

-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;

transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s

}

input, button, select, textarea {

font-family: Arial, Helvetica, sans-serif;

}

.btn {

-moz-user-select: none;

background-image: none;

cursor: pointer;

font-weight: 400;

margin-bottom: 0;

text-align: center;

vertical-align: middle;

white-space: nowrap;

background-color: #428bca;

border-color: #0a4c84;

color: #fff;

display: block;

width: 100%;

border-radius: 6px;

font-size: 18px;

line-height: 1.33;

padding: 10px 16px;

}

.btn:focus, .btn:active:focus, .btn.active:focus {

outline:thin dotted;

outline:5px auto -webkit-focus-ring-color;

outline-offset:-2px

}

.btn:hover, .btn:focus {

color:#fff;

text-decoration:none;

background-color:#0a4c84;

border-color:#adadad

}

.btn:active, .btn.active {

background-image:none;

outline:0;

-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);

box-shadow:inset 0 3px 5px rgba(0,0,0,.125)

}

.radio, .checkbox {

display: block;

margin-top: 10px;

min-height: 20px;

position: relative;

}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

color: inherit;

font-family: inherit;

font-weight: 500;

line-height: 1.1;

}