<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> </div> </div> </div> </div> <div class="end-bit"> <div class="row"> <div class="col-xs-12"> <button id="free" type="button" class="btn btn-sm btn-smooth btn-custom" data-plan="free" data-target="/Data/SignUp">Get Started</button> </div> </div> </div> </div> <div class="front text-center"> <div class="top-bit"> <div class="row"> <div class="col-xs-12"> <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-12"> <h3 style="margin: 10px 0;">Free</h3> </div> </div> </div> <div class="middle-bit"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <span class="plan_price plan-bottom"><span class="currency">€</span>0<span class="cents">00</span></span> <span class="plan_price_details plan-bottom">per candidate<br>Filter candidates</span> <span class="plan_price_details plan-bottom">Upgrade at any time</span> </div> </div> <p style="font-size: 12px;" class="text-center demure">More ...</p> </div> <div class="end-bit"> <div class="row"> <div class="col-xs-12"> <button id="free" type="button" class="btn btn-sm btn-smooth btn-custom" data-plan="free" data-target="/Data/SignUp">Get Started</button> </div> </div> </div> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-3" style="margin-bottom: 20px;"> <div class="flipcard"> <div class="back"> <div>This is the back side</div> </div> <div class="front"> <div>This is the front side</div> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="flipcard"> <div class="back"> <div>This is the back side</div> </div> <div class="front"> <div>This is the front side</div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-md-6 col-lg-3"> </div> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="flipcard"> <div class="back"> <div>This is the back side</div> </div> <div class="front"> <div>This is the front side</div> </div> </div> </div> <div class="col-xs-12 col-md-6 col-lg-3"> </div> </div> </div> </section>

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; } .plan_price_details { display: block; font-size: 1em; line-height: 1.2em; opacity: .8; text-shadow: none; } .plan-bottom { margin-bottom: 15px; } .end-bit { border-top: 1px solid #3d3d3d; } .btn-custom { background-color: #222; border-color: #222; } .btn-smooth { min-width: 200px !important; margin-top: 1.5vh; } .cards-rear { margin-top: 5px; color: #6b6b6b; min-height: 256px; } .pc-text { color: #FDFDFD; } .plan-summary-para { margin-top: 5px; } .flipcard { position: relative; width: 280px; height: 400px; perspective: 800px; } .flipcard.flip .front { transform: rotateY(180deg); } .flipcard.flip .back { transform: rotateY(0deg); } .flipcard .back{ transform: rotateY(-180deg); } .flipcard .front, .flipcard .back { background-color: #2c2c2c; border: 1px solid #222; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,.5); position:absolute; width: 100%; height: 100%; box-sizing: border-box; transition: all 1s ease 0s; color: white; padding: 15px 40px; backface-visibility: hidden; margin: 15px 50px 0; }

$(function() { $('div.flipcard').on('click', function(evt) { $(this).toggleClass("flip"); }); });