 |
| Responsive Form V7.0 based on Bootstrap |
Related Articles
Pixelated Art Via HTML & CSS
Fake Whatsapp V1.0 by roundCube inc.
Here's the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login V7.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">
<div id="loginCover"></div>
<div id="login">
<form role="form">
<div class="form-group">
<input type="email" class="form-control input-lg" id="email" placeholder="Email address">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="pwd" placeholder="******">
</div>
</br>
<button type="submit" class="btn btn-default btn-block btn-lg button">Sign In</button>
</form>
</br>
<a href="#"><p style="text-align:center;color:white;">Forgot Password?</p></a>
</div>
<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</a></p></div>
</div>
</body>
<style>
#form{
position: absolute;
top:15%;
left:37%;
height:480px;
width:26%;
background-image: url("http://www.myiphone5wallpaper.com/Gallery/10_Architecture/My-iPhone-5-Wallpaper-HD-Architecture(16).jpg");
background-size: 100% 100%;
border-radius: 5px;
}
#loginCover{
position: absolute;
top:0px;
left:0px;
height:100%;
width:100%;
background-color: black;
opacity: 0.6;
border-radius: 5px;
}
#login{
position: absolute;
top:34%;
left:10%;
width:80%;
height:50%;
}
input#email,input#pwd{
background-color: rgb(30,30,29);
border-radius: 0px;
border-style:none;
color:white;
font-size: 14px;
}
.button{
background-color: rgb(234,203,32);
border-color: rgb(234,203,32);
color:white;
border-radius:25px;
border-width: 4px;
-webkit-transition:all 0.25s ease;
-moz-transition:all 0.25s ease 0s;
}
.button:hover{
background-color: transparent;
border-color: rgb(234,203,32);
border-width: 4px;
border-style: dotted;
color:rgb(234,203,32);
}
#logo{
position: absolute;
top:5%;
height:130px;
left:32%;
width: 130px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbHa4yCqBX9-eFF6HZOY4hFKCnvBrpInfJ5Nnc1VCAnNRUhbjpZxuf9PqD4vsHBxCIeCm4rD1SHlurEdNrzr8MWa_n6z-0JelbGuhgofpLU9DKNuNPFvsN1TNl6ZFXiisFqPNycaUcQM/s1600/Final.png);
background-size: 100% 100%;
}
#copyright{
position: absolute;
bottom:0px;
height:6%;
left:0px;
width:100%;
text-align: center;
}
#copyright a{
color:white;
}
#login a{
color:white;
text-decoration: none;
}
input#email::-webkit-input-placeholder,input#pwd::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
input#email:-moz-placeholder,input#pwd:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
opacity: 1;
}
input#email::-moz-placeholder,input#pwd::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
opacity: 1;
}
input#email:-ms-input-placeholder,input#pwd:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
@media only screen and (max-width:1158px)
{
#form{
width:30%;
left:35%;
}
}
@media only screen and (max-width:1031px)
{
#form{
width:35%;
left:32.5%;
}
}
@media only screen and (max-width:867px)
{
#form{
width:40%;
left:30%;
}
}
@media only screen and (max-width:760px)
{
#form{
width:45%;
left:27.5%;
}
}
@media only screen and (max-width:663px)
{
#form{
width:50%;
left:25%;
}
}
@media only screen and (max-width:575px)
{
#form{
width:60%;
left:20%;
}
}
@media only screen and (max-width:490px)
{
#form{
width:70%;
left:15%;
}
}
@media only screen and (max-width:420px)
{
#form{
width:80%;
left:10%;
}
}
@media only screen and (max-width:360px)
{
#form{
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 don't remove the hyperlink to our Facebook page.
0 comments: