Bootstrap Snippet Card Flip using HTML CSS Bootstrap jQuery

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<section>
    <div class="container">
<div class="row">
  <div class="col-xs-12 col-md-6 col-lg-3">
        <div class="flipcard">
        <div class="back">
           <div style="border-bottom: 1px solid #3d3d3d;" class="top-bit">
                                        <div class="row">
                                            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                                                <span class="fa-stack fa-2x">
                                                    <span class="fa fa-circle fa-stack-2x icon-background4"></span>
                                                    <span class="fa fa-circle-thin fa-stack-2x icon-background6"></span>
                                                    <span class="off-grey fa fa-crosshairs fa-stack-1x"></span>
                                                </span>
                                            </div>
                                            <div class="col-xs-6 col-sm-6 col-md-9 col-lg-9 text-center">
                                                <h3 style="margin: 15px 0;">Free</h3>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    
                                    <div style="border-bottom: 1px solid #3d3d3d; min-height: 192px;" class="row collapse in">
                                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <div class="middle-bit demure-font cards-rear text-center">
                                                <p style="margin: 10px 0;">Typical use:</p>
                                                <div style="margin-bottom: 8px;" class="row">
                                                    <div class="col-xs-12 pc-text plan-suumary">
                                                        <h5 class="">Stop screening CV's and start filtering candidates by their code, measured by quality, accuracy and speed, with the <strong>Free</strong> plan. </h5>
                                                        <h5 class="plan-summary-para">Send out some filtering tests to anyone who applies for a coder job with you and quickly see who has the minimum basic skills for the task.</h5>
                                                    </div>
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
section { background-color: #282828; }
.top-bit {
    border-bottom: 1px solid #3d3d3d;
}
.middle-bit {
    min-height: 192px;
}
.demure {
    color: #6b6b6b;
}
.plan_price {
    display: block;
    font-size: 6.853em;
    font-weight: 900;
    height: 1em;
    letter-spacing: -2px;
    line-height: 1.2em;
    margin-left: -2.5vw;
    position: relative;
}
.plan-bottom {
    margin-bottom: 15px;
}
.plan_price .currency, .plan_price-md .currency {
    font-size: .382em;
    font-weight: 400;
    letter-spacing: 0;
    position: relative;
    top: -1.15em;
}
.plan_price .cents {
    font-size: .146em;
    font-weight: 700;
    letter-spacing: -1px;
    position: absolute;
    top: -.75em;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$(function() {
    $('div.flipcard').on('click', function(evt) {
       $(this).toggleClass("flip");
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Card Flip"
Bootstrap 3.3.0 Snippet by eslsys

Related: See More

Questions / Comments:

"Card Flip" Bootstrap 3.3.0 Snippet by eslsys

Related: See More

Questions / Comments:

"Card Flip"
Bootstrap 3.3.0 Snippet by eslsys