Related Articles:
Fully Responsive Login Form based on Bootstrap V2.0
Fully Responsive Login Form based on Bootstrap V1.0
Here's the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login V4.0 by roundCube</title>
<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="background">
<div id="form">
</br></br></br>
<h3 style="color:gray;">Member Login</h3>
<div id="login">
<form role="form">
<div class="form-group">
<input type="name" class="form-control" id="name" placeholder="USERNAME">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="********" id="pwd" >
</div>
</br>
<button type="submit" class="btn btn-default btn-block login">LOGIN</button>
</form>
</div>
<div id="image"></div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>© roundCube</a></p></div>
</div>
</div>
</body>
<style>
#background{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgb(247,219,86);
}
#form{
position: absolute;
top:20%;
left:37%;
height:340px;
width:26%;
background-color: white;
border-radius: 5px;
text-align: center;
}
#login{
position: absolute;
top:40%;
left:10%;
width:80%;
height:50%;
}
input#name{
background-color: rgb(211,211,211);
font-weight: 600;
border-width: 0px;
}
input#pwd{
background-color: rgb(211,211,211);
font-weight: 600;
border-width: 0px;
}
.login{
background-color: rgb(33,169,87);
color: white;
border-color: rgb(33,169,87);
box-shadow: inset 0px 0px 30px 1px rgba(0,0,0,0.2);
}
.login:hover{
background-color: rgb(40,210,108);
color: white;
border-color: rgb(40,210,108);
}
#image{
position: absolute;
background-color: rgb(32,169,87);
top:-45px;
left:38%;
width:90px;
height: 90px;
border-radius: 50%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWxmIQOGyp6K4vFBPeuHJTzLy_kOxnw2panmnz5vnPGlhiHPv1iNNm1QtZs7e9P0cB1IJ7Lslhxe3qVvz2uz990N7t_16Ns6zSbIXjXiqtkgikY6qUu8F8mgh8Q4DBg3w4jzLkrmFKfjw/s1600/user4.png);
background-size: 80% 80%;
background-position: 9px 8px;
background-repeat: no-repeat;
}
#copyright{
position: absolute;
left:0px;
bottom: 4px;
width:100%;
height:7%;
}
#copyright a{
text-decoration: none;
}
@media only screen and (max-width:1136px)
{
#form{
width:30%;
left:35%;
}
}
@media only screen and (max-width:968px)
{
#form{
width:40%;
left:30%;
top:10%;
}
}
@media only screen and (max-width:683px)
{
#form{
width:50%;
left:25%;
top:10%;
}
}
@media only screen and (max-width:513px)
{
#form{
width:60%;
left:20%;
top:10%;
}
}
@media only screen and (max-width:421px)
{
#form{
width:75%;
left:12.5%;
top:10%;
}
#image{
left:36%;
}
}
@media only screen and (max-width:341px)
{
#form{
width:85%;
left:7.5%;
top:10%;
}
#image{
left:36%;
}
}
</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.
0 comments: