 |
| Responsive Login Form Based On Bootstrap V2.0 |
Here's the code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login 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 style="background-color:black;">
<div class="container-fluid" >
<div id="socialButtons">
<a href="https://www.facebook.com/roundCubeInc?fref=ts"><div id="facebook"><button type="submit" class="btn btn-primary btn-lg btn-block fb">Login with Facebook</button></div></a>
<a href="https://twitter.com/iezzusama"><div id="twitter"><button type="submit" class="btn btn-primary btn-lg btn-block twitter">Login with Twitter</button></div></a>
</div>
<div class="loginForm">
<div class="loginImage">
<a href="https://www.facebook.com/roundCubeInc?fref=ts"><div id="logo"></div></a>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>roundCube</p></a></div>
</div>
<div class="signUpText">
<h3><b>Hey, you can login here</b></h3>
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder=" someone@domain.con">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="********">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block" >Submit</button>
</form>
</div>
</div>
</div>
</body>
<style>
.loginForm{
position:absolute;
height:70%;
width:30%;
left:35%;
top:7%;
background-color:white;
border-radius:10px;
border-bottom-color:black;
border-bottom-style:solid;
border-bottom-width:1px;
}
.loginImage{
position:absolute;
height:40%;
width:100%;
left:0px;
top:0px;
border-radius:10px;
background-color:black;
background-image:url(http://aesthetictech.net/wp-content/uploads/2014/03/keyboard-hands-on.jpg);
background-size:150% 150%;
}
#logo{
position:absolute;
height:130px;
width:130px;
left:37%;
top:16%;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbHa4yCqBX9-eFF6HZOY4hFKCnvBrpInfJ5Nnc1VCAnNRUhbjpZxuf9PqD4vsHBxCIeCm4rD1SHlurEdNrzr8MWa_n6z-0JelbGuhgofpLU9DKNuNPFvsN1TNl6ZFXiisFqPNycaUcQM/s1600/Final.png);
background-size:100% 100%;
}
.signUpText{
position:absolute;
top:42%;
height:49%;
left:4%;
width:92%;
}
#socialButtons{
position:absolute;
height:20%;
width:30%;
left:35%;
bottom:5%;
background-color:white;
border-radius:10px;
}
.btn-primary{
background-color:#FFAF03;
border-color:#FFAF03;
}
.btn-primary:hover{
background-color:#EDB02D;
border-color:#EDB02D;
}
#facebook{
position:absolute;
top:15%;
width:94%;
left:3%;
height:37%;
border-radius:3px;
opacity:0.8;
}
#twitter{
position:absolute;
top:59%;
width:94%;
left:3%;
height:28%;
border-radius:3px;
opacity:0.8;
}
.fb{
background-color:#3b5998;
border-color:#3b5998;
}
.fb:hover{
background-color:#8b9dc3;
border-color:#8b9dc3;
}
.twitter{
background-color:rgb(40,170,225);
border-color:rgb(40,170,225);
}
.twitter:hover{
background-color:rgb(94,169,221);
border-color:rgb(94,169,221);
}
#copyright{
position:absolute;
top:0px;
left:0.5%;
width:99%;
height:3%;
text-align:center;
}
#copyright a{
text-decoration:none;
color:gray;
}
@media only screen and (max-width:1109px)
{
#logo{
left:32%;
}
}
@media only screen and (max-width:933px)
{
#logo{
left:28%;
}
}
@media only screen and (max-width:749px)
{
.loginForm{
width:50%;
left:25%;
}
#logo{
left:33%;
}
#socialButtons{
width:50%;
left:25%;
}
}
@media only screen and (max-width:592px)
{
.loginForm{
width:70%;
left:15%;
}
#logo{
left:35%;
}
#socialButtons{
width:70%;
left:15%;
}
}
@media only screen and (max-width:402px)
{
.loginForm{
width:90%;
left:5%;
}
#logo{
left:31%;
}
#socialButtons{
width:90%;
left:5%;
}
}
</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 dont remove the hyperlink to our Facebook page.
![Pinterest](http://pinterest.com/pin/create/button/?url=http://roundcubee.blogspot.com/2015/07/fully-responsive-login-form-based-on_13.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkxuwVPiIk4ebXIXjoLy0zpbd3JytOkz4fcmwyVXrgJ5MF9AU-7nM8_vSxs6NfCbSY9utNTvZ6plgpHmiJkYwjwdkMKNL9AUMI0RVbLlDPUpprDb3FLY8aCKG1C9ZJWhYhX3lYBbMg9s/s72-c/responsive+form.png&description= Responsive Login Form Based On Bootstrap V2.0 Here's the code Snippet: <!DOCTYPE html> <html lang="en">...){kind=link}
0 comments: