<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

<!--Begin Checkout-->

<div class="container">
  <p class="help" style="color:#ffffff;">
    Please review your bill and pay </p>
  <div class="box card-panel z-depth-3">
    <div class="merchant">
      <img id="crickets" src="http://ishtyaqhabib.com/assets/images/forcodepen/cricketsCafe.png" />
      <h5 class="center-align">Crickets Café</h5>
      <p>Feb 10, 2016 9:36 PM</p>
    <div class="invoice">
      <table class="highlight">
            <th class="right-align">PRICE</th>
            <td>Large Mocha Latte</td>
            <td class="right-align">$4.25</td>
            <td>Banana Nut Muffin</td>
            <td class="right-align">$2.00</td>
            <td class="right-align">Tax</td>
            <td class="right-align">$0.50</td>
            <td class="right-align bold">Total</td>
            <td class="right-align bold">$6.75</td>
    <div class="payment">
      <h5>Payment Information</h5>
      <div class="credit-card-box card-panel z-depth-2 animation-element slide-left">
        <div class="flip">
          <div class="front">
            <div class="logo">
              <img src="http://cdn.flaticon.com/svg/39/39134.svg" alt="" />
            <div class="number input-field">
              <label for="card-number">Card Number</label>
              <input type="text" id="card-number" class="input-card-number" maxlength="4" />
              <input type="text" id="card-number-1" class="input-card-number" maxlength="4" />
              <input type="text" id="card-number-2" class="input-card-number" maxlength="4" />
              <input type="text" id="card-number-3" class="input-card-number" maxlength="4" />
            <div class="cvv input-field">
              <label for="card-cvv">CVV</label>
              <input type="text" id="card-cvv" class="input-card-cvv" maxlength="3" />
            <div class="card-holder input-field">
              <label for="name">Card Holder</label>
              <input type="text" name="name" id="name">

            <div class="card-expiration-date input-field">
              <select id="month">



    <div class="button checkout row">
      <button class="col s12 btn-large green btn waves-effect waves-dark register"><span>Checkout</span> <i class="fa fa-check"></i></button>


  $(document).ready(function() {
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;

body {

.container {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  position: absolute;
  /*     top: 50%; */
  left: 50%;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transition: 1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
  -moz-transition: 1s all ease-in-out;

.box {
  display: flex;
  flex-direction: column;

.card-panel {
  padding-bottom: 0px;

#crickets {
  width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;

table td:nth-child(1) {
  width: 34px;

table td:nth-child(3) {
  width: 65px;

.bold {
  font-weight: bold;
  font-size: 20px;

.credit-card-box {
  width: 400px;
  height: 280px;
  background: linear-gradient(135deg, #03A9F4, #1976D2);
  border-radius: 15px;
  color: #fff !important;
  text-shadow: 0 1px 1px hsla(0, 0, 0, 0.3);

.input-field.card-expiration-date {
  display: inline-block;

.input-field.cvv {
  top: -6px;
  margin-left: 6px !important;

.input-field label {
  color: #fff;
  left: 0rem;

.select-wrapper+label {
  top: -1.8rem;

.select-wrapper span.caret {
  top: 2px;
  color: #fff;

.select-wrapper input.select-dropdown {
  border-bottom: 1px solid #fff;

.input-card-number {
  font-size: 30px !important;
  width: 70px !important;
  display: inline-block;
  margin-right: 5px !important;

.input-card-cvv {
  width: 30px !important;
  display: inline-block;

.card-holder {
  width: 150px !important;
  margin-right: 10px;

.card-expiration-date {
  display: inline !important;

.card-expiration-date .select-wrapper,
.card-expiration-date input {
  display: inline !important;
  width: 50px !important;

.card-expiration-date .select-wrapper {
  margin-right: 5px;

.card-expiration-date ul,
.card-expiration-date li span {
  width: 50px !important;

.logo img {
  position: relative;
  top: 0px;
  left: 290px;
  width: 60px;
  filter: invert(1);
  -moz-filter: invert(1);
  -webkit-filter: invert(1);

.checkout {
  margin: 0px;

.btn-large {
  margin: 10px 0%;
  /*   width: 100%; */

.help {
  text-align: center;

.animation-element {
  opacity: 0;
  position: relative;
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(100px, -10px, 100px);
  -webkit-transform: translate3d(100px, -10px, 100px);
  -o-transform: translate(100px, -10px);
  -ms-transform: translate(100px, -10px);
  transform: translate3d(100px, -10px, 100px);

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);

.credit-card-box.animation-element:hover {
    -moz-transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
  -moz-transform: translate3d(0px, -2px, 0px);
  -webkit-transform: translate3d(0px, -2px, 0px);
  -o-transform: translate(0px, -2px);
  -ms-transform: translate(0px, -2px);
  transform: translate3d(0px, -2px, 0px);
  box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);
//Does fluid credit card number input
$('.input-card-number').on('keyup change', function() {
  t = $(this);
  //focuses next input when the fourth number is put in
  if (t.val().length > 3) {

var $animation_elements = $('.animation-element');
var $window = $(window);

//On scroll into view animatior
//Used to drop credit card on receipt
function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
    } else {

$window.on('scroll resize', check_if_in_view);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css
  2. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

This Pen doesn't use any external JavaScript resources.