Login Box

Login Box
I have here a simple and beautiful login Box login box to employ it in your web application , simple design and HTML code



HTML CODE
 <!DOCTYPE html>  
 <html>  
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />  
 <head>  
      <meta charset="utf-8">  
      <title>Tuto4free Login</title>  
 </head>  
 <body>  
   <div id="login-form">  
     <h3>Tuto4free</h3>  
     <fieldset>  
       <form>  
         <input type="email" id="Email" required   placeholder="Email">   
         <input type="password" id="password" required   placeholder="Password">  
         <input type="submit" id="Log_btn" value="Login">  
         <footer>  
           <p><span class="info">?</span><a href="http://www.tuto4free.com">Lost my password</a></p>  
         </footer>  
       </form>  
     </fieldset>  
   </div>   
 </body>  
 </html>  
 </body>  
 </html>

- Create a new CSS file named style.css into the css folder
CSS
 body {  
      background: #0B3B39;  
      color: #999;  
      font: 100%/2em sans-serif;  
      margin: 0;  
 }  
 h3 { margin: 0; }  
 a {  
      color: #999;  
      text-decoration: none;  
 }  
 a:hover { color: #1dabb8; }  
 fieldset {  
      border: none;  
      margin: 0;  
 }  
 input {  
      border: none;  
      font-family: inherit;  
      font-size: inherit;  
      margin: 0;  
      -webkit-appearance: none;  
 }  
 input:focus {  
  outline: none;  
 }  
 #login-form {  
      margin: 200px auto;  
      width: 300px;  
      -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);  
      -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);  
      box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);  
 }  
 #login-form h3 {  
      background-color: #01DFD7;  
      border-radius: 5px 5px 0 0;  
      color: #fff;  
      font-size: 14px;  
      padding: 20px;  
      text-align: center;  
      text-transform: uppercase;  
 }  
 #login-form fieldset {  
      background: #fff;  
      border-radius: 0 0 5px 5px;  
      padding: 20px;  
      position: relative;  
 }  
 #login-form fieldset:before {  
      background-color: #fff;  
      content: "";  
      height: 20px;  
      left: 50%;  
      margin: -4px 0 0 100px;  
      position: absolute;       
      top: 0;  
      -webkit-transform: rotate(45deg);  
      -moz-transform: rotate(45deg);  
      -ms-transform: rotate(45deg);  
      -o-transform: rotate(45deg);  
      transform: rotate(45deg);  
      width: 8px;  
 }  
 #login-form input {  
      font-size: 14px;  
 }  
 #Email,  
 #password {  
      border: 1px solid #dcdcdc;  
      padding: 12px 10px;  
      width: 238px;  
 }  
 #Email {  
      border-radius: 3px 3px 0 0;  
 }  
 #password {  
      border-top: none;  
      border-radius: 0px 0px 3px 3px;  
 }  
 #login-form input[type="submit"] {  
      background: #01DFD7;  
      border-radius: 3px;  
      color: #fff;  
      float: right;  
      font-weight: bold;  
      margin-top: 20px;  
      padding: 12px 20px;  
      cursor: pointer;   
 }  
 #login-form input[type="submit"]:hover { background: #198d98; }  
 #login-form footer {  
      font-size: 12px;  
      margin-top: 16px;  
 }  
 .info {  
      background: #e5e5e5;  
      border-radius: 50%;  
      display: inline-block;  
      height: 20px;  
      line-height: 20px;  
      margin: 0 10px 0 0;  
      text-align: center;  
      width: 20px;  
 }




Download

Khebbou