<div class="main-wrap">
	<div class="login-main">
		<input type="text" placeholder="user name" class="box1 border1">
		<input type="password" placeholder="password" class="box1 border2">
		<input type="submit" class="send" value="Go">
		<p>Forgot Your Password? <a href="#">click here</a></p>    
	</div>
	
</div>
 /******************************         
 http://www.freetimelearning.com  
 http://www.freetimelearn.com          
 *******************************/
* {
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  outline: none;
}
body,
a {
  font-family: calibri;
  font-size: 14px;
  line-height:30px;
  font-weight: normal;
  color:#EEE;
}
.main-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  background:#F2F2F2;
}
.login-main {
  width: 300px;
  height: 100px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:#006;
  padding: 10px 10px 30px 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.login-main p {
  text-indent: 10px;
}
.box1 {
  background:#B9B9FF;
  height: 40px;
  text-indent: 10px;
  width: 90%;
  margin-bottom: 2px;
  color: #000;
  font-size: 15px;
  font-weight: 400;
}
.border1 {
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -ms-border-radius: 5px 5px 0 0;
  -o-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}
.border2 {
  -webkit-border-radius: 0px 0 5px 5px;
  -moz-border-radius: 0px 0 5px 5px;
  -ms-border-radius: 0px 0 5px 5px;
  -o-border-radius: 0px 0 5px 5px;
  border-radius: 0px 0 5px 5px;
}
.send {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  right: 9px;
  top: 20px;
  border: 5px solid #069;
  background:#036;
  font-size: 18px;
  color: #fff;
  font-weight: normal;
  text-shadow: 1px 1px 2px #000;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.send:hover {
  animation: spin 0.3s ease-in-out;
  -webkit-animation: spin 0.3s ease-in-out;
  -moz-animation: spin 0.3s ease-in-out;
  -ms-animation: spin 0.3s ease-in-out;
  -o-animation: spin 0.3s ease-in-out;
  cursor: pointer;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}

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.