 |
| Login Form V9.0 based on Bootstrap |
Here's the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login V9.0 By roundCube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="form">
</br>
<form class="form" role="form">
<div class="form-group">
<input type="email" class="form-control input-lg" id="email" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="pwd" placeholder="******">
</div>
<button type="submit" class="btn btn-default btn-lg btn-block submit">LOGIN</button>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube</a></div>
</body>
<style>
#form{
position: absolute;
top:27%;
left:35%;
width:30%;
height:310px;
}
input#email{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3sIy64h08C3L_2nCnyUrMe-N5YbWOvlceyFMIBpvfYA4XAW05BLI9RvHmP6GgrHxFAvM15Gi4DFnK2BPmoy-U8K0yO_hSE6pm6zXMUxI95TWM9wuCI9gO5bBAtrUD0rd874PdDOLoC4s/s1600/user.jpg);
background-size: 42px 102%;
background-repeat: no-repeat;
border-radius: 0px;
text-indent: 45px;
border-style: none;
}
#copyright{
position:absolute;
top:2px;
height:20px;
left:0px;
width:100%;
text-align:center;
}
#copyright a{
text-decoration:none;
color:#333;
}
input#pwd{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjevFDxfl_tuWUBo5wkVg_ALfCYGAG0ZnfLugc9-N4cTb9eon09vAPdjUp176em9Hk_mppl7zWMnNDD-2j8yIM_LBLzwwo-3JcvPjbSOCMK497O9VIE5ASuyaFYzKRrJLJ5U-7l4uJzlFA/s1600/password.jpg);
background-size: 43px 100%;
background-repeat: no-repeat;
border-radius: 0px;
text-indent: 45px;
border-style: none;
}
.submit{
text-align: left;
border-radius: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0xlMcu9ys_D5ACWEwQSRuEEDc1dB4acKIxXGjOP8qXpDdbAi6ST0eG-BYKyWQBPCr6hRAzOzaVe8QvTGoy1T7nt-WEOl2WgJYhLvcFBz3-nwXBDvb9TaVkJK6qNnzfflRl4bmFKO1rI/s1600/login.jpg);
background-size: 43px 100%;
text-indent: 45px;
background-repeat: no-repeat;
border-style: none;
}
@media only screen and (max-width:1040px)
{
#form{
left:30%;
width:40%;
}
}
@media only screen and (max-width:795px)
{
#form{
left:25%;
width:50%;
}
}
@media only screen and (max-width:634px)
{
#form{
left:20%;
width:60%;
}
}
@media only screen and (max-width:528px)
{
#form{
left:10%;
width:80%;
}
}
@media only screen and (max-width:393px)
{
#form{
left:5%;
width:90%;
}
}
</style>
</html>
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
If you like our work please don't remove the hyperlink to our Facebook page.
![Pinterest](http://pinterest.com/pin/create/button/?url=https://roundcubee.blogspot.com/2015/08/fully-responsive-login-form-v90-based.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghSSwHMlJ8P0zer7fzrTIz2s6-e8IN7lt6Ruk3jLz9hyphenhypheni6gD4fi9jpcQaTnbSgEPG8htU3ZgLlx0n9pRLb33RNHKK7kyVFLPK27LCs4f8GGkDHC5uuYdhGO2_HaOKnVYfsNKzLAzvHg2U/s72-c/login+v9.png&description= Login Form V9.0 based on Bootstrap Here's the code snippet: <!DOCTYPE html> <html lang="en"> ...){kind=link}
0 comments: