<div class="checkout_form">
    <div class="card_number" id="card-container">
        <input type="text" class="input" id="card" placeholder="0000 0000 0000 0000"> 
        <div id="logo"></div>
    </div>
    <div class="card_grp">   
      <div class="expiry_date">
        <input type="text" class="expiry_input" data-mask="00"  placeholder="00">
        <input type="text" class="expiry_input" data-mask="00" placeholder="00">
      </div>
      <div class="cvc">
        <input type="text" class="cvc_input" data-mask="000" placeholder="000">
        <div class="cvc_img">
            ?
           <div class="img">
             <img src="https://i.imgur.com/2ameC0C.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      pay
    </div>
</div>


<script>
var cardValidator=function(e){function r(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,r),n.l=!0,n.exports}var t={};return r.m=e,r.c=t,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:a})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r.p="/assets",r(r.s=4)}([function(e,r,t){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}function n(e){var r=e.split("").reverse(),t=[],a=[];r.forEach(function(e,r){(r+1)%2!=0?t.push(e):a.push(e)});var n=t.reduce(function(e,r){return parseInt(e)+parseInt(r)}),i=a.map(function(e){var r=2*e;if(r>9){var t=r.toString().split("");return parseInt(t[0])+parseInt(t[1])}return r}).reduce(function(e,r){return parseInt(e)+parseInt(r)}),d=(n+i).toString();if("0"===d.charAt(d.length-1))return!0}Object.defineProperty(r,"__esModule",{value:!0}),r.setMaxlength=r.validateCard=r.predictCard=r.defaults=r.init=void 0;var i=t(1),d=a(i),s=t(2),u=a(s),o=t(3),c={querySelectors:{logo:"#card-logo",label:"#card-label",cardNumber:"#card_number"},errorMessage:"Tarjeta invalida"},m=function(){var e=document.querySelector(c.querySelectors.logo),r=document.querySelector(c.querySelectors.cardNumber);r&&e&&r.addEventListener("input",function(t){this.getAttribute("mask-pattern")&&(this.value=(0,o.mask)(this.value,this.getAttribute("mask-pattern")));var a=l(this);a?g(e,a):g(e,"unknown"),p(r)?x(r,!0):x(r,!1)})},l=function(e){var r="",t=(0,o.trimAllSpaces)(e.value);if(!t)return!1;for(var a in d.default)if(d.default.hasOwnProperty(a)&&d.default[a].predict.test(t)){e.setAttribute("mask-pattern",d.default[a].maskPattern);var n=d.default[a].maskPattern.length;f(e,n),r=a;break}return r},g=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"unknown";e.classList="","unknown"===r?e.classList.add("unkown"):e.classList.add(r)},p=function(e){var r=(0,o.trimAllSpaces)(e.value);if(!u.default.CardNumber.test(r))return!1;for(var t in d.default)if(d.default[t].regex.test(r))return!!n(r)&&t},f=function(e,r){e.setAttribute("maxlength",r)},x=function(e,r){e&&(r?(e.classList.remove("error"),e.classList.add("validcard")):(e.classList.add("error"),e.classList.remove("validcard")))};r.init=m,r.defaults=c,r.predictCard=l,r.validateCard=p,r.setMaxlength=f},function(e,r,t){"use strict";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}Object.defineProperty(r,"__esModule",{value:!0});var n,i=(n={visa:{id:1,name:"Visa",regex:/^4(?:[0-9]{11}|[0-9]{14})[0-9]$/,predict:/^4[0-9]*$/,maxLength:16,maskPattern:"9999 - 9999 - 9999 - 9999"},visadebito:{id:31,name:"Visa Debito",regex:/^4(?:[0-9]{11}|[0-9]{14})[0-9]$/,predict:/^4[0-9]*$/,maxLength:16,maskPattern:"9999 - 9999 - 9999 - 9999"},mastercard:{id:15,name:"Mastercard",regex:/^5[1-5][0-9]{14}$/,predict:/^5[1-5][0-9]*$/,maxLength:16,maskPattern:"9999 - 9999 - 9999 - 9999"},masterdebit:{id:66,name:"Master Debit",regex:/^5[1-5][0-9]{14}$/,predict:/^5[1-5][0-9]*$/,maxLength:16,maskPattern:"9999 - 9999 - 9999 - 9999"},amex:{id:6,name:"American Express",regex:/^3[47][0-9]{13}$/,predict:/^3[47][0-9]*$/,maxLength:15,maskPattern:"9999 999999 99999"},amexmt:{id:65,name:"American Express",regex:/^3[47][0-9]{13}$/,predict:/^3[47][0-9]*$/,maxLength:15,maskPattern:"9999 999999 99999"},diners:{id:8,name:"Diners Club",regex:/^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,predict:/^3(?:0[0-5]|[68][0-9])[0-9]*/,maxLength:14,maskPattern:"9999 - 9999 - 9999 - 9999"},discover:{id:82,name:"Discover",regex:/^6(?:011|5[0-9]{2})[0-9]{12}$/,predict:/^6(?:011|5[0-9]{2})[0-9]*/,maxLength:16,maskPattern:"9999 - 9999 - 9999 - 9999"},shopping:{id:23,name:"Tarjeta Shopping",regex:/^279[0-9]{3,}$/,predict:/^279[0-9]{3}[0-9]*/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}},a(n,"shopping",{id:23,name:"Tarjeta Shopping",regex:/^606488[0-9]{0,}$/,predict:/^606488[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"naranja",{id:24,name:"Tarjeta Naranja",regex:/^589562[0-9]{0,}$/,predict:/^589562[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"qida",{id:52,name:"Tarjeta Qida",regex:/^504570[0-9]{0,}$/,predict:/^504570[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"clubdia",{id:56,name:"Club Dia",regex:/^636897[0-9]{0,}$/,predict:/^636897[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"musicred",{id:57,name:"Musicred",regex:/^636435[0-9]{0,}$/,predict:/^636435[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"nevada",{id:39,name:"Tarjeta Nevada",regex:/^504363[0-9]{0,}$/,predict:/^504363[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"tuya",{id:59,name:"Tarjeta Tuya",regex:/^588800[0-9]{0,}$/,predict:/^588800[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"laanonima",{id:61,name:"La Anonima",regex:/^421024[0-9]{0,}$/,predict:/^421024[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"crediguia",{id:62,name:"Credi Guia",regex:/^603288[0-9]{0,}$/,predict:/^603288[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"patagonia",{id:55,name:"Patagonia 365",regex:/^504656[0-9]{0,}$/,predict:/^504656[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"sol",{id:64,name:"Tarjeta Sol",regex:/^504639[0-9]{0,}$/,predict:/^504639[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"cabal",{id:27,name:"Cabal",regex:/^589657[0-9]{0,}$/,predict:/^589657[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"cencosud",{id:43,name:"Cencosud",regex:/^603493[0-9]{0,}$/,predict:/^603493[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"credimas",{id:38,name:"Credimas",regex:/^504520[0-9]{0,}$/,predict:/^504520[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"carrefour",{id:44,name:"Tarjeta Carrefour",regex:/^(507858|585274)[0-9]{0,}$/,predict:/^(507858|585274)[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"grupar",{id:54,name:"Tarjeta grupar",regex:/^(605915)[0-9]{0,}$/,predict:/^(605915)[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),a(n,"wishgift",{id:102,name:"Tarjeta wishgift",regex:/^(637046)[0-9]{0,}$/,predict:/^(637046)[0-9]{0,}/,maxLength:15,maskPattern:"9999 - 9999 - 9999 - 9999"}),n);r.default=i},function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0});var a={CardHolderName:/^[\u00f1a-z\xD1A-Z ]+$/,CardHolderMail:/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,CardNumber:/^([0-9]{8,19})$/,CardExpirationDate:/^(0[1-9]|1[012])\d{2}$/,CardSecurityCode:/^([0-9]{3,4})$/,CardHolderIdentification:/^([0-9]{1,})$/,CardHolderIdentificationType:/^[1-9]$/,CardHolderAddressNumber:/^([0-9]{1,})$/,CardHolderDateOfBirth:/^(0[1-9]|[1-2][0-9]|31(?!(?:0[2469]|11))|30(?!02))(0[1-9]|1[0-2])([12]\d{3})$/,CardExpirationMonth:/^(0?[1-9]|1[012])$/,CardExpirationYear:/^([0-9]{2,4})$/,CardHolderBirthDay:/^(0?[1-9]|[12]\d|3[01])$/,CardHolderBirthMonth:/^(0?[1-9]|1[012])$/,CardHolderBirthYear:/^\d{4}$/,CardHolderAddressStreet:/.+/};r.default=a},function(e,r,t){"use strict";function a(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}Object.defineProperty(r,"__esModule",{value:!0});var n=function(e){return e.replace(/\s/g,"").trim()},i=function(e,r){var t=[].concat(a(r)),n=[].concat(a(e.replace(/\s/g,""))),i=[];return t.forEach(function(e,r){0!==n.length&&(" "!==e&&i.push(n.shift())," "===e&&i.push(" "))}),i.join("")};r.trimAllSpaces=n,r.mask=i},function(e,r,t){"use strict";var a=t(0),n=function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r}(a);n.defaults.querySelectors.cardNumber="#card",n.defaults.querySelectors.logo="#logo",n.init()}]);
</script>












<!-- By Coding Market -->
<div class="youtube">
  <a href="https://www.youtube.com/channel/UCtVM2RthR4aC6o7dzySmExA" target="_blank">by coding market</a>
</div>

@import url("https://fonts.googleapis.com/css?family=Roboto");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: "Roboto", sans-serif;
}

body {
 background: url("https://i.imgur.com/gbgsGGO.png") no-repeat top center;
  width: 100%;
  height: 100vh;
  background-size: cover;
}

.checkout_form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 380px;
  width: 100%;
  background: rgba(225,225,225,0.35);
  padding: 30px;
  border-radius: 25px;
}

.card_number {
  margin-bottom: 25px;
}

input[type="text"] {
  padding: 10px;
  border-radius: 3px;
  font-size: 16px;
  border: 2px solid #9e9e9e;
  border: 0;
  text-align: center;
}

.card_number .input {
  width: 100%;
  text-align: left;
}


.card_grp {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}


.expiry_date,
.cvc {
  width: 48%;
  display: flex;
}

.expiry_date .expiry_input {
  width: 60px;
  margin-right: 10px;
}

.cvc {
  justify-content: flex-end;
  align-items: center;
}

.cvc .cvc_input {
  width: 80px;
  margin-right: 10px;
}


.cvc_img {
  border: 2px solid #fff;
  width: 25px;
  height: 25px;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.cvc_img .img {
  position: absolute;
  width: 100px;
  height: 80px;
  padding: 10px 10px 5px;
  border-radius: 3px;
  top: -30px;
  right: 33px;
  background: #064887;
  display: none;
}

.cvc_img .img img {
  width: 100%;
  height: 100%;
}

.cvc_img:hover .img {
  display: block;
}

.btn {
  width: 100%;
  background: #064887;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 5px;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #064887;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #064887;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: #064887;
}



@media screen and (max-width: 420px) {
  .card_grp {
    flex-direction: column;
  }
  .expiry_date {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 25px;
  }
  .expiry_date .expiry_input {
    width: 48%;
    margin: 0;
  }
  .cvc {
    width: 100%;
    justify-content: space-between;
  }
  .cvc .cvc_input {
    width: 48%;
  }
  .cvc_img .img {
    right: 26px;
  }
}



/* Credit Card Validator */
#card-container {
  position: relative;
  width: 100%;
}

#logo {
  width: 46px;
  height: 30px;
  position: absolute;
  top: 5px;
  right: 7px;
}

.visa {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 0 no-repeat;
}
.mastercard {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -30px no-repeat;
}
.amex {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -60px no-repeat;
}
.diners {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -90px no-repeat;
}
.discover {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -120px no-repeat;
}
.shopping {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -150px no-repeat;
}
.naranja {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -180px no-repeat;
}
.qida {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -210px no-repeat;
}
.clubdia {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -240px no-repeat;
}
.musicred {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -270px no-repeat;
}
.nevada {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -300px no-repeat;
}
.tuya {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -330px no-repeat;
}
.laanonima {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -360px no-repeat;
}
.crediguia {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -390px no-repeat;
}
.patagonia {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -410px no-repeat;
}
.sol {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -440px no-repeat;
}
.cabal {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -470px no-repeat;
}
.cencosud {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -500px no-repeat;
}
.credimas {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -530px no-repeat;
}
.carrefour {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -560px no-repeat;
}
.grupar {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -590px no-repeat;
}
.wishgift {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -610px no-repeat;
}
.unknown {
  background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")
    0 -640px no-repeat;
}
















/* youtube link */
.youtube{
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 160px;
  text-align: center;
  padding: 15px 10px;
  background: #bb0000;
  border-radius: 5px;
}

.youtube a{
  text-decoration: none;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 1px;
}