<div class="container">
<div class="circles">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>
<div class="card">
<div class="visa_logo">
<img src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/visa.png" alt="">
</div>
<div class="visa_info">
<img src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/chip.png" alt="">
<p>4586 7985 9271 6388</p>
</div>
<div class="visa_crinfo">
<p>02/12</p>
<p>Nikhil Bobade</p>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(
109.6deg,
rgba(62, 161, 219, 1) 11.2%,
rgba(93, 52, 236, 1) 100.2%
);
}
/* Background Circle*/
.circles {
position: absolute;
height: 270px;
width: 450px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
position: absolute;
top: -50px;
border-radius: 50%;
background: radial-gradient(#006db3, #29b6f6);
left: 10px;
height: 160px;
width: 160px;
}
.circle-2 {
position: absolute;
border-radius: 50%;
background: radial-gradient(#006db3, #29b6f6);
right: 40px;
top: 80px;
opacity: 0.8;
height: 160px;
width: 160px;
}
/* Card */
.card {
width: 380px;
height: 230px;
border: 2px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
z-index: 1;
overflow: hidden;
backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
position: relative;
}
.visa_logo {
float: right;
padding: 10px;
}
.visa_logo img {
width: 70px;
height: 40px;
}
.visa_info {
padding: 10px;
margin: 30px 0;
}
.visa_info img {
width: 60px;
height: 45px;
}
.visa_info p {
font-size: 22px;
padding: 10px 0;
letter-spacing: 2px;
color: #ffffff;
}
.visa_crinfo {
display: flex;
justify-content: space-between;
padding: 0 10px;
color: #ffffff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.