HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div class="login-box animated fadeInLeft" id="login" style="display:none;">
    <form action="#" method="post">
        <h2 class="text-center">Log in</h2>      
        <div class="form-group">
            <input type="text" class="form-control" placeholder="UserId" required="required">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" placeholder="Password" required="required">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success btn-block">Log in</button>
        </div>
        <div class="clearfix">
            <label class="pull-left checkbox-inline"><input type="checkbox"> Remember me</label>
            <a href="#" class="pull-right forgot-password">Forgot Password?</a>
        </div>        
    </form>
    <p class="text-center">New <a href="#" class="sign">Signup</a> here</p>
</div>
<div class="login-box animated fadeInLeft" id="signup">
    <form action="#" method="post">
        <h2 class="text-center">Sign Up here</h2>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Name" required="required">
        </div> 
        <div class="form-group">
            <input type="email" class="form-control" placeholder="Email" required="required">
        </div>     
        <div class="form-group">
            <input type="text" class="form-control" placeholder="UserId" required="required">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" placeholder="Password" required="required">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success btn-block">Sign Up</button>
        </div>    
    </form>
    <p class="text-center">Already a member <a href="#" class="login">Login</a> here</p>
</div>

<div class="login-box animated fadeInLeft" id="forgot" style="display:none;">
    <form action="#" method="post">
        <h2 class="text-center">Forgot Password</h2>
        <div class="form-group">
            <input type="email" class="form-control" placeholder="Email Address" required="required">
        </div>     
         <div class="form-group">
            <button type="submit" class="btn btn-success btn-block">Submit</button>
        </div>  
    </form>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
body, html{height:100%;}
body{background-color:#fbfbfb; display:table; width:100%; max-width:450px; margin:0 auto;}
.login-body{background-color:#fbfbfb; display:table; width:100%; min-width:800px; margin:0 auto;}
.login-box{ display:table-cell; vertical-align:middle; text-align:center; color: #7b7b7b;}
.login-box form{    background-color: #fff; padding:40px 60px;  margin-bottom: 20px;  box-shadow: 0 10px 20px -10px #ccc;  -webkit-box-shadow: 0 10px 20px -10px #ccc;
    border-radius: 0px 60px 0 0;}
.login-box h2{margin:0 0 20px;}
.login-box .btn{border-radius:0;     padding: 12px 15px;}
.login-box .form-control {
    border-color: #f2f2f2;
    border-radius: 0;
    padding: 20px 15px;
}

Jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(".login").on("click",function(e){
e.preventDefault();
    $('#login').show();
    $('#signup').hide();
})
$(".sign").on("click",function(e){
e.preventDefault();
    $('#signup').show();
    $('#login').hide();
})
$(".forgot-password").on("click",function(e){
e.preventDefault();
    $('#forgot').show();
    $('#login').hide();
})
$("#forgot form").on("submit",function(e){
    e.preventDefault();
    $('#login').show();
    $('#forgot').hide();
   
})

Preview

bootstrap login example with signup

Leave a Reply

avatar
  Subscribe  
Notify of