<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">

<div class="Wrap">
  <div class="Base">
    <div class="Inner-wrap">

      
<!--       Header SVG -->
      
      
      <svg class="Logo-name"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   width="298.72266"
   height="55.51717">
  <defs
     id="defs17040" />
  <g
     transform="translate(620.34041,-56.426733)"
     id="layer1">
    <g
       transform="translate(0.4494891,0.3945659)"
       id="logotype">
      <g
         id="g17202">
        <g
           id="logo">
          <path
             d="M -358.86107,56.307005 C -359.93357,56.307005 -360.80231,57.175763 -360.80231,58.247007 L -360.80231,71.85327 L -324.86107,71.85327 L -341.22857,56.308263 L -358.86107,56.307005"
             style="fill:#fff;fill-rule:nonzero;stroke:none"
             id="logo-ne" />
          <path
             d="M -323.54607,75.969518 C -323.54607,74.895757 -324.40857,74.030756 -325.48731,74.030756 L -339.08982,74.030756 L -339.08982,109.97325 L -323.55233,93.598265 L -323.54607,75.969518"
             style="fill:#fff;fill-rule:nonzero;stroke:none"
             id="logo-se" />
          <path
             d="M -343.21106,111.2745 C -342.14106,111.2745 -341.27232,110.4045 -341.27232,109.33076 L -341.27232,95.729517 L -377.21482,95.729517 L -360.84483,111.272 L -343.21106,111.2745"
             style="fill:#fff;fill-rule:nonzero;stroke:none"
             id="logo-sw" />
          <path
             d="M -378.52856,91.614507 C -378.52856,92.68701 -377.65982,93.560766 -376.58482,93.560766 L -362.98482,93.560766 L -362.98482,57.61577 L -378.52606,73.985761 L -378.52856,91.614507"
             style="fill:#fff;fill-rule:nonzero;stroke:none"
             id="logo-nw" />
        </g>
        <g
           id="type">
          <path
             d="M -543.26981,62.868265 L -543.26981,79.467005 L -566.39481,79.467005 L -566.39481,62.868265 L -574.81732,62.86077 L -574.81732,104.71326 L -566.39481,104.71326 L -566.39481,86.73326 L -543.26981,86.73326 L -543.26981,104.71326 L -534.83357,104.71326 L -534.83357,62.868265 L -543.26981,62.868265"
             style="opacity:1;fill:#fff;fill-stroke:none"
             id="H" />
          <path
             d="M -431.22357,62.868265 L -431.22357,104.70327 L -394.27231,104.70327 L -398.95232,97.33827 L -422.77731,97.33827 L -422.77731,86.73326 L -399.70732,86.73326 L -399.70732,79.639505 L -422.77731,79.639505 L -422.77731,70.060762 L -398.99231,70.060762 L -394.40732,62.868265 L -431.22357,62.868265"
             style="opacity:1;fill:#fff;fill-rule:nonzero;stroke:none"
             id="E" />
          <path
             d="M -606.12483,62.858251 C -614.88606,62.858251 -619.31107,68.184503 -619.31107,75.934518 L -619.31107,91.55702 C -619.31107,100.52575 -613.60858,104.71326 -606.16856,104.71326 L -579.74356,104.71076 L -584.64232,97.06077 L -604.53606,97.06077 C -608.76233,97.06077 -610.60357,95.53327 -610.60357,90.803255 L -610.60357,76.629518 C -610.60357,72.057012 -609.05356,70.27326 -604.42357,70.27326 L -584.43482,70.27326 L -579.73107,62.858251 L -606.12483,62.858251"
             style="opacity:1;fill:#fff;fill-rule:nonzero;stroke:none"
             id="C" />
          <path
             d="M -468.18356,62.848257 C -473.24357,62.848257 -478.42982,65.889505 -478.42982,73.712018 L -478.42982,75.722002 C -478.42982,83.877005 -473.43981,86.988252 -468.44731,87.00952 L -450.92356,87.00952 C -449.10357,87.00952 -447.62482,87.312006 -447.62482,90.388255 L -447.62732,93.942007 C -447.67357,96.705755 -449.05232,97.33827 -450.98607,97.33827 L -474.03983,97.33827 L -478.76233,104.70327 L -450.44356,104.70327 C -443.61481,104.70327 -438.97856,101.30576 -438.97856,93.458265 L -438.97856,90.574507 C -438.97856,82.987017 -443.28606,79.402002 -449.96481,79.402002 L -466.69732,79.402002 C -468.55233,79.402002 -469.84482,78.895753 -469.84482,76.148256 L -469.84482,73.254503 C -469.84482,70.914511 -468.95857,70.060762 -466.79732,70.060762 L -444.84232,70.052007 L -440.25357,62.838262 L -468.18356,62.848257"
             style="opacity:1;fill:#fff;fill-rule:nonzero;stroke:none"
             id="S" />
          <path
             d="M -510.36356,62.868265 L -530.20731,104.71076 L -520.82858,104.71076 L -516.96356,96.069502 L -495.39982,96.069502 L -491.54732,104.71076 L -482.12731,104.71076 L -502.01731,62.868265 L -510.36356,62.868265 z M -506.20232,71.555761 L -498.57731,88.947005 L -513.77858,88.947005 L -506.20232,71.555761"
             style="opacity:1;fill:#fff;fill-rule:nonzero;stroke:none"
             id="A" />
        </g>
      </g>
    </g>
  </g>
</svg>

      
      
<!--       Logo SVG -->
      
      
      <svg class= "Logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 97.814 97.063" style="enable-background:new 0 0 97.814 97.063;" xml:space="preserve">
<g id="The_x5F_Chase_x5F_Manhattan_x5F_Bank">
  <path class="Logo" style="fill-rule:evenodd;clip-rule:evenodd;" d="M31.534,0.148c11.888,0.129,20.426,0,32.226,0c1.625,0,3.551-0.332,4.912,0
    c1.078,0.264,2.74,2.468,3.714,3.475C80.6,12.116,89.026,20.218,97.064,28.66c-21.246-0.112-47.055,0.218-65.77-0.12
    c-0.103-8.506-0.225-18.47,0-28.033C31.289,0.302,31.384,0.196,31.534,0.148z"/>
  <path class="Logo" style="fill-rule:evenodd;clip-rule:evenodd;" d="M28.778,66.037c-8.482-0.125-19.476,0.192-28.392-0.119
    c-0.203-8.306-0.12-18.252-0.12-27.674c0-2.727-0.6-6.873,0-9.345c0.19-0.783,2.35-2.674,3.355-3.714
    c8.015-8.298,17.314-16.974,25.038-24.798c0.102-0.023,0.112,0.046,0.119,0.119C28.671,24.725,29.012,43.838,28.778,66.037z"/>
  <path class="Logo" style="fill-rule:evenodd;clip-rule:evenodd;" d="M69.39,30.937c9.529,0.098,18.895-0.152,28.033,0.119
    c0.106,9.001,0.204,17.434,0.12,27.314c-0.022,2.579,0.62,6.92,0,9.584c-0.274,1.178-2.454,2.654-3.475,3.714
    c-8.182,8.494-16.734,16.807-24.918,24.679c-0.192-18.602-0.095-42.894-0.12-65.051C69.098,31.123,69.218,31.003,69.39,30.937z"/>
  <path class="Logo" style="fill-rule:evenodd;clip-rule:evenodd;" d="M66.515,68.193c0.309,9.83,0.309,19.073,0,28.513
    c-10.081,0.189-19.016-0.092-28.272,0.12c-2.423,0.055-6.684,0.57-9.105-0.12c-0.847-0.241-2.667-2.308-3.713-3.354
    c-8.051-8.05-16.983-16.943-24.56-24.679c-0.079-0.081-0.112-0.206-0.119-0.359c0.097-0.023,0.119-0.12,0.239-0.12
    C23.242,68.233,44.12,68.237,66.515,68.193z"/>
</g>
<g>
</g>
</svg>
      
      
      
      
<!-- Card Chip SVG -->
      
      <svg class="Chip" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 387.8 380.3" style="enable-background:new 0 0 387.8 380.3;" xml:space="preserve">
<style type="text/css">
  .st0{fill:url(#gold-gradient);stroke:#000000;stroke-width:10;stroke-miterlimit:10;}
</style>
<defs>
<linearGradient id="gold-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#c79750"></stop>
      <stop offset="20%" stop-color="#e6b964"></stop>
      <stop offset="50%" stop-color=" #f8e889"></stop>
      <stop offset="80%" stop-color=" #deb15f"></stop>
      <stop offset="100%" stop-color=" #dfb461"></stop>
    </linearGradient>
</defs>
<g id="XMLID_4_">
  <path id="XMLID_1_" class="st0" d="M308.8,375.3H79.1C38.2,375.3,5,342.1,5,301.2V79.1C5,38.2,38.2,5,79.1,5h229.7
    c40.9,0,74.1,33.2,74.1,74.1v222.2C382.8,342.1,349.7,375.3,308.8,375.3z"/>
  <line id="XMLID_2_" class="st0" x1="109.9" y1="5.1" x2="109.9" y2="375.1"/>
  <line id="XMLID_3_" class="st0" x1="4.9" y1="95.1" x2="109.9" y2="95.1"/>
  <line id="XMLID_7_" class="st0" x1="4.9" y1="185.1" x2="109.9" y2="185.1"/>
  <line id="XMLID_8_" class="st0" x1="1.9" y1="275.1" x2="106.9" y2="275.1"/>
  <line id="XMLID_9_" class="st0" x1="276.9" y1="275.1" x2="381.9" y2="275.1"/>
  <line id="XMLID_10_" class="st0" x1="274.9" y1="185.1" x2="379.9" y2="185.1"/>
  <line id="XMLID_11_" class="st0" x1="277.9" y1="95.1" x2="382.9" y2="95.1"/>
  <g id="XMLID_6_">
    <g id="XMLID_14_">
      <g id="XMLID_32_">
        <path id="XMLID_33_" d="M277.4,90.1h-1c-2.5,0-4.5,2-4.5,4.5v272c0,2.5,2,4.5,4.5,4.5h1c2.5,0,4.5-2,4.5-4.5v-272
          C281.9,92.1,279.9,90.1,277.4,90.1z"/>
      </g>
    </g>
  </g>
</g>
</svg>
      <div class="Card-number">
        <ul>
          <li id="first-li">4351</li>
          <li>8237</li>
          <li>2189</li>
          <li id="last-li">0104</li>
        </ul>
      </div>
      
      <div class='Expire'>
        <h4>Good Thru</h4>
        <p>02/20</p>
      </div>
      
      <div class='Name'>
        <h3>Jordan Luca Schlansky</h3>
      </div>
      
<!--       Visa Logo SVG -->
      
        <svg
         xmlns:dc="http://purl.org/dc/elements/1.1/"
         xmlns:cc="http://creativecommons.org/ns#"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:svg="http://www.w3.org/2000/svg"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
         xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
         version="1.1"
         id="Layer_1"
         x="0px"
         y="0px"
         class="Visa"
         width="1000.046"
         height="323.65302"
         viewBox="0 0 1000.046 323.653"
         enable-background="new 0 0 258.381 161.154"
         xml:space="preserve"
         inkscape:version="0.91 r13725"
         sodipodi:docname="Visa_2006.svg"><metadata
         id="metadata23"><rdf:RDF><cc:Work
             rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
         id="defs21">

      </defs><sodipodi:namedview
         pagecolor="#ffffff"
         bordercolor="#666666"
         borderopacity="1"
         objecttolerance="10"
         gridtolerance="10"
         guidetolerance="10"
         inkscape:pageopacity="0"
         inkscape:pageshadow="2"
         inkscape:window-width="1366"
         inkscape:window-height="705"
         id="namedview19"
         showgrid="false"
         inkscape:zoom="0.35355339"
         inkscape:cx="34.690897"
         inkscape:cy="131.15483"
         inkscape:window-x="-8"
         inkscape:window-y="-8"
         inkscape:window-maximized="1"
         inkscape:current-layer="Layer_1" />
      <g
         id="g4158"
         transform="matrix(4.4299631,0,0,4.4299631,-81.165783,-105.04783)"><polygon
           points="116.145,95.719 97.858,95.719 109.296,24.995 127.582,24.995 "
           id="polygon9"
           style="fill:#f2f2f2" /><path
           d="m 182.437,26.724 c -3.607,-1.431 -9.328,-3.011 -16.402,-3.011 -18.059,0 -30.776,9.63 -30.854,23.398 -0.15,10.158 9.105,15.8 16.027,19.187 7.075,3.461 9.48,5.72 9.48,8.805 -0.072,4.738 -5.717,6.922 -10.982,6.922 -7.301,0 -11.213,-1.126 -17.158,-3.762 l -2.408,-1.13 -2.559,15.876 c 4.289,1.954 12.191,3.688 20.395,3.764 19.188,0 31.68,-9.481 31.828,-24.153 0.073,-8.051 -4.814,-14.22 -15.35,-19.261 -6.396,-3.236 -10.313,-5.418 -10.313,-8.729 0.075,-3.01 3.313,-6.093 10.533,-6.093 5.945,-0.151 10.313,1.278 13.622,2.708 l 1.654,0.751 2.487,-15.272 0,0 z"
           id="path11"
           inkscape:connector-curvature="0"
           style="fill:#fff" /><path
           d="m 206.742,70.664 c 1.506,-4.063 7.301,-19.788 7.301,-19.788 -0.076,0.151 1.503,-4.138 2.406,-6.771 l 1.278,6.094 c 0,0 3.463,16.929 4.215,20.465 -2.858,0 -11.588,0 -15.2,0 l 0,0 z m 22.573,-45.669 -14.145,0 c -4.362,0 -7.676,1.278 -9.558,5.868 l -27.163,64.855 19.188,0 c 0,0 3.159,-8.729 3.838,-10.609 2.105,0 20.771,0 23.479,0 0.525,2.483 2.182,10.609 2.182,10.609 l 16.932,0 -14.753,-70.723 0,0 z"
           id="path13"
           inkscape:connector-curvature="0"
           style="fill:#fff" /><path
           d="M 82.584,24.995 64.675,73.222 62.718,63.441 C 59.407,52.155 49.023,39.893 37.435,33.796 l 16.404,61.848 19.338,0 28.744,-70.649 -19.337,0 0,0 z"
           id="path15"
           inkscape:connector-curvature="0"
           style="fill:#fff" /><path
           d="m 48.045,24.995 -29.422,0 -0.301,1.429 c 22.951,5.869 38.151,20.016 44.396,37.02 L 56.322,30.94 c -1.053,-4.517 -4.289,-5.796 -8.277,-5.945 l 0,0 z"
           id="path17"
           inkscape:connector-curvature="0"
           style="fill:#fff" /></g>
      </svg>
        
    </div>
  </div>
</div>
/* Shoutout to Maite Rosalie for the gold svg gradient which can be seen here below. */

/* https://codepen.io/maiterosalie/pen/ppRRLV?q=gold+gradient&limit=all&type=type-pens */


html {
  background: #252526;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.Wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Base {
  background: #ccc;
  height: 378px;
  width: 595px;
  border-radius: 15px;
}

.Inner-wrap {
  background-color: #0c0014;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%230d1838' points='1600%2C160 0%2C460 0%2C350 1600%2C50'/%3E%3Cpolygon fill='%230e315d' points='1600%2C260 0%2C560 0%2C450 1600%2C150'/%3E%3Cpolygon fill='%230f4981' points='1600%2C360 0%2C660 0%2C550 1600%2C250'/%3E%3Cpolygon fill='%231062a6' points='1600%2C460 0%2C760 0%2C650 1600%2C350'/%3E%3Cpolygon fill='%23117aca' points='1600%2C800 0%2C800 0%2C750 1600%2C450'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto 147%;
  background-position: center;
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 13px;
  padding: 20px 40px;
  box-sizing: border-box;
  color: #fff;
}

p {
  margin: 0;
  font-size: 2em;
}

/* Controls top right logo */

.Logo {
  position: absolute;
  height: 80px;
  width: 80px;
  right: 0;
  top: 0;
  padding: inherit;
  fill: #117aca;
}

/* Controls chip icon */

.Chip {
  height: 80px;
  margin: 40px 0 25px 0;
}

.gold path{
  fill: url(#gold-gradient);
}

svg {
  display: block;
}

/* Controls name size */

.Logo-name {
  transform: scale(.5);
  margin-left: -75px;
}

.Card-number p {
  text-align: center;
}

.Card-number {
  margin-top: -25px;
  display: flex;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
}

ul {
  padding: 0;
}

ul li {
  list-style: none;
  float: left;
  margin: 0px 10px;
  font-size: 2.2em;
}

#first-li {
  margin-left: 0;
}

#last-li {
  margin-right: 0;
}

.Expire {
  font-size: .75em;
  text-align: center;
}

.Expire h4 {
  font-weight: 400;
  color: #aaa;
  margin: 0;
/*   word-spacing: 9999999px; */
  text-transform: uppercase;
}

.Expire p {
  font-size: 1.55em;
  color: rgba(255, 255, 255, 0.9);
}

.Name h3 {
  position: absolute;
  bottom: 0;
  left: 18%;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.35em;
  color: rgba(255, 255, 255, 0.85);
}

.Visa {
  width: 115px;
  position: absolute;
  bottom: -145px;
  right: 0;
  padding: inherit;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.