Credit, Debit cards css html design

How to make debit/credit card look as similar as possible in CSS html

Credit, Debit cards css html design
cards css html design

Credit card style. in example 2, the map has a background in the form of a picture and is simply filled with color. It's up to you which type to use.

CSS code

/* Google Font 'Poppins'  */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: Digital_Font;
    src: url(font/digital-7/digital-7.ttf);
}

body {
    width: 100%;
    height: 100vh;
    background: #121213;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    position: relative;
    width: 500px;
    height: 280px;
    /* border: 1px solid #fff; */
    margin: 0px 20px;
    border-radius: 20px;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('img/bulid.png') no-repeat center center/cover;
    opacity: .5;
}

.card .debit_card {
    position: absolute;
    top: 20px;
    left: 25px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    font-size: 12px;
}

.card .bank {
    position: absolute;
    top: 20px;
    right: 20px;
    font-style: italic;
    color: #fff;
    letter-spacing: 1px;
}

.card .bank span {
    font-weight: 300;
}

.card .chip {
    position: absolute;
    width: 60px;
    height: 45px;
    background: #e9df4e;
    border-radius: 5px;
    top: 60px;
    left: 25px;
    border: 1px solid #000;
    overflow: hidden;
}

.card .chip h6:nth-child(1) {
    width: 25px;
    height: 15px;
    border: 1px solid #000;
    margin-top: -1px;
    border-top: 0px;
    border-left: 0px;
}

.card .chip h6:nth-child(2) {
    width: 25px;
    height: 10px;
    border: 1px solid #000;
    margin-top: -1px;
    border-top: 0px;
    border-left: 0px;
}

.card .chip h6:nth-child(3) {
    width: 25px;
    height: 10px;
    border: 1px solid #000;
    margin-top: -1px;
    border-top: 0px;
    border-left: 0px;
}

.card .chip h6:nth-child(4) {
    width: 25px;
    height: 18px;
    border: 1px solid #000;
    margin-top: -1px;
    border-top: 0px;
    border-left: 0px;
}

.card .chip h6:nth-child(5) {
    position: absolute;
    width: 20px;
    height: 10px;
    border-bottom: 1px solid #000;
    top: 0;
    left: 25px;
}

.card .chip h6:nth-child(6) {
    position: absolute;
    width: 20px;
    height: 30px;
    border-bottom: 1px solid #000;
    top: 10px;
    left: 25px;
}

.card .chip h6:nth-child(7) {
    position: absolute;
    width: 25px;
    height: 10px;
    border: 1px solid #000;
    top: 15px;
    left: 45px;
}

.card .chip h6:nth-child(8) {
    position: absolute;
    width: 25px;
    height: 10px;
    border: 1px solid #000;
    border-top: 0px;
    top: 25px;
    left: 45px;
}

.card .chip h6:nth-child(9) {
    position: absolute;
    width: 25px;
    height: 15px;
    border: 1px solid #000;
    border-top: 0px;
    top: 35px;
    left: 45px;
}

.card .number {
    position: absolute;
    width: 300px;
    height: 20px;
    /* border: 1px solid #fff; */
    top: 130px;
    left: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card .number h6 {
    color: #fff;
    font-size: 25px;
    font-family: Digital_Font;
    letter-spacing: 3px;
}

.card .wave {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 124px;
    right: 20px;
}

.card .ex_date {
    position: absolute;
    top: 165px;
    left: 25px;
    color: #fff;
    display: flex;
    align-items: center;
}

.card .ex_date span {
    font-size: 9px;
    font-weight: 600;
    line-height: 10px;
}

.card .ex_date h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 12px;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.card .ex_date h3 span {
    font-size: 12px;
    margin: 0px 2px;
}

.card .name {
    position: absolute;
    top: 195px;
    left: 25px;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 3px;
    color: #fff;
}

.card .cvv {
    position: absolute;
    color: #fff;
    top: 230px;
    left: 25px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.card .cvv h5 {
    font-size: 14px;
    margin-left: 5px;
    background: #121213;
    padding: 1px 10px;
    border-radius: 3px;
    letter-spacing: 1px;
}

.card .visa {
    position: absolute;
    top: 200px;
    right: 5px;
    width: 110px;
    height: 80px;
}

.card:nth-child(2)::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(184, 184, 184, .1);
}

HTML code

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Debit Card Design</title>
</head>

<body>
    <div class="card">
        <h4 class="debit_card">Debit Card</h4>
        <h4 class="bank">KDS <span>BANK</span></h4>
        <div class="chip">
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
        </div>
        <div class="number">
            <h6>4512</h6>
            <h6>8963</h6>
            <h6>7845</h6>
            <h6>3542</h6>
        </div>
        <img src="img/wave.png" alt="" class="wave">
        <div class="ex_date">
            <span>VALID<br>UPTO</span>
            <h3>02 <span>/</span> 28</h3>
        </div>
        <h2 class="name">JAHID KHAN SURNAME</h2>
        <div class="cvv">
            <span>CVV</span>
            <h5>563</h5>
        </div>
        <img src="img/visa.png" alt="" class="visa">
    </div>
    <div class="card">
        <h4 class="debit_card">Debit Card</h4>
        <h4 class="bank">KDS <span>BANK</span></h4>
        <div class="chip">
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
            <h6></h6>
        </div>
        <div class="number">
            <h6>4512</h6>
            <h6>8963</h6>
            <h6>7845</h6>
            <h6>3542</h6>
        </div>
        <img src="img/wave.png" alt="" class="wave">
        <div class="ex_date">
            <span>VALID<br>UPTO</span>
            <h3>02 <span>/</span> 28</h3>
        </div>
        <h2 class="name">JAHID KHAN SURNAME</h2>
        <div class="cvv">
            <span>CVV</span>
            <h5>563</h5>
        </div>
        <img src="img/visa.png" alt="" class="visa">
    </div>
</body>

</html>

 



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.


Buy me a coffee ----- Download -----