Credit, Debit cards css html design
How to make debit/credit card look as similar as possible in CSS html
Super
0
450
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,wght@0,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>
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
