bootstrap-payment-forms
Version:
Responsive Payment Forms built with the latest Bootstrap 5. Credit card, PayPal, Stripe, eCommerce checkout and many more examples.
114 lines (107 loc) • 4.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/bootstrap-payment-forms.min.css" />
</head>
<body>
<!-- Start your project here-->
<style>
.gradient-custom { background: radial-gradient(50% 123.47% at 50% 50%, #00FF94 0%, #720059
100%), linear-gradient(121.28deg, #669600 0%, #FF0000 100%), linear-gradient(360deg,
#0029FF 0%, #8FFF00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100FF 0%, #00FF57
100%), radial-gradient(100% 148.07% at 0% 0%, #FFF500 0%, #51D500 100%);
background-blend-mode: screen, color-dodge, overlay, difference, normal; }
</style>
<section class="gradient-custom">
<div class="container my-5 py-5">
<div class="row d-flex justify-content-center py-5">
<div class="col-md-7 col-lg-5 col-xl-4">
<div class="card" style="border-radius: 15px;">
<div class="card-body p-4">
<form>
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="form-outline">
<input
type="text"
id="typeText"
class="form-control form-control-lg"
siez="17"
placeholder="1234 5678 9012 3457"
minlength="19"
maxlength="19"
/>
<label class="form-label" for="typeText">Card Number</label>
</div>
<img
src="https://img.icons8.com/color/48/000000/visa.webp"
alt="visa"
width="64px"
/>
</div>
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="form-outline">
<input
type="text"
id="typeName"
class="form-control form-control-lg"
siez="17"
placeholder="Cardholder's Name"
/>
<label class="form-label" for="typeName">Cardholder's Name</label>
</div>
</div>
<div class="d-flex justify-content-between align-items-center pb-2">
<div class="form-outline">
<input
type="text"
id="typeExp"
class="form-control form-control-lg"
placeholder="MM/YYYY"
size="7"
id="exp"
minlength="7"
maxlength="7"
/>
<label class="form-label" for="typeExp">Expiration</label>
</div>
<div class="form-outline">
<input
type="password"
id="typeText2"
class="form-control form-control-lg"
placeholder="●●●"
size="1"
minlength="3"
maxlength="3"
/>
<label class="form-label" for="typeText2">Cvv</label>
</div>
<button type="button" class="btn btn-info btn-lg btn-rounded">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>