Credit card design CSS HTML

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>