Credit/Debit Card using HTML and CSS

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Credit/Debit Card using HTML and CSS</title>

</head>

<body>

<div class="cardExpiryDateCvvMainDiv">
            <div class="cardExpiryDateDiv">
                <p>Expiry Date</p>
                <p class="showingExpiryDate">MM/YYYY</p>
            </div>
            <div class="cardCvvDiv">
                <p>CVV</p>
                <input type="password" class="ShowingCvv" readonly placeholder="***">
            </div>
        </div>
        <p class="cardPlaceHolderName">CARD PLACE HOLDER NAME</p>
    </div>
</body>

</html>

CSS Copied

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

.payment-card {
            background: linear-gradient(to right, #4092b5 60%, #3580aa 90%);
            border: 1px solid #399bd3;
            border-radius: 10px;
            max-width: 371px;
            padding: 18px 24px;
        }

.payment-right-card-main-div {
            margin-left: 58px;
            width: 100%;
        }

.paymentCardTopChipArea {
            display: flex;
            justify-content: space-between;
        }

.paymentCardTopChipArea img {
            width: 41.17px;
            height: 32.5px;
        }

.paymentCardTopChipArea p {
            color: #fff;
            font-style: italic;
            font-weight: 800;
            font-size: 26px;
            margin: 0;
        }

.payment-card-number {
            font-weight: 500;
            font-size: 24px;
            color: #FFF;
            letter-spacing: 0.012em;
            margin: 0;
            margin-top: 26px;
            margin-bottom: 14px;
        }

.cardExpiryDateCvvMainDiv {
            display: flex;
            justify-content: space-between;
        }

.cardExpiryDateDiv p:first-child {
            font-weight: 500;
            font-size: 12px;
            color: #D7D7D7;
            font-family: Roboto, sans-serif !important;
        }

.cardExpiryDateDiv p:last-child {
            font-weight: 500;
            font-size: 16px;
            text-transform: uppercase;
            font-family: Roboto, sans-serif !important;
            color: #FFF;
        }

.cardCvvDiv p:first-child {
            font-weight: 500;
            font-size: 12px;
            color: #D7D7D7;
            font-family: Roboto, sans-serif !important;
            letter-spacing: 0.085em;
        }

.cardCvvDiv p:last-child {
            font-weight: 500;
            font-size: 16px;
            text-transform: uppercase;
            font-family: Roboto, sans-serif !important;
            color: #FFF;
            text-align: right;
        }

.cardPlaceHolderName {
            text-transform: uppercase;
            font-weight: 500;
            font-size: 14px;
            letter-spacing: -0.015em;
            color: #F0DDDD;
            margin: 0;
            margin-top: 10px;
            font-family: Roboto, sans-serif !important;
        }

input[type=number] {
            -moz-appearance: textfield;
        }

input.ShowingCvv {
            font-weight: 500;
            font-size: 16px;
            color: #FFF;
            background: none;
            box-shadow: none;
            padding: 0 !important;
            border: none;
            width: 21px;
            float: right;
        }

input.ShowingCvv:focus {
            outline: none;
        }

input.ShowingCvv::placeholder {
            color: #fff;
        }

@media (max-width:452px) {

.payment-card {
                max-width: 100%;
            }

.payment-card-number {
                font-size: 20px;
            }
        }

Credit/Debit Card using HTML and CSS

JS Copied

Output