Credit card design CSS HTML
Example HTML CSS credit card design. How to make HTML CSS Visa- mastercard.
CSS
body {
background-color: #f1f9fc;
padding: 0;
font-family: 'Open Sans' sans-serif;
text-decoration: none;
margin: 0;
}
.card-wrap{
display: table;
width:350px;
morgin: 100px auto;
position:relative;
}
.card{
border-radius:8px;
height:200px;
position:relative;
color: #CCC;
font-family: 'Ubuntu', sans-serif;
box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.5);
background-color: #004768;
background:linear-gradient(to right, #004768 0%, #00325b 100%);
}
.flag{
width:28%;
top:0;
right:0;
height:70px;
position:absolute;
}
.flag img{
width:100%;
height:auto;
}
.label{
font-size:14px;
opacity: .7;
margin-bottom: 5px;
}
.value{
text-transform: uppercase;
font-size:18px
}
.number{
font-size:24px;
line-height:1;
position: absolute;
top:80px;
left:15px;
}
.number span{
display:inline-block;
}
.owner-data{
position:absolute;
bottom:0;
left:0;
width:100%;
display:flex;
padding:15px;
justify-content:space-between;
box-sizing:border-box;
border-radius:0 0 8px 8px;
}
.validate{
text-align:center;
}
HTML
<div class="conteiner">
<div class="col-lg-12">
<div class="card-wrap">
<div class="card card-fron animate">
<div class="number">
<div class="label">card number</div>
<span>5550</span>
<span>6532</span>
<span>1002</span>
<span>6912</span>
</div>
<div class="owner-data">
<div class="name">
<div class="label">Cardholder name</div>
<div class="value">John Francis Deo</div>
</div>
<div class="validate">
<div class="label">Valid THU</div>
<div class="value">01/27</div>
</div>
</div>
<div class="flag"><img src="https://thumb.tildacdn.com/tild3935-3535-4436-b734-386135646337/-/resize/108x/-/format/webp/mastercard-vector-lo.png">
</div>
</div>
</div>
</div>
</div>
Comments (0)