 |
| Responsive login form based on Bootstrap |
Here's the code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</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>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body style="background-image:url(http://www.mrwallpaper.com/wallpapers/gradient-background.jpg);width:100%;height:100%;">
<div class="container" >
<div id="loginForm">
<div id="loginImage">
<div id="loginImage1"><a href="https://www.facebook.com/roundCubeInc"><img src="https://scontent-fra3-1.xx.fbcdn.net/hphotos-xta1/v/t1.0-9/10387305_969118939794326_6462601027113652936_n.jpg?oh=c3d8e25c7f0e1665ca3732f6cdcd5ea1&oe=5610CEE1" class="img-responsive img-circle" alt="roundCube"></a></div>
</div>
<div id="formElements">
<form role="form">
<div class="form-group">
<input type="email" class="form-control input-lg" id="email" placeholder=" Your Email Address" style="background-color:black;opacity:0.5;color:white;">
</div>
</br>
<div class="form-group">
<input type="password" class="form-control input-lg" id="pwd" placeholder=" Your Password" style="background-color:black;opacity:0.5;color:white;">
</div>
</br>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</br>
<button type="submit" class="btn btn-primary btn-block btn-lg">Submit</button>
</form>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc"><p>roundCube</p></p></div>
</div>
</div>
</body>
<style>
#loginForm{
position:absolute;
height:420px;
width:30%;
top:18.5%;
left:35%;
background-color:transparent;
border-style:solid;
border-width:1px;
border-color:white;
}
#loginImage{
position:absolute;
height:100px;
width:100px;
top:-11%;
left:150px;
background-color:transparent;
border-radius:50%;
border-style:solid;
border-width:1px;
border-color:white;
}
#loginImage1{
position:absolute;
height:90px;
width:90px;
top:4%;
left:4%;
background-color:transparent;
}
#formElements{
position:absolute;
height:65%;
width:90%;
top:25%;
left:5%;
background-color:transparent;
}
#copyright{
position:absolute;
height:20px;
width:100%;
bottom:0px;
left:0px;
text-align:center;
color:white;
}
#copyright a{
color:white;
text-decoration:none;
}
@media only screen and (max-width:1166px){
#loginImage{
left:38%;
}
}
@media only screen and (max-width:959px){
#loginImage{
left:33%;
}
}
@media only screen and (max-width:793px){
#loginImage{
left:30%;
}
}
@media only screen and (max-width:621px){
#loginImage{
left:35%;
}
}
@media only screen and (max-width:593px){
#loginImage{
left:25%;
}
#loginForm{
width:50%;
left:25%;
}
}
@media only screen and (max-width:473px){
#loginImage{
left:25%;
}
#loginForm{
width:70%;
left:15%;
}
}
</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
![Pinterest](http://pinterest.com/pin/create/button/?url=http://roundcubee.blogspot.com/2015/07/fully-responsive-login-form-based-on.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9JuEpJ_Ddkb-bRdWSLD9JW8JDdkAOtUxABrc_bPx55O2MNGerHDcBXMTD6f1GThzaNyfwjTzke93kXqaFfQn9u1h9LcQhyphenhyphenNBJv6qiZUwiMa83fdgC7tuGR0DGAdMGCtuJPQfv7YPuqhY/s72-c/bootstrap+login+form.png&description= Responsive login form based on Bootstrap Here's the code Snippet: <!DOCTYPE html> <html lang="en"> <...){kind=link}
0 comments: