 |
| Completely Responsive Glassy Login and Registration Form |
Here's the code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Glassy Login V1.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>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="background">
<div id="container-fluid">
<div id="formsBody">
<div id="loginForm">
<div class="Text">
<p><b>Already have an account?</b></p>
<h2 style="line-height:0;color:orange;"><b>Login Here</b></h2>
</div>
<div class="forms">
<form role="form">
</br>
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Username" style="color:white;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/AWS_Simple_Icons_Non-Service_Specific_User.svg/2000px-AWS_Simple_Icons_Non-Service_Specific_User.svg.png" width=25 />
</div>
</br>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" style="color:white;">
</div>
</br>
</br>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</br><p style="color:white;text-align:right;">Forgot your password?</p>
</div>
<div id="copyrights"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>© roundCube</p></a></div>
</div>
<div id="signUpForm">
<div class="Text">
<p><b>Don't have an account?</b></p>
<h2 style="line-height:0;color:orange;"><b>Register Now</b></h2>
</div>
<div class="forms">
<form role="form">
</br>
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Desired Username" style="color:white;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/AWS_Simple_Icons_Non-Service_Specific_User.svg/2000px-AWS_Simple_Icons_Non-Service_Specific_User.svg.png" width=25 />
</div>
</br>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" style="color:white;">
</div>
<div class="form-group">
<input type="password" class="form-control" id="passwordConfirmation" placeholder="Confirm Password" style="color:white;">
</div>
</br>
<button type="submit" class="btn btn-primary btn-block">Register</button>
</form>
</div>
</div>
<div id="or">
<h5 style="line-height:2.2;"><b>OR</b></h5>
</div>
</div>
</div>
</div>
</body>
<style>
#background{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(http://i.kinja-img.com/gawker-media/image/upload/s--Pi3o3ZvA--/c_fit,fl_progressive,q_80,w_636/185ymmk6lcvfyjpg.jpg);
background-size:100% 100%;
}
#formsBody{
position:absolute;
top:17%;
left:25%;
width:50%;
height:400px;
}
#loginForm{
position:absolute;
top:0%;
left:0%;
width:49.3%;
height:100%;
background-color:rgba(255,255,255,0.3);
}
#signUpForm{
position:absolute;
top:0%;
right:0%;
width:49.3%;
height:100%;
background-color:rgba(255,255,255,0.3);
}
#or{
position:absolute;
top:46%;
left:46.5%;
width:50px;
height:50px;
background-color:white;
border-radius:50%;
text-align:center;
color:black;
font-family: 'Slabo 27px', serif;
}
.Text{
position:absolute;
top:10%;
left:15%;
width:80%;
height:15%;
background-image:url(http://gsg.usc.edu/sites/gsg.usc.edu/files/yellow_arrow_circle.png);
background-size:13% 56%;
background-repeat:no-repeat;
color:white;
text-align:center;
font-family: 'Slabo 27px', serif;
line-height:0.5;
}
.forms{
position:absolute;
bottom:2%;
left:10%;
width:80%;
height:70%;
}
#copyrights{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:5%;
text-align:center;
color:white;
}
#copyrights a{
text-decoration:none;
color:white;
}
.form-group input[type="text"] {
border: none;
background-color: rgba(0,0,0,0.7);
}
.form-group input[type="password"] {
border: none;
background-color: rgba(0,0,0,0.7);
}
::-webkit-input-placeholder {
color: white;
}
:-moz-placeholder { /* Firefox 18- */
color: white;
}
::-moz-placeholder { /* Firefox 19+ */
color: white;
}
:-ms-input-placeholder {
color: white;
}
.form-group input { border:none: background:#fff; display:block; width: 100%; box-sizing: border-box }
.form-group img { position: absolute; top: 8.5%; right: 2%; }
@media only screen and (max-width:1123px)
{
.Text{
width:90%;
left:5%;
}
#or{
left:45.5%;
}
}
@media only screen and (max-width:1086px)
{
#formsBody{
left:22.5%;
width:55%;
}
}
@media only screen and (max-width:961px)
{
#formsBody{
left:20%;
width:60%;
}
}
@media only screen and (max-width:847px)
{
#formsBody{
left:17.5%;
width:65%;
}
}
@media only screen and (max-width:750px)
{
#formsBody{
left:15%;
width:70%;
}
@media only screen and (max-width:655px)
{
#formsBody{
left:10%;
width:80%;
}
#or{
width:40px;
height:40px;
}
}
@media only screen and (max-width:589px)
{
#formsBody{
left:7.5%;
width:85%;
}
}
@media only screen and (max-width:548px)
{
#formsBody{
left:5%;
width:90%;
}
.Text{
background-image:none;
}
}
@media only screen and (max-width:432px)
{
#or{
opacity:0;
}
h2{
font-size:25px;
}
}
@media only screen and (max-width:360px)
{
h2{
font-size:20px;
}
p b{
font-size:12px;
}
}
</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: