<link href='https://fonts.googleapis.com/css?family=Share+Tech+Mono' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Signika:400' rel='stylesheet' type='text/css'>
<div class="card-holder">
  <div class="card">
    <span class="title">Bank of Ireland</span>
    <span class="bank-logo">
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In  -->
<svg version="1.1"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
   x="0px" y="0px" width="73.7px" height="40.4px" viewBox="0 0 73.7 40.4" style="enable-background:new 0 0 73.7 40.4;"
   xml:space="preserve">
<style type="text/css">
  .st0{fill:#FFFFFF;}
</style>
<defs>
</defs>
<g>
  <path class="st0" d="M37.6,40.4c-8.9-0.1-16.8-1.3-24.3-4.7c-3.6-1.6-7-3.7-9.6-6.7c-5.2-5.9-4.9-12.9,0.6-18.4
    c3.9-3.9,8.7-6.2,13.9-7.9c7.3-2.3,14.8-3.1,22.4-2.6c6.8,0.4,13.4,1.7,19.6,4.5c3.7,1.7,7.2,3.8,9.9,6.9c4.9,5.8,4.7,12.6-0.7,18
    c-3.4,3.4-7.5,5.7-11.9,7.3c-5.1,1.9-10.3,2.9-15.7,3.3C40.2,40.3,38.5,40.3,37.6,40.4z M37.4,39.1c0.8,0,2.1-0.1,3.4-0.2
    c5.6-0.3,11.1-1.5,16.2-3.8c4.3-1.9,8.1-4.4,10.7-8.4c1.7-2.6,2.4-5.4,1.8-8.4c-0.6-3.1-2.3-5.6-4.5-7.8C61.4,7,56.9,5,52.2,3.5
    c-6-1.8-12.1-2.4-18.4-2.1C29.1,1.7,24.4,2.5,20,4c-4.6,1.6-8.8,3.8-12.2,7.4c-4.8,5.2-5,11.4-0.5,16.8c2.3,2.8,5.2,4.7,8.4,6.2
    C22.3,37.8,29.5,39,37.4,39.1z"/>
  <path class="st0" d="M37.3,37.6c-7.4-0.1-14.2-1.1-20.6-4.1c-3.1-1.4-6-3.3-8.2-5.9c-4.2-4.9-4-10.8,0.5-15.4
    c3.3-3.4,7.4-5.4,11.8-6.9C27.5,3.1,34.5,2.5,41.5,3C47.3,3.5,52.8,4.8,58,7.4c2.6,1.3,5.1,3,7,5.2c4.3,4.9,4.2,10.7-0.2,15.4
    c-3.1,3.3-7,5.3-11.2,6.8c-4.4,1.5-8.9,2.4-13.5,2.6C39,37.5,38,37.5,37.3,37.6z M36.9,36.4c6.1,0,12-0.9,17.6-3.1
    c3.8-1.5,7.2-3.5,9.8-6.7c3.1-3.9,3.2-8.5,0.2-12.5c-1.6-2.1-3.7-3.7-6-5c-5.8-3.3-12.1-4.6-18.7-5c-7-0.4-13.9,0.4-20.6,3
    c-3.8,1.5-7.3,3.5-9.8,6.7c-3.2,4-3.2,8.7,0,12.7c2.1,2.6,4.7,4.4,7.7,5.7C23.4,35.2,30,36.3,36.9,36.4z"/>
  <path class="st0" d="M21.1,23.4c0.6,1.4,1.8,1.9,3,2.3c2.5,0.8,5.1,1.5,7.7,2.2c1,0.3,2,0.6,3,1c0.8,0.4,1.5,0.9,2.2,1.4
    c1.3-1.6,3.5-2,5.6-2.6c2.4-0.7,4.8-1.3,7.2-2.1c1.2-0.4,2.4-0.9,2.8-2.5c0,1.7,0.2,3.2-0.1,4.6c-0.1,0.7-1,1.4-1.8,1.7
    c-1.5,0.7-3.1,1.1-4.7,1.6c-2.1,0.6-4.2,1.2-6.3,1.8c-1.2,0.4-2.3,1.1-2.8,2.6c-0.5-1.6-1.8-2.2-3.1-2.6c-2.4-0.8-4.9-1.4-7.4-2.1
    c-1.2-0.4-2.5-0.8-3.7-1.4c-1.2-0.5-1.8-1.4-1.7-2.8C21.1,25.4,21.1,24.4,21.1,23.4z"/>
  <path class="st0" d="M36.9,15.3c1.1-1.5,2.8-1.9,4.4-2.4c2.5-0.7,4.9-1.4,7.4-2.1c0.8-0.2,1.5-0.5,2.2-0.9c0.7-0.4,1.2-1,1.8-1.6
    c0,0.3,0,0.8,0,1.3c0,0.4,0,0.7,0,1.1c0.3,2-0.8,3.1-2.4,3.6c-2.3,0.8-4.7,1.4-7,2c-1.3,0.4-2.7,0.8-4,1.3c-1.1,0.4-2,1-2.4,2.4
    c-0.6-1.6-1.8-2.3-3.2-2.7c-2.4-0.7-4.9-1.3-7.3-2c-1.3-0.4-2.6-0.9-3.8-1.5c-1.1-0.5-1.6-1.4-1.5-2.6c0.1-1,0-2.1,0.1-3.2
    c0.7,1.8,2.3,2.2,3.8,2.7c2.8,0.9,5.7,1.6,8.5,2.5C35.4,13.8,36,14.2,36.9,15.3z"/>
  <path class="st0" d="M36.9,27.6c-0.4-1.3-1.2-2-2.2-2.4c-2.5-0.8-5-1.5-7.5-2.2c-1.4-0.4-2.8-0.9-4.2-1.4c-1.3-0.5-2-1.5-1.9-3
    c0.1-1,0-2,0.1-3c0.5,1.4,1.7,2,2.9,2.3c2.6,0.8,5.2,1.5,7.8,2.3c1,0.3,2.1,0.6,3.1,1.1c0.7,0.3,1.4,0.9,2.1,1.4
    c1.3-1.6,3.5-2,5.5-2.6c2.5-0.8,5-1.4,7.5-2.2c1.1-0.4,2.1-0.9,2.6-2.2c0,1.4,0.1,2.7,0,4c-0.1,0.9-0.8,1.5-1.6,1.8
    c-1.9,0.7-3.8,1.3-5.7,1.9c-2,0.6-3.9,1.1-5.9,1.8C38.3,25.5,37.3,26.2,36.9,27.6z"/>
</g>
</svg>
</span>
    <img class="chip" src="http://jamesdelaney.ie/dev/chip.png">
    <img class="mc" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/MasterCard_logo.png/320px-MasterCard_logo.png">
    <span class="holo-back"></span>
    <span class="holo"></span>
    <br>
    <span class="emboss number">5467 5670 7623 0945</span><br><br>
    <span class="small-type">Valid From&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;UNTIL END</span><br><br>
    <span class="emboss exp">07/14 – 10/18</span><br><br>
    <span class="emboss name">DR CATHERINE HALSEY</span>
  </div>
</div>
body {
background: linear-gradient(125deg, #207A89, #17A3BA 55%);
}

.card {
  font-family: Share Tech Mono;
  background-color: #9BA7B2;
  display: block;
  padding 50px 100px;
  width: 700px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
  border: 1px solid grey;
    margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  height: 430px;
    background: linear-gradient(-125deg, #1D3349, #06121E 55%);
}

.bank-logo svg {
  position: absolute;
  padding-left: 220px;
  padding-top: 15px;
  max-width: 65px;
  opacity: 0.9;
}

img.chip {
  max-width: 80px;
  position: absolute;
  padding-top: 120px;
  padding-left: 50px
}

.mc {
  position: absolute;
  max-width: 140px;
  padding-top: 300px;
  padding-left: 520px;
}

.title {
  font-family: Signika;
  color: white;
  font-size: 28px;
  font-weight: 400;
  opacity: 0.8;
  padding-left: 20px;
  padding-top: 20px;
  position: absolute;
  display: inline-block;
}


.emboss {
  font-family: Share Tech Mono;
  color: transparent;
  text-shadow: -2px -2px 2px rgba(255,255,255,1),
                1px 1px 1px rgba(0,0,0,0.9),
                2px -2px 4px rgba(255,255,255,1),
                -2px -2px 2px rgba(0,0,0,0.9),
                -2px 2px 1px rgba(0,0,0,0.9);
  -webkit-text-stroke:2px rgba(0,0,0,0.4);
}

.number {
  display: inline-block;
  padding-top: 200px;
    font-size: 52px;
    padding-left: 50px;
  position: relative;
  z-index: 999;
}

.name {
  font-size: 32px;
  padding-left: 30px;
  text-shadow: -2px -1px 1px rgba(255,255,255,1),
                1px 1px 1px rgba(0,0,0,1),
                1px 0px 1px rgba(255,255,255,1),
                -1px -1px 1px rgba(0,0,0,1),
                -1px 1px 1px rgba(0,0,0,1);
  -webkit-text-stroke: 1px rgba(0,0,0,0.2);
  display: inline-block;
  padding-bottom: 20px;
}

.small-type {
  font-family: sans-serif;
  text-transform: uppercase;
  color: white;
  padding-left: 100px;
  line-height: 10px;
  letter-spacing: 1px;
  opacity: 0.7;
}

.exp {
    font-size: 32px;
  padding-left: 100px;
  text-shadow: -2px -1px 1px rgba(255,255,255,1),
                1px 1px 1px rgba(0,0,0,1),
                1px 0px 1px rgba(255,255,255,1),
                -1px -1px 1px rgba(0,0,0,1),
                -1px 1px 1px rgba(0,0,0,1);
  -webkit-text-stroke: 1px rgba(0,0,0,0.2);
  -webkit-text-stroke: 1px rgba(0,0,0,0.2);
}

.holo {
  background: linear-gradient(270deg, #ec1414, #eccb14, #14ec1c, #14eaec, #1914ec, #ec14da);
background-size: 1200% 1200%;
-webkit-animation: Logo 4s ease infinite;
-moz-animation: Logo 4s ease infinite;
-o-animation: Logo 4s ease infinite;
animation: Logo 4s ease infinite;
  display: block;
  width: 130px;
  height: 90px;
  z-index: 19;
  border-radius: 55px;
  position: absolute;
  top: 140px;
  left: 530px;
}
@-webkit-keyframes Logo {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes Logo {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes Logo {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes Logo {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.holo-back {
    position: absolute;
  top: 140px;
  left: 530px;
    /* top: 300px; */
    height: 90px;
    width: 130px;
    z-index: 22;
    background-repeat: no-repeat;
    background-image: url('http://jamesdelaney.ie/dev/hologram.png');
    background-position: 50% 50%;
    background-size: cover;
    opacity: 0.5;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.