CSS Login Form Dark Maxi
Simple and lightweight login form "Dark Maxi". Almost the same as "Dark Mini". No images or javascript required.
- No images.
- No Javascript.
- Lightweight.
Demo:
login
Please enter your Username and password
How to use:
- Open text editor like Notepad or any other.
- Copy HTML code and paste into the text editor.
- Save file as anyname.html or anyname.htm
- Create new document.
- Copy and paste CSS code into text editor.
- Save file as login.css
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="login.css" /> <title>CSS Login Form Dark Maxi</title> </head> <body> <div class="login"> <div class="lgn_left"><h1>login</h1><p>Please enter your Username and password</p> </div> <div class="lgn_right"> <input class="field" type="text" placeholder="Username" id="username"> <input class="field" type="password" placeholder="Password" id="password"> <input class="btn" type="submit" value="LOGIN"> <a href="#" class="forgot">Register</a> | <a href="#" class="forgot">Forgot password?</a> </div> </div> </body> </html>CSS code:
/* CSSTerm.com CSS Login Form Dark Maxi */ .login { width:505px; margin:auto; border:1px #CCC solid; padding:30px; background-color: #29363f; color:#FFF; height:170px; } .field, .btn { border:1px #525d65 solid; padding:10px; } .field { background: #29363f; margin:5px 25px; width:216px; color:#FFF; } .login h1, .login p, .btn, .forgot { color: #CCC; } .btn { background-color: #29363f; font-weight:bold; margin:10px 25px; width:238px; } .lgn_left, .lgn_right { height: 100%; } .lgn_left { width: 200px; border-right:1px #525d65 solid; float:left; } .lgn_right { width: 300px; float:right; text-align:center; }
Previous page: CSS Login Form Dark Mini
Next page: CSS Contact forms