<div class="container-fluid">
<div class="row justify-content-center">
<div class="card my-4 p-3">
<div class="row main">
<div class="col-12"><span>Cart</span> <span>Shipping confirmation</span> <span>Credit card checkout</span></div>
</div>
<div class="row justify-content-center mrow">
<div class="col-12"> <img src="https://img.icons8.com/color/48/000000/mastercard-logo.png" width="35px" height="35px" /> <img src="https://img.icons8.com/color/48/000000/visa.png" width="35px" height="35px" /> <img src="https://img.icons8.com/color/48/000000/paypal.png" width="35px" height="35px" /> </div>
</div>
<form class="form-card">
<div class="row">
<div class="col-12">
<div class="form-group"> <input type="text" class="form-control p-0" id="number" required><label class="form-control-placeholder p-0" for="number">CardNumber</label> </div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group"> <input type="text" class="form-control p-0" id="name" required><label class="form-control-placeholder p-0" for="name">Cardholder'sName</label> </div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-12">
<div class="form-group"> <input type="text" class="form-control p-0" id="sdate" required><label class="form-control-placeholder p-0" for="sdate">StartDate</label> </div>
</div>
<div class="col-sm-4 col-12">
<div class="form-group"> <input type="text" class="form-control p-0" id="expdate" required><label class="form-control-placeholder p-0" for="expdate">ExpirationDate</label> </div>
</div>
<div class="col-sm-4 col-12">
<div class="form-group"> <input type="password" class="form-control p-0" id="passw" required><label class="form-control-placeholder p-0" for="passw">CVV</label> </div>
</div>
</div>
<div class="row lrow mt-4 mb-3">
<div class="col-sm-8 col-12">
<h3>Grand Total:</h3>
</div>
<div class="col-sm-4 col-12">
<h5>$1,449.00</h5>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-12"> <button type="button" class="btn btn-primary btn-block">Pay</button> </div>
</div>
</form>
</div>
</div>
</div>
body {
font-family: Arial, Helvetica, sans-serif;
background: #343a40
}
.card {
background: #000;
color: #fff;
width: 410px !important
}
.mrow {
margin-top: 30px;
margin-bottom: 30px
}
img {
margin-right: 10px
}
.main span:hover {
text-decoration: underline;
cursor: pointer
}
.mrow img:hover {
border-bottom: 1px solid #fff;
cursor: pointer
}
.btn-primary {
border: none;
border-radius: 30px
}
h5 {
padding-top: 8px
}
.form-group {
position: relative;
margin-bottom: 2rem
}
.form-control-placeholder {
position: absolute;
top: 6px;
padding: 7px 0 0 10px;
transition: all 200ms;
opacity: 0.5;
color: #dae0e5 !important;
font-size: 75%
}
.form-control:focus+.form-control-placeholder,
.form-control:valid+.form-control-placeholder {
font-size: 75%;
transform: translate3d(0, -100%, 0);
opacity: 1;
top: 10px
}
.form-control {
background: transparent;
border: none;
border-bottom: 1px solid #fff !important;
border-radius: 0;
outline: 0
}
.form-control:focus,
.form-control:after {
outline-width: 0;
border-bottom: 1px solid #fff !important;
background: transparent;
box-shadow: none;
border-radius: 0;
color: #dae0e5;
letter-spacing: 1px
}