LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import 'https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese';

body {
   font-family: "Roboto";
   background-color: rgba(38, 50, 56, 1);
   padding: 5vh 5vw;
   font-size: 24px;
}
.theForm {
   position: absolute;
   margin: auto;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   min-width: 400px;
   width: 30em;
   max-height: 70vh;
   padding: 2em;
   background-color: #fff;
   border-radius: 0.1em;
   overflow-y: none;
   overflow-x: none;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}
input {
   display: block;
   outline: none;
   -webkit-appearance: none;
   border: 2px solid #e6e6e6;
   background-color: rgba(0, 0, 0, 0);
   line-height: 1em;
   height: 36px;
   font-size: 14px;
   padding: 0 8px;
}

.input-group-addon {
   position: relative;
   border: none;
   height: 36px;
   line-height: 36px;
   background: none;
   left: -92px;
   float: right;
   bottom: 2px;
}

.input-numeral {
   text-align: right;
}

.right {
   text-align: right;
}

p {
   margin: 0;
   padding: 0 0 5px 0;
   font-size: 16px;
   color: #666;
}

section {
   margin-bottom: 10px;
}

.name {
   width: 20em;
}

.cardNumber {
   width: 20em;
   font-family: "Roboto MOno";
}

.expiry {
   width: 5em;
   text-align: left;
}

.cvv {
   width: 4em;
   text-align: left;
}

.inactive {
   color: blue;
   -ms-transition: all 200ms ease;
   -webkit-transition: all 200ms ease;
   transition: all 200ms ease;
}

.active {
   -ms-transform: scale(1.2, 1.2);
   -webkit-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);
}

.card-icon {
   background-repeat: no-repeat;
   padding-right: 50px;
   background-position: right 2px center;
   background-size: auto 90%;
}

input:focus {
   background-color: rgba(179, 229, 252, 0.3);
   border: 2px solid rgba(144, 164, 174, 1);
   box-shadow: 0 0 5px rgba(179, 229, 252, 0.3);
}

.paddingLeft {
   padding-left: 4em;
}
JS
new Cleave('.cardNumber', {
   creditCard: true,
   onCreditCardTypeChanged: function(type) {
      document.querySelector('.type').innerHTML = '';
   }
});


new Cleave('.expiry', {
   date: true,
   datePattern: ['m', 'y']
});

Description

Card validation w/logo using cleave.js Starts with.. 34/37 — Amex 41 — Visa 51-55/22-27 — Mastercard
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv