CodePen Embed - Payment card Interactive UI

Live

Live

Live

This Pen is owned by Praveen Kumar Gorakala on CodePen.

See more by @onlyveen on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"zzapvN\",\"auto_save\":true},\"hashid\":\"zzapvN\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":16190305,\"user_id\":601858,\"html\":\"<link href=\\\"https://fonts.googleapis.com/css?family=Josefin+Sans\\\" rel=\\\"stylesheet\\\">\\n<script src=\\\"https://code.jquery.com/jquery-3.1.1.min.js\\\" integrity=\\\"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=\\\" crossorigin=\\\"anonymous\\\"></script>\\n<script src=\\\"https://code.jquery.com/ui/1.12.1/jquery-ui.min.js\\\"></script>\\n<link rel=\\\"stylesheet\\\" href=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\\\" integrity=\\\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\\\" crossorigin=\\\"anonymous\\\">\\n<script src=\\\"https://use.fontawesome.com/aa95071b26.js\\\"></script>\\n\\n<script src=\\\"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js\\\"></script>\\n<div id=\\\"body\\\">\\n  <div class=\\\"out-wrap\\\">\\n    <h1 class=\\\"text-center\\\">Enter Card Details</h1>\\n    <div id=\\\"payment\\\" ng-app=\\\"myApp\\\" ng-controller=\\\"myCtrl\\\">\\n      <div class=\\\"details\\\">\\n        <div class=\\\"input-wrap four-num\\\">\\n          <label>Card Number</label>\\n          <input maxlength=\\\"4\\\" ng-model=\\\"f4\\\" type=\\\"text\\\">\\n          <input maxlength=\\\"4\\\" ng-model=\\\"s4\\\" type=\\\"text\\\">\\n          <input maxlength=\\\"4\\\" ng-model=\\\"t4\\\" type=\\\"text\\\">\\n          <input maxlength=\\\"4\\\" ng-model=\\\"l4\\\" type=\\\"text\\\">\\n        </div>\\n        <div class=\\\"input-wrap\\\">\\n          <label>Card Holder's Name </label>\\n          <input ng-model=\\\"hname\\\" type=\\\"text\\\">\\n        </div>\\n        <div class=\\\"halfbox\\\">\\n        <div class=\\\"input-wrap\\\">\\n          <label>Valid Till</label>\\n          <div class=\\\"twin\\\">\\n          <input maxlength=\\\"2\\\" ng-model=\\\"edm\\\" type=\\\"text\\\">\\n          <input maxlength=\\\"2\\\" ng-model=\\\"edy\\\" type=\\\"text\\\">\\n          </div>\\n        </div>\\n        \\n        <div class=\\\"input-wrap\\\">\\n          <label>CVV</label>\\n          <input maxlength=\\\"3\\\" ng-model=\\\"cvv\\\" type=\\\"text\\\">\\n        </div>\\n      </div>\\n      </div>\\n      <div class=\\\"card\\\">\\n        <div>\\n        <div class=\\\"clayout\\\">\\n          <div class=\\\"c-front\\\">\\n          <p class=\\\"chiplogo\\\">\\n            <span class=\\\"chip\\\">\\n              <b></b></span>\\n            <span class=\\\"logo\\\">\\n            <b class=\\\"master\\\"></b>\\n            </span>\\n            </p>\\n          <p class=\\\"cnum\\\">\\n            <span ng-bind=\\\"f4\\\">XXXX</span> - <span ng-bind=\\\"s4\\\">XXXX</span> - <span ng-bind=\\\"t4\\\">XXXX</span> - <span ng-bind=\\\"l4\\\">XXXX</span> \\n            </p>\\n            <P class=\\\"cname\\\"><span>Card Holder</span><label ng-bind=\\\"hname\\\">PRAVEEN KUMAR GORAKALA</label></P>\\n            <P  class=\\\"cvtr\\\"><span>Valid Till</span><label ng-bind=\\\"edm\\\">01</label> / <label ng-bind=\\\"edy\\\">28</label></P>\\n            </div>\\n          <div class=\\\"c-back\\\">\\n            <p class=\\\"topc\\\"><span>136589420</span><span>sddv5</span></p>\\n            <p class=\\\"backit\\\"></p>\\n            <p class=\\\"cvv\\\"><span>CVV</span><b ng-bind=\\\"cvv\\\"></b></p>\\n          <p class=\\\"chiplogo\\\">\\n          <span class=\\\"logo\\\">\\n            <b class=\\\"master\\\"></b>\\n            </span>\\n            </p>\\n          </div>\\n          </div>\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n </div>\",\"css\":\"// Extra small screen / phone\\n$screen-xs-min: 480px;\\n\\n// Small screen / tablet\\n$screen-sm-min: 768px;\\n\\n// Medium screen / desktop\\n$screen-md-min: 992px;\\n\\n// Large screen / wide desktop\\n$screen-lg-min: 1200px;\\n\\n// So media queries don't overlap when required, provide a maximum\\n$screen-xs-max: ($screen-sm-min - 1);\\n$screen-sm-max: ($screen-md-min - 1);\\n$screen-md-max: ($screen-lg-min - 1);\\n\\n@mixin respondTo($media) {\\n  @if $media == \\\"xs\\\" {\\n    @media only screen and (max-width: $screen-xs-max) {\\n      @content;\\n    }\\n  }\\n\\n  @else if $media == \\\"sm\\\" {\\n    @media only screen and (max-width: $screen-sm-max) and (min-width: $screen-sm-min) {\\n      @content;\\n    }\\n  }\\n\\n  @else if $media == \\\"md\\\" {\\n    @media only screen and (max-width: $screen-md-max) and (min-width: $screen-md-min) {\\n      @content;\\n    }\\n  }\\n\\n  @else if $media == \\\"lg\\\" {\\n    @media only screen and (min-width: $screen-lg-min) {\\n      @content;\\n    }\\n  }\\n}\\n@mixin respondToAbove($media) {\\n  @if $media == \\\"xs\\\" {\\n    @media only screen and (min-width: $screen-xs-max) {\\n      @content;\\n    }\\n  }\\n\\n  @else if $media == \\\"sm\\\" {\\n    @media only screen and (min-width: $screen-sm-min) {\\n      @content;\\n    }\\n  }\\n\\n  @else if $media == \\\"md\\\" {\\n    @media only screen and (min-width: $screen-md-min) {\\n      @content;\\n    }\\n  }\\n\\n  @else if $media == \\\"lg\\\" {\\n    @media only screen and (min-width: $screen-lg-min) {\\n      @content;\\n    }\\n  }\\n}\\n@mixin respondToBelow($media) {\\n  @if $media == \\\"xs\\\" {\\n    @media only screen and (max-width: $screen-xs-max) {\\n      @content;\\n    }\\n  }\\n\\n  @else if $media == \\\"sm\\\" {\\n    @media only screen and (max-width: $screen-sm-max) {\\n      @content;\\n    }\\n  }\\n\\n  @else if $media == \\\"md\\\" {\\n    @media only screen and (max-width: $screen-md-max) {\\n      @content;\\n    }\\n  }\\n\\n  @else if $media == \\\"lg\\\" {\\n    @media only screen {\\n      @content;\\n    }\\n  }\\n}\\n@mixin respondToTablet {\\n  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){\\n    @content;\\n  }\\n}\\n@mixin respondToSmall-n-Medium {\\n  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max){\\n    @content;\\n  }\\n}\\n@mixin respondToMobile() {\\n  @include respondTo(xs){\\n    @content\\n      }\\n}\\n@mixin respondToDesktop() {\\n  @include respondToAbove(md){\\n    @content\\n      }\\n}\\n@mixin clearfix {\\n  &:before {\\n    content: \\\"\\\";\\n    display: table;\\n  }\\n\\n  &:after {\\n    content: \\\".\\\";\\n    display: block;\\n    height: 0;\\n    clear: both;\\n    visibility: hidden;\\n  }\\n}\\n@mixin rounded_corners($radius: 5px) {\\n  -moz-border-radius: $radius;\\n  -webkit-border-radius: $radius;\\n  border-radius: $radius;\\n}\\n@mixin input {\\n  padding: 0 20px;\\n  margin: 0.5em 0;\\n  border: 1px solid darken(#e1e1e1, 20%);\\n  height: 40px;\\n  display: block;\\n  width: 80%;\\n  max-width: 80%;\\n  background: rgba(255,255,255,.5);\\n  @include respondTo(xs) {\\n    width: 100%;\\n    max-width: 100%;\\n  }\\n  outline: none;\\n}\\n\\n// Provides a cross-browser method to implement `display: inline-block;`\\n@mixin inline-block($alignment: middle) {\\n  display: -moz-inline-stack;\\n  display: inline-block;\\n  @if $alignment and $alignment != none {\\n    vertical-align: $alignment;\\n  }\\n  *vertical-align: auto;\\n  zoom: 1;\\n  *display: inline;\\n}\\n@mixin background_gradient($min_color, $max_color,$color_stop1:0%, $color_stop2:100%) {\\n  background: $min_color;\\n  background: -moz-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);\\n  background: -o-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);\\n  background: -webkit-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);\\n  background: -ms-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);\\n  background: -webkit-gradient(linear,left top,left bottom,color-stop($color_stop1/100%, $min_color),color-stop($color_stop2/100%, $max_color));\\n  background: linear-gradient(to bottom, $min_color $color_stop1, $max_color $color_stop2);\\n  zoom: 1; // fix for ie7 issue\\n  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$min_color}, endColorStr=#{$max_color});\\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$min_color}, endColorStr=#{$max_color});\\n}\\n@mixin box-shadow($value) {\\n  -webkit-box-shadow: $value;\\n  -moz-box-shadow: $value;\\n  box-shadow: $value;\\n}\\n@mixin font_family($font_type,$font_stretch:'normal') {\\n  @if $font-stretch == \\\"condensed\\\" {\\n    font-family: $font-condensed;\\n  }\\n\\n  @else if $font_type == \\\"primary\\\" {\\n    font-family: $font-primary;\\n  }\\n  @else {\\n    font-family: $font-secondary;\\n  }\\n}\\n@mixin font-size($sizeValue) {\\n  font-size: ($sizeValue * 10) + px;\\n  font-size: $sizeValue + rem;\\n}\\n\\n//-------------\\n@mixin shadow-box {\\n  border: 1px solid darken(#e1e1e1, 5%);\\n  @include rounded_corners(5px);\\n  box-shadow: 4px 4px 5px #e1e1e1;\\n}\\n@mixin transition($value) {\\n  transition: $value;\\n  -moz-transition: $value;\\n  -webkit-transition: $value;\\n}\\n@mixin flex {\\n  display: -webkit-box;\\n  display: -moz-box;\\n  display: -ms-flexbox;\\n  display: -webkit-flex;\\n  display: flex;\\n}\\n@mixin flex-grow($value) {\\n  -webkit-box-flex: $value;\\n  -webkit-flex: $value;\\n  -ms-flex: $value;\\n  flex: $value;\\n}\\n@mixin flex-wrap {\\n  -ms-flex-wrap: wrap;\\n  -webkit-flex-wrap: wrap;\\n  flex-wrap: wrap;\\n}\\n@mixin align-items($value) {\\n  -ms-align-items: $value;\\n  -moz-align-items: $value;\\n  -webkit-align-items: $value;\\n  align-items: $value;\\n}\\n@mixin justify-content($value) {\\n  -ms-justify-content: $value;\\n  -moz-justify-content: $value;\\n  -webkit-justify-content: $value;\\n  justify-content: $value;\\n}\\n@mixin flex-direction($value) {\\n  -ms-flex-direction: $value;\\n  -moz-flex-direction: $value;\\n  -webkit-flex-direction: $value;\\n  flex-direction: $value;\\n}\\n@mixin flex-basis($value) {\\n  -webkit-box-flex: $value;\\n  -webkit-flex: $value;\\n  -ms-flex: $value;\\n  flex: $value;\\n}\\n@mixin fontAwesome($fsize,$ascii,$fcolor) {\\n  font: normal normal normal $fsize/1 FontAwesome;\\n  content: $ascii;\\n  color: $fcolor;\\n}\\n@mixin input-placeholder-font($value1, $value2) {\\n  input::-webkit-input-placeholder {\\n    color: $value1;\\n    @include font-size($value2);\\n  }\\n\\n  input::-moz-placeholder {\\n    color: $value1;\\n    @include font-size($value2);\\n  }\\n\\n  input:-moz-placeholder {\\n    color: $value1;\\n    @include font-size($value2);\\n  }\\n\\n  input:-ms-input-placeholder {\\n    color: $value1;\\n    @include font-size($value2);\\n  }\\n}\\n@mixin radio-button {\\n  position: absolute;\\n  left: 0;\\n  width: 100%;\\n  opacity: 0;\\n  z-index: 1;\\n  height: 25px;\\n  cursor: pointer;\\n\\n  &:checked + label:after {\\n    content: '';\\n    position: absolute;\\n    background: #000;\\n    @include rounded_corners(50%);\\n    width: 9px;\\n    height: 9px;\\n    left: 3px;\\n    top: 3px;\\n    bottom: 4px;\\n    pointer-events: none;\\n  }\\n\\n  & + label {\\n    display: inline-block;\\n    cursor: pointer;\\n    position: relative;\\n    padding-left: 20px;\\n    margin-top: 10px;\\n    line-height: 15px;\\n    height: 15px;\\n\\n    &:before {\\n      font-weight: normal;\\n      content: '';\\n      display: inline-block;\\n      width: 15px;\\n      height: 15px;\\n      margin-right: 10px;\\n      position: absolute;\\n      left: 0;\\n      top: 0;\\n      bottom: 1px;\\n      background-color: #fff;\\n      @include rounded_corners(50%);\\n      border: 1px solid darken(#e1e1e1, 15%);\\n    }\\n  }\\n}\\n@mixin check-button {\\n  position: absolute;\\n  left: 0;\\n  width: 100%;\\n  opacity: 0;\\n  z-index: 1;\\n  height: 25px;\\n  cursor: pointer;\\n\\n  &:checked + label:after {\\n    content: '';\\n    position: absolute;\\n    width: 9px;\\n    height: 4.5px;\\n    left: 3px;\\n    bottom: 7px;\\n    border-color: #000;\\n    border-style: solid;\\n    border-width: 0 0 2px 2px;\\n    transform: rotate(-45deg);\\n    -ms-transform: rotate(-45deg);\\n    -webkit-transform: rotate(-45deg);\\n    pointer-events: none;\\n  }\\n\\n  & + label {\\n    display: inline-block;\\n    cursor: pointer;\\n    position: relative;\\n    padding-left: 20px;\\n    margin-top: 10px;\\n    line-height: 15px;\\n    height: 15px;\\n\\n    &:before {\\n      font-weight: normal;\\n      content: '';\\n      display: inline-block;\\n      width: 15px;\\n      height: 15px;\\n      margin-right: 10px;\\n      position: absolute;\\n      left: 0;\\n      bottom: 1px;\\n      background-color: #fff;\\n      border: 1px solid darken(#e1e1e1, 15%);\\n    }\\n  }\\n}\\n\\n@mixin flat-shadow{\\n  @include box-shadow(0 5px 10px -4px rgba(0,0,0,0.3));\\n}\\n\\n\\n@mixin rotate($angle) {\\n  -ms-transform:rotate($angle);\\n  -webkit-transform:rotate($angle);\\n  transform:rotate($angle);\\n}\\n@mixin scale($value-1,$value-2) {\\n  -ms-transform:scale($value-1,$value-2);\\n  -webkit-transform:scale($value-1,$value-2);\\n  transform:scale($value-1,$value-2);\\n}\\n@mixin skew($value-1,$value-2) {\\n  -ms-transform:skew($value-1,$value-2);\\n  -webkit-transform:skew($value-1,$value-2);\\n  transform:skew($value-1,$value-2);\\n}\\n@mixin translateY($value) {\\n  -ms-transform:translateY($value);\\n  -webkit-transform:translateY($value);\\n  transform:translateY($value);\\n}\\n\\n@mixin transform($value) {\\n  -ms-transform:($value);\\n  -webkit-transform:($value);\\n  transform:($value);\\n}\\n\\n@mixin keyframes($name) {\\n  @-webkit-keyframes #{$name} {\\n    @content;\\n  }\\n  @-moz-keyframes #{$name} {\\n    @content;\\n  }\\n  @-o-keyframes #{$name} {\\n    @content;\\n  }\\n  @keyframes #{$name} {\\n    @content;\\n  }\\n}\\n\\n\\n@mixin animation($values){\\n  -webkit-animation: ($values);\\n  -moz-animation: ($values);\\n  -ms-animation: ($values);\\n  animation: ($values);\\n}\\n@mixin close-icon{\\n  font-size: 0 !important;\\n  position: absolute;\\n  height: 40px;\\n  width: 40px;\\n  right: 20px;\\n  top: 20px;   \\n  font-size: 0px;\\n  cursor: pointer;\\n  z-index: 9;\\n  border: 0;\\n  background: transparent;\\n  &:before,&:after{\\n    content: '';\\n    top: 0;\\n    right: 0;\\n    left: 0;\\n    bottom: 0;\\n    margin: auto;\\n    position: absolute;\\n    height: 2px;\\n    background: #fff;\\n    width: 50%;\\n    transition: all .25s;\\n    opacity: 0;\\n  }\\n  &:before{\\n    transform: rotate(45deg);\\n    opacity: 1;\\n  }\\n  &:after{\\n    transform: rotate(-45deg);\\n    opacity: 1;\\n  }\\n}\\n@mixin radio-button{\\n  display: none;\\n  & + *{\\n    position: relative;\\n    padding-left: 30px;\\n    margin-left: 10px;\\n    &:before{\\n      content: '';\\n      width: 20px;\\n      @include rounded_corners(50%);\\n      height: 20px;\\n      @include box-shadow(inset 0px 1px 5px rgba(0,0,0,0.5));\\n      text-indent: 30px;\\n      left: 0;\\n      top: 0;\\n      position: absolute;\\n      cursor: pointer;\\n    }\\n    &:after {\\n      content: '';\\n      width: 20px;\\n      height: 20px;\\n      cursor: pointer;\\n      position: absolute;\\n      z-index: 1;\\n      background: $dbc;\\n      @include rounded_corners(50%);\\n      @include transition(all .25s);\\n      top: 0;\\n      left: 0;\\n      @include transform(scale(0));\\n    }\\n  }\\n  &:checked + *:after {\\n    @include transform(scale(.4));\\n    @include transition(all .25s cubic-bezier(0.68,0.55,0.265,3));\\n  }\\n}\\n@mixin check-box{\\n  display: none;\\n  & + *{\\n    position: relative;\\n    padding-left: 30px;\\n    margin-left: 10px;\\n    &:before{\\n      content: '';\\n      width: 18px;\\n      height: 18px;\\n      @include box-shadow(inset 0px 1px 5px rgba(0,0,0,0.5));\\n      text-indent: 30px;\\n      left: 0;\\n      top: 0;\\n      position: absolute;\\n      cursor: pointer;\\n    }\\n    &:after {\\n      content: '';\\n      width: 25px;\\n      height: 15px;\\n      cursor: pointer;\\n      position: absolute;\\n      z-index: 1;            \\n      border: solid $solid-color;\\n      border-width: 0 0 7px 7px;\\n      top: 0;\\n      left: -3px;\\n      @include transform(rotate(0deg) scale(0));\\n      @include transition(all .25s);\\n    }\\n  }\\n  &:checked + *:after {\\n    @include transform(rotate(-45deg) scale(0.4));\\n    @include transition(all .25s cubic-bezier(0.68,0.55,0.265,3));\\n  }\\n  &:checked + *:before {\\n    background: $dbc;\\n  }\\n}\\n\\n@mixin calwidth($val1, $val2){\\n  width: calc(#{$val1} + #{$val2})\\n}\\n\\n@mixin transition-hvr($t-duration, $t-type){\\n  position: relative;\\n  transition: all $t-duration $t-type;\\n  &:before,&:after{       \\n    content:'';\\n    position: absolute;\\n    left: 0;\\n    top: 0;\\n    width:0;\\n    height:0;\\n    transition: width $t-duration ($t-duration*3) $t-type, height $t-duration ($t-duration*2) $t-type, border ($t-duration/5) ($t-duration*4) $t-type;\\n    border: solid transparent;\\n    border-width: 3px 3px 0 0;\\n  }\\n  &:after{\\n    left: auto;\\n    top: auto;\\n    bottom: 0;\\n    right: 0;\\n    transition: width  $t-duration $t-duration $t-type, height $t-duration $t-type, border ($t-duration/5) ($t-duration*2) $t-type;\\n    border-width: 0 0 3px 3px;\\n  }\\n  &:hover{\\n    &:before,&:after{\\n      transition: width $t-duration $t-type, height $t-duration $t-duration $t-type, border ($t-duration/5) $t-type;\\n      width: 100%;\\n      height: 100%;         \\n      border-color: $dbc;\\n    }\\n    &:after{\\n      transition: width $t-duration ($t-duration*2) $t-type, height $t-duration ($t-duration*3)  $t-type, border ($t-duration/5) ($t-duration*2) $t-type;       \\n    }\\n  }\\n}\\n\\n$shadow : 0 6px 10px -2px rgba(0, 0, 0, .25);\\n$solid: #b71c1c;\\n\\n$solid_2: #0af;\\n$dbc: #212121;\\n#body {\\n  @include respondToAbove(sm){\\n  padding: 50px;\\n  }\\n      @include respondTo(xs){\\n  padding: 1px;\\n  }\\n  background: $dbc;\\n  min-height: 100vh;\\n  font-family: 'Josefin Sans', sans-serif;\\n  text-transform: captalize;\\n  letter-spacing: 2px;\\n  &, & *{\\n    transition: all .25s;\\n  }\\n  .out-wrap {\\n    position: relative;\\n    \\n      @include respondToAbove(sm){\\n    padding: 0 50px 50px;\\n    }\\n    width: 90%;\\n    margin: auto;\\n    color: #777;\\n    #payment{\\n      display: flex; \\n      align-items: center;\\n      justify-content: center;\\n      @include respondTo(xs){\\n        flex-wrap: wrap;\\n        >div{\\n              margin: 15px auto !important;\\n    width: 100%;\\n          &:first-child{\\n            order: 2;\\n          }\\n        }\\n      }\\n      .details{\\n        flex: 1;\\n        max-width: 400px;\\n        min-width: 300px;\\n        margin-right: 50px;\\n        .input-wrap{\\n          display: flex;\\n          flex-wrap: wrap;\\n          label{\\n            width: 100%;\\n            margin: 25px 0 10px;\\n          }\\n          input{\\n            flex: 1;\\n            border: 0;\\n            background: rgba(#000,.3);\\n            height: 40px;\\n            width: 100%;\\n            text-transform: uppercase;\\n            padding: 0 10px;\\n            &:focus{\\n              outline: none;\\n              box-shadow: inset 0 0 10px rgba(0,0,0,.5);            \\n              background: rgba(#000,.1);\\n            }\\n          }\\n          &.four-num{\\n            input{\\n              margin: 0 10px 0 0;\\n              text-align:center;\\n              &:last-child{\\n                margin: 0;\\n              }\\n            }\\n          }\\n        }\\n        .halfbox{\\n          display: flex;\\n          >div:last-child{\\n            margin-left: 25px;\\n            input{\\n              width: 50px\\n            }\\n          }\\n          >div:first-child{\\n            .twin{\\n\\n              position: relative;\\n              display: flex;\\n              &:before{\\n                position: absolute;\\n                left: 0;\\n                right:0;\\n                text-align: center;\\n                pointer-events: none;\\n                content: '/';\\n                bottom: 5px;\\n                font-size: 20px;\\n              }\\n              &.focusit{\\n                box-shadow:  inset 0 0 10px rgba(0,0,0,.5);\\n                input{\\n                  box-shadow: none;           \\n                  background: rgba(#000,.1);\\n                }\\n              }\\n            }\\n            input{\\n              width: 40px;\\n            }\\n          }\\n        }\\n      }\\n      .card{\\n        >div{\\n          perspective: 1000px;        \\n          max-width: 350px;\\n          height: 200px;\\n          min-width: 320px;\\n          @include respondTo(xs){\\n            margin: auto;\\n          }\\n        }\\n        &.flip{\\n          >div{\\n            >.clayout{\\n              transform: rotateY(180deg);\\n              .c-front{\\n                .logo{\\n                  opacity: 0;\\n                  transition: none;\\n                }\\n              }\\n            }\\n          }\\n        }\\n        .clayout{\\n          position: relative;\\n          transform-style: preserve-3d;\\n          &.blueit{\\n\\n            .c-front,.c-back{              \\n              background: linear-gradient(to right, $solid_2 , darken($solid_2, 5%));\\n            }\\n          }\\n          .c-front,.c-back{            \\n            max-width: 350px;\\n            width: 100%;\\n            height: 200px;\\n            position:absolute;\\n            z-index: 2;\\n            top:0;\\n            right:0;\\n            transform-style: preserve-3D;\\n            transform-origin: center center;\\n            perspective: 50px;\\n            border-radius: 10px;\\n            backface-visibility: hidden;\\n            @include box-shadow($shadow);\\n            background: linear-gradient(to right, $solid , darken($solid, 5%));\\n            color: #fff;\\n            font-size: 12px;\\n            display: flex;\\n            flex-wrap: wrap;\\n            justify-content: space-between;\\n            align-items: center;\\n            padding: 20px;\\n            >p{\\n              margin: 0;\\n            }\\n            .chiplogo{\\n              display: flex;\\n              align-items: center;\\n              justify-content: space-between;\\n              width: 100%;\\n              >span{\\n                height: 35px;\\n                width: 150px;\\n                &.chip{\\n                  b{\\n                    position: relative;\\n                    height: 30px;\\n                    width: 43px;\\n                    display: block;\\n                    border-radius: 5px;\\n                    background: #f3c251;\\n                    &:before{\\n                      background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/190185-200.png) no-repeat center / 100% 140%; content:'';\\n                      opacity:.5;\\n                      position: absolute;\\n                      top: 0;\\n                      left:0;\\n                      right:0;\\n                      bottom:0;\\n                    }\\n                  }\\n                }\\n                &.logo{\\n                  transform: translate3d(0,0,0);\\n                  b{\\n                    width: 75px;\\n                    margin-left: auto;\\n                    display: block;\\n                    height: 100%;\\n                    background-size: auto 130% !important;\\n                    background-position-y: center !important;\\n                    transform: translateZ(0);\\n                    &.master{\\n                      background: url(https://new.corezoid.com/wp-content/uploads/2016/03/visa-mastercard.png) no-repeat;\\n                      background-position-x: 10px;\\n                    }\\n                    &.visa{\\n                      background: url(https://new.corezoid.com/wp-content/uploads/2016/03/visa-mastercard.png) no-repeat;\\n                      background-position-x: -60px;\\n                    }\\n                  }\\n                }\\n                &:last-child{\\n                  text-align: right;\\n                }\\n              }\\n            }\\n            .cnum{\\n              margin: 20px 0;\\n              font-size: 20px;\\n              width: 100%;\\n              justify-content: space-between;\\n              display: flex;\\n              align-items: center;\\n              align-content: center;\\n              font-family: monospace;\\n              span{\\n                letter-spacing: 5px;\\n                font-family: 'Josefin Sans', sans-serif;\\n                flex: 1;\\n                text-align: center;\\n              }\\n            }\\n            .cname,.cvtr{\\n              min-height: 35px;\\n              max-width: 215px;\\n              overflow: hidden;\\n              >span{\\n                display: block;\\n                font-size: 8px;\\n                color: #ccc;\\n              }\\n              label{\\n                text-transform: uppercase;\\n              }\\n            }\\n            .cvtr{\\n              text-align: center;\\n            }\\n          }\\n          .c-back{\\n            padding: 0;\\n            align-items: initial;\\n            z-index: 1;\\n            transform: rotateY(180deg);\\n            .topc{\\n              line-height: 20px;\\n              padding: 0 10px;\\n              display: flex;\\n              align-items: center;\\n              justify-content: space-between;\\n              width: 100%;\\n              font-size: 8px;\\n              color: rgba(255,255,255,.5);\\n            }\\n            .backit{\\n              height: 35px;\\n              background: #333;\\n              width: 100%;\\n            }\\n            .cvv{\\n              margin: 0 30px;\\n              width: 100%;\\n              text-align: right;\\n              b{\\n                border-radius : 5px;\\n                line-height: 25px;\\n                height: 25px;\\n                margin-top: 5px;\\n                padding-right: 5px;\\n                background: #fff;\\n                display:block;\\n                color: #000;\\n              }\\n            }\\n            .chiplogo{\\n              margin: 0 15px 30px 0;\\n              justify-content: flex-end;\\n            }\\n          }\\n        }\\n      }\\n    }\\n  }\\n}\\n\\n.four-num, .cnum{\\n  font-family: 'roboto' !important;\\n}\",\"js\":\"var app = angular.module('myApp', []);\\n        app.controller('myCtrl', function($scope) {\\n            $scope.f4 = \\\"\\\";\\n            $scope.s4 = \\\"\\\";\\n            $scope.t4 = \\\"\\\";\\n            $scope.l4 = \\\"\\\";\\n            $scope.hname = \\\"\\\";\\n            $scope.edm = \\\"\\\";\\n            $scope.edy = \\\"\\\";\\n            $scope.cvv = \\\"\\\";\\n        });\\n\\n$('.twin input').on('focus', function(){\\n  $(this).parent().addClass('focusit');\\n}).blur(function(){\\n  $(this).parent().removeClass('focusit');\\n});\\n\\n\\n$('.four-num input[ng-model=\\\"f4\\\"]').on('keyup change', function(){\\nif($(this).val().slice(0,1) === \\\"4\\\"){\\n  $('.logo b').attr('class','visa');\\n  $('.clayout').addClass('blueit');\\n}else{\\n    $('.logo b').attr('class','master');\\n  $('.clayout').removeClass('blueit');\\n  };\\n});\\n$('.four-num input').on('keyup change', function(){\\n  $in = $(this);\\n    if ($in.val().length > 3) {\\n      $in.next().focus();\\n    };  \\n });\\n$('input[ng-model=\\\"cvv\\\"]').on('focus', function(){\\n  $('#payment .card').addClass('flip');\\n}).on('blur', function(){\\n  $('#payment .card').removeClass('flip');\\n});\\n  $('.twin input').on('keyup change', function(){\\n  $in = $(this);\\n  if($in.next().length){\\n    if ($in.val().length > 1) {\\n      $in.next().focus();\\n    };\\n  }\\n  else{\\n    if ($in.val().length > 1) {\\n      $in.blur();\\n    }\\n  }\\n });\\n  \\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2017-07-05T07:08:50.000Z\",\"updated_at\":\"2020-08-01T14:18:55.000Z\",\"title\":\"Payment card Interactive UI\",\"description\":\"\",\"slug_hash\":\"zzapvN\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"015d1194-7bd0-74e4-ab7b-395aeb5c47f6\",\"is_new_editor_pen\":false,\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-98018b12d50424943c3d.js"}