Bootstrap Snippet Sign in/Sign up Flip effect using HTML CSS Bootstrap Javascript

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"  rel="stylesheet">
    <div class="container">
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
        
        <h4>Click "Create new account?"</h4>
          <div class="flip">
        <div class="card"> 
          <div class="face front"> 
              
            <div class="panel panel-default">
              <form class="form-horizontal">
                
                <br>
                <h1 class="text-center">LOGO</h1>
                <br>
                
                <input class="form-control" placeholder="Username"/>
                <input class="form-control" placeholder="Password"/>
                <p class="text-right"><a href="">Forgot Password</a></p>
                <button class="btn btn-primary btn-block">LOG IN</button>
                <hr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
body{
    padding-top: 100px;
}
form{
    padding: 20px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 15px 0 rgba(0,0,0,0.12) !important;
}
h4{
    text-align: center;
}
.btn{
    border-radius: 0px;
}
.form-control{
    border-radius: 0px;
    margin-bottom: 10px;
}
p{
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
}
.blue{
    color: #337ab7;
}
.fa{
    color: #337ab7;
}
.fa-facebook-f{
    padding: 10px 12px 10px 12px;
    border: 1px solid #337ab7;
    border-radius: 50%;
}
.fa-google-plus{
    padding: 10px 8px 10px 8px;
    border: 1px solid #337ab7;
    border-radius: 50%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
 $('.fliper-btn').click(function(){
    $('.flip').find('.card').toggleClass('flipped');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sign in/Sign up Flip effect"
Bootstrap 3.3.0 Snippet by gerryl1991

Related: See More

Questions / Comments:

"Sign in/Sign up Flip effect" Bootstrap 3.3.0 Snippet by gerryl1991

Related: See More

Questions / Comments:

"Sign in/Sign up Flip effect"
Bootstrap 3.3.0 Snippet by gerryl1991