<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 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;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
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);
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);
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);
text-stroke: 1px rgba(0,0,0,0.2);
text-stroke: 1px rgba(0,0,0,0.2);
}
.holo {
background: linear-gradient(270deg, #ec1414, #eccb14, #14ec1c, #14eaec, #1914ec, #ec14da);
background-size: 1200% 1200%;
animation: Logo 4s ease infinite;
animation: Logo 4s ease infinite;
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.