 |
| Responsive Login Form based on Bootstrap |
Related Articles
Pixelated Art Via HTML & CSS
Loader V3.0
Here's the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login V6.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="login">
<form role="form">
<div id="user">
<div class="form-group">
<p>USERNAME</p>
<input type="email" class="form-control" id="email">
</div>
</div>
<div id="pass">
<div class="form-group">
<p>PASSWORD</p>
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div id="submit">
<button type="submit" class="btn btn-default btn-block">LOG IN</button>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>© roundCube</a></p></div>
</div>
</form>
</div>
</body>
<style>
body{
background-color: rgb(38,38,38);
}
#login{
position: absolute;
top:20%;
left:35%;
width:30%;
height: 260px;
}
#copyright{
position: absolute;
bottom;0px;
height:20%;
left:0px;
width:100%;
text-align: center;
opacity: 0.5;
}
p a{
color: white;
text-decoration: none;
}
p a:hover{
text-decoration: none;
color:white;
}
#user{
position: absolute;
top:0px;
left:10%;
height:35%;
width:80%;
background-color: rgb(31,187,166);
border-radius: 4px;
padding-top:12px;
padding-left: 13px;
padding-right: 13px;
}
#pass{
position: absolute;
top:38%;
left:10%;
height:35%;
width:80%;
background-color: rgb(233,102,56);
border-radius: 4px;
padding-top:12px;
padding-left: 13px;
padding-right: 13px;
}
#submit{
position: absolute;
top:73%;
left:10%;
height:25%;
width:80%;
padding-top: 14px;
}
p {
text-align: center;
color: white;
font-weight: 600;
}
input#email{
border-radius: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEmOQh419GjM0Kx37j19xeKRGdVtSNbe1lKgMafmO-xdmn_fZr8dn3qpgfL-NxP1nrDYzbZCkZznsD5PWJk_OFX1SetkOwuGZQy5YJ988AwDLbXqza57JBzZs3K-pY6KclvXsl8psNwg/s320/user1.png);
background-size: 10% 100%;
background-repeat: no-repeat;
text-indent: 25px;
}
input#pwd{
border-radius: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBt4-1B9povet0QLMBXgGk6dx8IPPCYs9fxkpDFOQQdXbaKqbpfpwiHv9zCk3qe72ZI9osvPUssDYReZaUKu8NPPao_YnaL7gyyTNdUtHvfvFA94F7JnrZQXD6VLbdO5EOsI9G6-9hyzI/s1600/lock2.png);
background-size: 25% 140%;
background-repeat: no-repeat;
text-indent: 25px;
background-position: -20px -6px;
}
.btn-block{
color: gray;
}
@media only screen and (max-width:1078px)
{
#login{
width:35%;
left:32.5%;
}
}
@media only screen and (max-width:953px)
{
#login{
width:40%;
left:30%;
}
}
@media only screen and (max-width:801px)
{
#login{
width:45%;
left:27.5%;
}
}
@media only screen and (max-width:696px)
{
#login{
width:50%;
left:25%;
}
}
@media only screen and (max-width:647px)
{
#login{
width:60%;
left:20%;
}
}
@media only screen and (max-width:538px)
{
#login{
width:70%;
left:15%;
}
}
@media only screen and (max-width:449px)
{
#login{
width:80%;
left:10%;
}
}
@media only screen and (max-width:385px)
{
#login{
width:90%;
left:5%;
}
}
@media only screen and (max-width:338px)
{
#login{
width:95%;
left:2.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 don't remove the hyperlink to our Facebook page.
0 comments: