<div class="main">

	<div class="login">
	  <h2>Login Now</h2>
	  <fieldset>
		<input type="email" placeholder="Email" name="email" />
		<input type="password" placeholder="Password" name="email" />
	  </fieldset>
	  <input type="submit" class="input_submit" value="Log In" />
	  <div class="utilities">
		<a href="#">Forgot Password?</a>
		<a href="#">Sign Up &rarr;</a>
	  </div>
	</div>

</div>
 /******************************         
 http://www.freetimelearning.com  
 http://www.freetimelearn.com          
 *******************************/
body {
  font-family:Arial, Helvetica, sans-serif;
  background:#00B7B7;
}
.main{ margin:40px auto 20px !important; width:450px;}
.login {
  width: 340px;
  background-color:#00B3B3;
  border-radius: 2px;
  padding: 20px;
  position: absolute;
  left: 50%;
  top: 100px;
  margin-left: -170px;
  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
}
.login h2 {
  color: white;
  font-size: 20px;
  margin: 0 0 15px;
  text-shadow: 0px -1px rgba(0, 0, 0, 0.5);
}
.login fieldset {
  border: 0;
  padding: 0;
  margin-bottom: 10px;
}
.login fieldset input {
  outline: none;
  width: 300px;
  height: 12px;
  display: block;
  background: #00B3B3;
  border: 1px solid #009F9F;
  margin: 0;
  color:#FFF;
  padding: 13px 15px;
  font-size: 13px;
}
.login fieldset input:focus, .login fieldset input:active {
  background-color:#009595;
}
.login fieldset input:nth-child(1) {
  border-radius: 5px 5px 0 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
}
.login fieldset input:nth-child(2) {
  position: relative;
  top: -1px;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.4);
}
.login fieldset ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.input_submit{
  margin: 0;
  display: block;
  padding: 13px 0;
  width: 335px;
  font-size: 13px;
  font-weight: bold;
  border: 0;
  cursor:pointer;
  text-shadow: 0px 1px 0px rbga(255, 255, 255, 1);
  background-color: #00B3B3;
  background-image: -webkit-linear-gradient(90deg, #008A8A, #00D2D2);
  border-radius: 2px;
  color:#FFF;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.4);
}
.input_submit:hover{
	color:#FFF;
  background-color: #00B3B3;
  background-image: -webkit-linear-gradient(90deg, #00D2D2, #008A8A);
}

.login .utilities {
  margin-top: 20px;
}
.login .utilities a {
  color:#333;
  text-decoration: none;
  font-size: 12px;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
}
.login .utilities a:hover {
  color: white;
}
.login .utilities a:nth-child(2) {
  display: block;
  float: right;
  width: 50%;
  text-align: right;
}
.login:before, .login:after {
  z-index: -1;
  position: absolute;
  content: "";
  left: 5px;
  width: 53%;
  top: 15px;
  height: 80%;
  bottom: 80%;
  max-width: 300px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: -10px -15px 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(-3deg);
}
.login:after {
  box-shadow: 10px -15px 20px rgba(0, 0, 0, 0.2) !important;
  -webkit-transform: rotate(3deg);
  right: 5px;
  left: auto;
}

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.