<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/jesperkc/pen/BKVPaE?limit=all&page=28&q=shop" />
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);
/*** Shadows ***/
/*** Follow ***/
a.follow {
position: absolute;
left: 0;
top: 0;
padding: 10px;
color: #fff !important;
z-index: 9999;
font-family: 'Helvetica';
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
opacity: .5;
}
a.follow svg {
vertical-align: middle;
margin-right: 5px;
}
a.follow span {
display: none;
}
a.follow:hover {
opacity: 1;
}
a.follow:hover span {
display: inline;
}
body {
font-family: 'Open Sans', arial;
}
html, body {
min-height: 100%;
height: 100%;
background: #f4f4f4;
}
.demo-container {
display: table;
width: 100%;
height: 100%;
}
.demo-container-inner {
display: table-cell;
vertical-align: middle;
}
.contents {
width: 80%;
margin: auto;
}
.s10 {
height: 10px;
}
h1 {
margin-bottom: 40px;
font-weight: 300;
color: #999;
}
.flipable {
-webkit-perspective: 80;
perspective: 80;
position: relative;
display: inline-block;
}
.flipable .flipable-group {
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flipable .flipable-group > *:nth-child(1), .flipable .flipable-group > *:nth-child(2) {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
top: 0;
left: 0;
}
.flipable .flipable-group > *:nth-child(1) {
position: relative;
z-index: 1;
}
.flipable .flipable-group > *:nth-child(2) {
-webkit-transform: rotatex(180deg);
transform: rotatex(180deg);
position: absolute;
}
.flipable.flipped .flipable-group {
-webkit-transform: rotatex(180deg);
transform: rotatex(180deg);
}
.flipable.flipped .flipable-group > *:nth-child(1) {
pointer-events: none;
}
.flipable.flipped .flipable-group > *:nth-child(2) {
z-index: 10;
}
.form-control {
border-color: #000;
border-width: 0 0 1px 0;
border-radius: 0;
background: transparent;
color: #000;
padding: .375rem 0;
}
.form-control:focus {
border-color: #000;
outline: 0;
}
.btn:focus, .btn:active {
outline: 0 !important;
box-shadow: none !important;
}
.card {
border-color: #ccc;
}
.card .card-title {
color: #fc5830;
}
.cart-price {
font-size: 1.5rem;
}
.add-to-cart span, .remove-from-cart span {
pointer-events: none;
}
.add-to-cart {
background-color: #fc5830;
border-color: #fc5830;
}
.add-to-cart:hover, .add-to-cart:active, .add-to-cart:focus, .add-to-cart:active:focus {
background-color: #fc4417;
border-color: #fc4417;
}
.remove-from-cart {
background-color: #0da58e;
border-color: #0da58e;
}
.remove-from-cart:hover, .remove-from-cart:active, .remove-from-cart:focus, .remove-from-cart:active:focus {
background-color: #ed1c24;
border-color: #ed1c24;
}
.checkout-form {
color: white;
padding: 20px;
z-index: 998;
top: 50px;
right: 10px;
background-color: #fff;
-webkit-transition: right 0.5s;
transition: right 0.5s;
position: absolute;
width: 390px;
color: white;
-webkit-clip-path: inset(0 0 100% 0);
clip-path: inset(0 0 100% 0);
-webkit-transition: -webkit-clip-path 0.2s;
transition: -webkit-clip-path 0.2s;
transition: clip-path 0.2s;
transition: clip-path 0.2s, -webkit-clip-path 0.2s;
border-radius: 0 0 3px 3px;
}
.btn-submit {
background-color: #0da58e;
}
.btn-checkout {
width: 50px;
height: 50px;
position: absolute;
top: 10px;
right: -60px;
z-index: 999;
background-color: #0da58e;
border-radius: 3px;
-webkit-transition: all .2s;
transition: all .2s;
overflow: hidden;
cursor: pointer;
}
.btn-checkout > .cart-icon {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
text-align: center;
line-height: 50px;
color: white;
}
.btn-checkout span:nth-child(2) {
position: absolute;
left: 0;
line-height: 50px;
color: white;
width: 390px;
text-align: center;
font-weight: 300;
text-transform: uppercase;
}
.btn-checkout > .close-cart-icon {
display: none;
}
.btn-checkout:hover {
width: 390px;
}
.enable-checkout .btn-checkout {
right: 10px;
}
.overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
z-index: 989;
opacity: 0;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
pointer-events: none;
}
.card-wrapper {
opacity: 0;
-webkit-transition: opacity .1s;
transition: opacity .1s;
}
body.open-checkout .overlay {
opacity: .8;
pointer-events: initial;
}
body.open-checkout .btn-checkout {
width: 390px;
border-radius: 3px 3px 0 0;
}
body.open-checkout .checkout-form {
-webkit-clip-path: inset(0 0 0% 0);
clip-path: inset(0 0 0% 0);
}
body.open-checkout .checkout-form .card-wrapper {
opacity: 1;
}
.jp-card-logo.jp-card-amex {
text-transform: uppercase;
font-size: 4px;
font-weight: bold;
color: white;
background-image: -webkit-repeating-radial-gradient(center circle, #FFF 1px, #999 2px);
background-image: repeating-radial-gradient(circle at center, #FFF 1px, #999 2px);
border: 1px solid #EEE;
}
.jp-card-logo.jp-card-amex:before {
height: 28px;
content: "american";
top: 3px;
text-align: left;
padding-left: 2px;
padding-top: 11px;
background: #267AC3;
}
.jp-card-logo.jp-card-amex:after {
content: "express";
bottom: 11px;
text-align: right;
padding-right: 2px;
}
.jp-card.jp-card-amex.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-amex.jp-card-identified .jp-card-back:before {
background-color: #108168;
}
.jp-card-logo.jp-card-discover {
background: #FF6600;
color: #111;
text-transform: uppercase;
font-style: normal;
font-weight: bold;
font-size: 10px;
text-align: center;
overflow: hidden;
z-index: 1;
padding-top: 9px;
letter-spacing: .03em;
border: 1px solid #EEE;
}
.jp-card-logo.jp-card-discover:before {
background: white;
width: 200px;
height: 200px;
border-radius: 200px;
bottom: -5%;
right: -80%;
z-index: -1;
}
.jp-card-logo.jp-card-discover:after {
width: 8px;
height: 8px;
border-radius: 4px;
top: 10px;
left: 27px;
background-color: #FF6600;
background-image: -webkit-radial-gradient(#ff6600, #ffffff);
background-image: radial-gradient(#ff6600, #ffffff);
content: "network";
font-size: 4px;
line-height: 24px;
text-indent: -7px;
}
.jp-card.jp-card-discover.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-discover.jp-card-identified .jp-card-back:before {
background-color: #86B8CF;
}
.jp-card.jp-card-discover.jp-card-identified .jp-card-front:after {
-webkit-transition: 400ms;
transition: 400ms;
content: " ";
display: block;
background-color: #FF6600;
background-image: -webkit-linear-gradient(#FF6600, #ffa366, #FF6600);
background-image: linear-gradient(#FF6600, #ffa366, #FF6600);
height: 50px;
width: 50px;
border-radius: 25px;
position: absolute;
left: 100%;
top: 15%;
margin-left: -25px;
box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
}
.jp-card-logo.jp-card-visa {
background: white;
color: #1A1876;
}
.jp-card-logo.jp-card-visa:before {
background: #1A1876;
}
.jp-card-logo.jp-card-visa:after {
background: #E79800;
}
.jp-card.jp-card-visa.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-visa.jp-card-identified .jp-card-back:before {
background-color: #191278;
}
.jp-card-logo.jp-card-mastercard {
color: white;
font-weight: bold;
text-shadow: none !important;
}
.jp-card-logo.jp-card-mastercard:before,
.jp-card-logo.jp-card-mastercard:after {
border-radius: 18px;
}
.jp-card-logo.jp-card-mastercard:before {
background: #FF0000;
}
.jp-card-logo.jp-card-mastercard:after {
background: #FFAB00;
}
.jp-card.jp-card-mastercard.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-mastercard.jp-card-identified .jp-card-back:before {
background-color: #0061A8;
}
.jp-card-logo.jp-card-maestro {
color: white;
text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
}
.jp-card-logo.jp-card-maestro:before {
background: #0064CB;
}
.jp-card-logo.jp-card-maestro:after {
background: #CC0000;
}
.jp-card.jp-card-maestro.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-maestro.jp-card-identified .jp-card-back:before {
background-color: #0B2C5F;
}
.jp-card-logo.jp-card-dankort {
border-radius: 8px;
border: #000000 1px solid;
background-color: #FFFFFF;
}
.jp-card-logo.jp-card-dankort .dk:before {
background-color: #ED1C24;
border-radius: 6px;
}
.jp-card-logo.jp-card-dankort .dk:after {
border-style: solid;
border-width: 7px 7px 10px 0;
border-color: transparent #ED1C24 transparent transparent;
}
.jp-card-logo.jp-card-dankort .d,
.jp-card-logo.jp-card-dankort .k {
background: white;
}
.jp-card-logo.jp-card-dankort .d:before {
background: #ED1C24;
border-radius: 2px 4px 6px 0px;
}
.jp-card-logo.jp-card-dankort .k:before {
border-width: 8px 5px 0 0;
border-color: #ED1C24 transparent transparent transparent;
}
.jp-card-logo.jp-card-dankort .k:after {
border-width: 0 5px 8px 0;
border-color: transparent transparent #ED1C24 transparent;
}
.jp-card.jp-card-dankort.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-dankort.jp-card-identified .jp-card-back:before {
background-color: #0055C7;
}
.jp-card-logo.jp-card-elo .o {
position: relative;
display: inline-block;
width: 12px;
height: 12px;
right: 0;
top: 7px;
border-radius: 100%;
background-image: -webkit-linear-gradient(yellow 50%, red 50%);
background-image: linear-gradient(yellow 50%, red 50%);
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
text-indent: -9999px;
}
.jp-card-logo.jp-card-elo .o:before {
content: "";
position: absolute;
width: 49%;
height: 49%;
background: black;
border-radius: 100%;
text-indent: -99999px;
top: 25%;
left: 25%;
}
.jp-card.jp-card-elo.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-elo.jp-card-identified .jp-card-back:before {
background-color: #6F6969;
}
.jp-card .jp-card-front,
.jp-card .jp-card-back {
border-radius: 10px;
background: rgba(0, 0, 0, 0.3) !important;
border: 2px solid white !important;
}
.jp-card .jp-card-front:before,
.jp-card .jp-card-back:before {
border-radius: 10px;
}
.jp-card .jp-card-front .jp-card-display,
.jp-card .jp-card-back .jp-card-display {
color: white;
font-weight: normal;
opacity: 1;
}
.jp-card .jp-card-front .jp-card-shiny,
.jp-card .jp-card-back .jp-card-shiny {
background: rgba(255, 255, 255, 0.5) !important;
}
.jp-card .jp-card-front .jp-card-shiny:before,
.jp-card .jp-card-back .jp-card-shiny:before {
background: rgba(255, 255, 255, 0.5) !important;
}
.jp-card .jp-card-back .jp-card-bar {
background-color: #444;
background-image: -webkit-linear-gradient(#444, #333);
background-image: linear-gradient(#444, #333);
}
.jp-card .jp-card-back:after {
background-color: #FFF;
background-image: -webkit-linear-gradient(#FFF, #FFF);
background-image: linear-gradient(#FFF, #FFF);
}
.jp-card .jp-card-back .jp-card-shiny:after {
content: "This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free.AIt comes with no warranty.A For support issues, please visit: github.com/jessepollak/card.";
position: absolute;
left: 120%;
top: 5%;
color: white;
font-size: 7px;
width: 230px;
opacity: .5;
}
.jp-card.jp-card-identified {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.jp-card.jp-card-identified .jp-card-front,
.jp-card.jp-card-identified .jp-card-back {
background-color: rgba(0, 0, 0, 0.5);
}
.jp-card.jp-card-identified .jp-card-front .jp-card-logo,
.jp-card.jp-card-identified .jp-card-back .jp-card-logo {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.jp-card.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-identified .jp-card-back:before {
background-image: none !important;
}
</style></head><body>
<div class="btn-checkout">
<span class="fa fa-shopping-cart cart-icon"></span>
<span>continue to checkout</span>
</div>
<div class="checkout-form">
<div class="card-wrapper">
</div>
<div class="s10"></div>
<div class="form-container active">
<div class="row">
<div class="col-xs-12">
<input placeholder="Full name" type="text" name="name" class="form-control">
</div>
</div>
<div class="s10"></div>
<div class="row">
<div class="col-xs-12">
<input placeholder="Card number" type="text" name="number" class="form-control">
</div>
</div>
<div class="s10"></div>
<div class="row">
<div class="col-xs-6">
<input placeholder="MM/YY" type="text" name="expiry" class="form-control">
</div>
<div class="col-xs-6">
<input placeholder="CVC" type="text" name="cvc" class="form-control">
</div>
</div>
<div class="s10"></div>
<div class="row">
<div class="col-xs-12">
<input type="button" value="Continue" class="btn btn-submit postfix">
</div>
</div>
</div>
</div>
<div class="overlay"></div>
<div class="demo-container">
<div class="demo-container-inner">
<div class="container">
<h1>Awesome shop</h1>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Cool product</h4>
<p class="card-text">Some quick example text to build on the card title.</p>
</div>
<div class="card-block">
<div class="pull-xs-right flipable">
<div class="flipable-group">
<button class="btn btn-primary add-to-cart"><span class="fa fa-cart-plus"></span></button>
<button class="btn btn-primary remove-from-cart"><span class="fa fa-check"></span></button>
</div>
</div>
<p class="card-text cart-price">59$</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Cool product</h4>
<p class="card-text">Some quick example text to build on the card title.</p>
</div>
<div class="card-block">
<div class="pull-xs-right flipable">
<div class="flipable-group">
<button class="btn btn-primary add-to-cart"><span class="fa fa-cart-plus"></span></button>
<button class="btn btn-primary remove-from-cart"><span class="fa fa-check"></span></button>
</div>
</div>
<p class="card-text cart-price">59$</p>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm-down">
<div class="card">
<div class="card-block">
<h4 class="card-title">Cool product</h4>
<p class="card-text">Some quick example text to build on the card title.</p>
</div>
<div class="card-block">
<div class="pull-xs-right flipable">
<div class="flipable-group">
<button class="btn btn-primary add-to-cart"><span class="fa fa-cart-plus"></span></button>
<button class="btn btn-primary remove-from-cart"><span class="fa fa-check"></span></button>
</div>
</div>
<p class="card-text cart-price">59$</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js'></script><script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/175382/jquery.card.js'></script><script src='https://codepen.io/jesperkc/pen/f177ba515fb47030457bd96ffb2f93b3.js?v=3'></script>
<script >$(document).ready(function() {
$('.add-to-cart, .remove-from-cart').on('click', function() {
$(this).parents('.flipable').toggleClass('flipped product-added');
if ($('.product-added').length > 0){
$('body').addClass('enable-checkout');
}else{
$('body').removeClass('enable-checkout');
}
});
$('.btn-checkout').on('click', function() {
$('body').toggleClass('open-checkout');
});
var card = new Card({
// a selector or DOM element for the form where users will
// be entering their information
form: '.form-container.active', // *required*
// a selector or DOM element for the container
// where you want the card to appear
container: '.card-wrapper', // *required*
//width: 200, // optional — default 350px
formatting: true, // optional - default true
// Strings for translation - optional
messages: {
validDate: 'valid\ndate', // optional - default 'valid\nthru'
monthYear: 'mm/yyyy', // optional - default 'month/year'
},
// Default placeholders for rendered fields - optional
placeholders: {
number: '•••• •••• •••• ••••',
name: 'Full Name',
expiry: '••/••',
cvc: '•••'
},
// if true, will log helpful messages for setting up Card
debug: true // optional - default false
});
})
function demo(){
setTimeout(function(){
$('.add-to-cart:eq(0)').click();
setTimeout(function(){
$('.add-to-cart:eq(1)').click();
setTimeout(function(){
$('.btn-checkout').click()
}, 500);
}, 500);
}, 1500);
}
//# sourceURL=pen.js
</script>
</body></html>
