CSS Login Form Dark Maxi



CSS login form Dark Maxi, compatible with all major browsers. Pure CSS no images or javascript.

Demo:

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;
}