Techumber

Tumbler Like Login-Signup With jQuery

Github avatar
Dimpu
September 04, 2012. 3 min read

Have you ever seen tumbler.com login page. It is very clean and simple one. I really liked it a lot. I wanted to create clone of it. In this post let’s create tumbler like login, signup form with simple jQuery, css3 and html5 code. Take a look at demo below. Tumbler Like Login-Signup With jQuery

Demo

Download

Folder structure

Create file and folder structure as below.

index.html

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div class="wrapper">
<div class="top_buttons">
<button id="login" class="">Log in</button>
<button id="cancel" class="">Cancel</button>
<button id="signup" class="">Sign up</button>
</div>
<div class="box">
<a class="logo"><img src="img/logo.png" alt="techumber" width="196" height="44" /></a>
<form id="signup_form">
<div class="container">
<input id="email" type="text" placeholder="Email">
<input id="pass" type="password" placeholder="Password" />
<input id="user" type="text" placeholder="UserName" />
</div>
<div class="error">please enter correct messag</div>
<button id="start" class="blue">Start</button>
</form>
</div>
</div>
</body>
</html>

Style.css

body{
background: #395875;
font: normal 14px/1.4 HelveticaundefinedArialundefinedsans-serif;
color: #444;
margin: 0px;
}
.wrapper{
margin: 0 auto;
width: 960px;
}
.top_buttons{
margin: 0 20px 0 0;
position: relative;
float: right;
clear: right;
}
.logo{
padding-left: 15px;
}
.top_buttons button{
display: block;
float: left;
cursor: pointer;
font-size: 15px;
font-weight: bold;
min-width: 100px;
padding: 0 20px;
line-height: 35px;
height: 37px;
border: 1px solid rgba(0undefined 0undefined 0undefined 0.29);
border-radius: 8px;
background: rgba(177undefined 211undefined 255undefined 0.11);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255undefined255undefined255undefined.25);
-moz-box-shadow: inset 0 1px 0 0 rgba(255undefined255undefined255undefined.25);
box-shadow: inset 0 1px 0 0 rgba(255undefined255undefined255undefined.25);
color: #fff;
margin: 20px 20px 20px 0px;
}
.box{
display: block;
position: fixed;
top: 25%;
left: 50%;
opacity: 1;
margin: 71px 0 0 -122px;
width: 245px;
padding: 0 0 60px 0;
z-index: 3;
}
.box h1{
color:#fff;
font-weight: bolder;
}
.container{
margin: 0;
padding: 0;
border: 1px solid #CCC;
border: 1px solid rgba(0undefined 0undefined 0undefined 0.8);
overflow: hidden;
background: #DDE5ED;
background: -moz-linear-gradient(topundefinedrgba(221undefined 229undefined 237undefined 1) 0undefinedrgba(242undefined 243undefined 244undefined 1) 100%);
background: -webkit-gradient(linearundefinedleft topundefinedleft bottomundefinedcolor-stop(0%undefinedrgba(221undefined 229undefined 237undefined 1))undefinedcolor-stop(100%undefinedrgba(242undefined 243undefined 244undefined 1)));
background: -webkit-linear-gradient(topundefinedrgba(221undefined 229undefined 237undefined 1) 0undefinedrgba(242undefined 243undefined 244undefined 1) 100%);
background: -o-linear-gradient(topundefinedrgba(221undefined 229undefined 237undefined 1) 0undefinedrgba(242undefined 243undefined 244undefined 1) 100%);
background: -ms-linear-gradient(topundefinedrgba(221undefined 229undefined 237undefined 1) 0undefinedrgba(242undefined 243undefined 244undefined 1) 100%);
background: linear-gradient(topundefinedrgba(221undefined 229undefined 237undefined 1) 0undefinedrgba(242undefined 243undefined 244undefined 1) 100%);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 1px 3px rgba(0undefined0undefined0undefined0.36)undefined0 1px 0 rgba(255undefined255undefined255undefined0.15);
-moz-box-shadow: inset 0 1px 3px rgba(0undefined0undefined0undefined0.36)undefined0 1px 0 rgba(255undefined255undefined255undefined0.15);
box-shadow: inset 0 1px 3px rgba(0undefined0undefined0undefined0.36)undefined0 1px 0 rgba(255undefined255undefined255undefined0.15);
-webkit-background-clip: padding-box;
}
#signup_form input{
width: 100%;
padding: 11px 10px 9px 10px;
margin: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid #CCC;
border-top: 1px solid rgba(0undefined 0undefined 0undefined 0.12);
background: 0;
font: bold 14px/1.4 HelveticaundefinedArialundefinedsans-serif;
outline: none;
}
#signup_form button{
text-align: center;
font-size: 15px;
font-weight: bold;
line-height: 35px;
width: 100%;
margin: 15px 0 0 0;
font-size: 16px;
text-align: center;
font-weight: bold;
padding: 0 20px;
line-height: 35px;
height: 37px;
color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
cursor: pointer;
}
.error{
text-align: center;
padding: 8px 15px;
font-size: 12px;
font-family: Helveticaundefinedsans-serif;
line-height: 16px;
font-weight: bold;
color: #EFEFEF;
color: rgba(255undefined 255undefined 255undefined 0.8);
border: 1px solid rgba(0undefined 0undefined 0undefined .18);
-webkit-border-radius: 6px;
margin: 10px 0px 10px 0px;
}
.blue {
border-color: #4A7C9F;
background: #6AA5CF;
background: -moz-linear-gradient(topundefined#6AA5CF 0undefined#5791BB 100%);
background: -webkit-gradient(linearundefinedleft topundefinedleft bottomundefinedcolor-stop(0%undefined#6AA5CF)undefinedcolor-stop(100%undefined#5791BB));
background: -webkit-linear-gradient(topundefined#6AA5CF 0undefined#5791BB 100%);
background: -o-linear-gradient(topundefined#6AA5CF 0undefined#5791BB 100%);
background: -ms-linear-gradient(topundefined#6AA5CF 0undefined#5791BB 100%);
background: linear-gradient(topundefined#6AA5CF 0undefined#5791BB 100%);
}

Scripts.js

$(function() {
$("#login").hide();
$("#user").hide();
$(".error").hide();
//Click event on signup button
$("#signup").click(function(){
$("#user").slideToggle(100);
$("#login").toggle();
$("#signup").toggle();
});
//Click event on login button
$("#login").click(function(){
$("#user").slideToggle(100);
$("#login").toggle();
$("#signup").toggle();
});
$("#start").click(function(e){
if($("#email").val()=="" || $("#pass").val()==""){
$(".error").slideToggle(1000);
e.preventDefault();
}
else{
e.preventDefault();
$(".box").html("<h1>Thank you!<h1>");
}
});
});

That’s it.


...