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