<!-- START TWITTER -->
<a href="https://twitter.com/a1ex_lm" class="twitter-follow-button" data-show-count="false">Follow @a1ex_lm</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- END TWITTER -->
<div class="wrapper">
        <div class="cards">
            <div class="face">
                <div class="head">
                    <div class="title">
                        Credit card
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="card__logo" width="70" height="20" viewBox="0 0 175.7 53.9">
                        <style>
                            .visa {
                                fill: #fff;
                            }
                        </style>
                        <path class="visa" d="M61.9 53.1l8.9-52.2h14.2l-8.9 52.2zm65.8-50.9c-2.8-1.1-7.2-2.2-12.7-2.2-14.1 0-24 7.1-24 17.2-.1 7.5 7.1 11.7 12.5 14.2 5.5 2.6 7.4 4.2 7.4 6.5 0 3.5-4.4 5.1-8.5 5.1-5.7 0-8.7-.8-13.4-2.7l-2-.9-2 11.7c3.3 1.5 9.5 2.7 15.9 2.8 15 0 24.7-7 24.8-17.8.1-5.9-3.7-10.5-11.9-14.2-5-2.4-8-4-8-6.5 0-2.2 2.6-4.5 8.1-4.5 4.7-.1 8 .9 10.6 2l1.3.6 1.9-11.3M164.2 1h-11c-3.4 0-6 .9-7.5 4.3l-21.1 47.8h14.9s2.4-6.4 3-7.8h18.2c.4 1.8 1.7 7.8 1.7 7.8h13.2l-11.4-52.1m-17.5 33.6c1.2-3 5.7-14.6 5.7-14.6-.1.1 1.2-3 1.9-5l1 4.5s2.7 12.5 3.3 15.1h-11.9zm-96.7-33.7l-14 35.6-1.5-7.2c-2.5-8.3-10.6-17.4-19.6-21.9l12.7 45.7h15.1l22.4-52.2h-15.1"
                        />
                        <path fill="#F7A600" d="M23.1.9h-22.9l-.2 1.1c17.9 4.3 29.7 14.8 34.6 27.3l-5-24c-.9-3.3-3.4-4.3-6.5-4.4"
                        />
                    </svg>
                </div>
                <div class="main">
                    <div class="number-title">Card number:</div>
                    <div class="number">XXXX-XXXX-XXXX-XXXX</div>
                </div>
                <div class="dates">
                    <div class="start">
                        02/17
                    </div>
                    <div class="end">
                        01/21
                    </div>
                </div>
            </div>
            <div class="back">
                <div class="magnetic-line">
                </div>
                <div class="cvv">
                    CVV: 123
                </div>
            </div>
        </div>
    </div>

$animation-speed: 1s;
$background-color: #fff;
$card-color: darken($background-color, 45); //#616161;
$card-height: 200px;
$card-width: $card-height * 1.7;
body {
    color: #fff;
    margin: 0;
    background: $background-color;
    font: 400 .875em 'Helvetica Neue', 'Roboto Sans', Helvetica, Arial, Sans-serif;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.wrapper {
    // background: red;
    height: 200px;
    width: 400px;
    perspective: 300px;
}

.card {
    background: linear-gradient($card-color, darken($card-color, 10));
    box-shadow: 0px 0px 30px 0px rgba(#000, 0.3);
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: $card-height;
    width: $card-width;
}

.cards {
    .face {
        @extend .card;
        .head {
            display: flex;
            justify-content: space-between;
            margin: 16px 16px 0 16px;
            .title {
                font-weight: 600;
                font-size: 20px;
            }
        }
        .main {
            margin: 16px 16px 0 16px;
            .number-title {
                color: darken(#fff, 20);
            }
            .number {
                font-size: 24px;
            }
        }
        .dates {
            display: flex;
            max-width: 100px;
            justify-content: space-between;
            margin: 16px 16px 16px 16px;
            .start {}
            .end {}
        }
    }
    .back {
        animation: demo ($animation-speed + 2) ease-in-out;
        transform: translateX(0) translateY(0);
        transition: transform $animation-speed;
        background: linear-gradient(darken($card-color, 4), darken($card-color, 14));
        @extend .card;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        .magnetic-line {
            background: #000;
            margin-top: 16px;
            height: 32px;
            width: 100%;
        }
        .cvv {
            display: flex;
            justify-content: center;
            flex-direction: column;
            background: rgba(#fff, 0.2);
            border-radius: 4px;
            margin: 0 16px ($card-height / 3) 0;
            text-align: end;
            padding-right: 8px;
            width: $card-width / 1.5 + 9;
            height: 24px;
        }
    }
}

.cards:hover {
    .back {
        transform: translateX($card-width / 2) translateY(-50px);
        transition: transform $animation-speed;
    }
}

@keyframes demo {
    0% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX($card-width / 2) translateY(-50px);
    }
    75% {
        transform: translateX($card-width / 2) translateY(-50px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

.twitter-follow-button {
    position: absolute !important;
    top: 8px;
    left: 8px;
}

// Pen by Alex
//
// ┐('～`;)┌
//