<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/9c37986c06.js" crossorigin="anonymous"></script>
<div class="container">
  <div class="title">
    <h1 class="payment">PAYMENT DETAILS</h1>
  </div>
  <div class="column">
    <div class="card" id="card">
      <div class="card-inner">
        <div class="card-front">
          <h1>&#9884; <p style="margin: -35px 0 0 140px; font-size: 32px;">Your Bank</p>
          </h1>
          <div class="box">
            <span style="color: #9a0; font-size: 70px;margin-top: -10px;">&#9580;</span>
          </div>
          <div class="div1">
            <span style="color: #ddd; font-size:10px; position: absolute; top:20px;left:1%">&#10089;</span>
            <span style="color: #ddd; font-size:20px;position: absolute; top:13px; left:10%">&#10089;</span>
            <span style="color: #ddd; font-size:30px;position: absolute; top:6px;left:20%">&#10089;</span>
            <span style="color: #ddd; font-size:40px;position: absolute; top:-1px;left:40%">&#10089;</span>
          </div>
          <span class="h3span" id="cardnumber1">0000</span>
          <span class="h3span" id="cardnumber2">0000</span>
          <span class="h3span" id="cardnumber3">0000</span>
          <span class="h3span" id="cardnumber4">0000</span>
          <div class="icon" id="icon">
            <i class="fa fa-cc-visa" id="ico0" style="display: none;"></i>
            <i class="fa fa-cc-amex" id="ico1" style="display: none;"></i>
            <i class="fa fa-cc-mastercard" id="ico2" style="display: none;"></i>
            <i class="fa fa-cc-discover" id="ico3" style="display: none;"></i>
          </div>
          <p class="pwrite" id="expire">Expiracy Date</p>
          <p class="pwrite" id="cardname" style="margin-top: -10px;">Card Holder</p>
          <p class="pwrite" id="sortcode" style="margin-top: -10px;">Sort Code</p>
        </div>
        <br>

        <div class="card-back">
          <div class="strip">

          </div>
          <p style="font-size: 12px; margin:20px 10px 5px 10px;">AUTHORISED SIGNATURE</p>
          <div class="sigstrip">
            <span class="sig" style="color:#000;">Sig Nature</span>
            <div class="input" id="sec">000</div>
          </div>
          <div class="info">
            <p>If you have any enquiries about this purchase, please ring:</p>
            <p class="pwrite" style="top: -15px;left: 0;font-size:12px;">Your Banks Telephone &#8470;</p>
          </div>

          <div class="square">
            <span style="font-size: 30px; color:#ddd;">&#10051;</span>
          </div>
          <div class="infone">
            <p style="margin-top: -5px"><b>If you card is lost or stolen please contact your provider.
                if found hand in to a branch of the provider.</b></p>
          </div>
        </div>
      </div>
    </div>
    <br>
  </div>

  <div class="column" id="column">

    <form name="form1" id="form1" action="method=post">
      <br>
      <label>Name on Card:</label>
      <input type="text" id="name" onchange="cardName()">
      <br>
      <label>Card Number:</label>
      <input type="text" id="cdnum1" onchange="cardNumberOne()">
      <input type="text" id="cdnum2" onchange="cardNumberTwo()">
      <input type="text" id="cdnum3" onchange="cardNumberThree()">
      <input type="text" id="cdnum4" onchange="cardNumberFour()">
      <br>
      <label>Expiracy Date:</label>
      <input type="text" id="exdate" onchange="expiracyDate()">
      <br>
      <label>Sort Code:</label>
      <input type="text" id="sort" onchange="sortCode()">
      <label>Card Type:</label>
      <i class="fa fa-cc-visa" id="fa-fa-cc-visa1" onclick="closeIcons(); openIconOne();"></i>
      <i class="fa fa-cc-amex" id="fa-fa-cc-amex1" onclick="closeIcons(); openIconTwo();"></i>
      <i class="fa fa-cc-mastercard" id="fa-fa-cc-mastercard1" onclick="closeIcons(); openIconThree();"></i>
      <i class="fa fa-cc-discover" id="fa-fa-cc-discover1" onclick="closeIcons(); openIconFour();"></i>
      <div class="input" id="cardType"></div>
      <label>Security Number (back of card):</label>
      <input type="text" id="security" onchange="securityCode()">
      <br>
    </form>
  </div>
</div>

      body {
        font-family: Share Tech Mono;
        background-color: #fcf;
      }
      .container {
        margin-left: 25%;
      }
      @media screen and (max-width: 600px){
        .container {
          margin-left: 0;
        }
      }
     .column {
       float: left;
       width: 400px;
       height: 270px;
       margin: 40px 0 0px 0;
       padding: 10px;
       box-sizing: border-box;
       background-color: #ffc;
     }

     @media screen and (max-width: 600px){
       .column {
         width: 100%;
         margin-bottom: -40px;
         margin-left: 0:
       }
     }
     #columnOne,
     #columnTwo {
       position: relative;
       top: 600px;
       left: -640px;
     }
     #columnTwo {
       top: 317px;
       margin-bottom: 100px;
     }
     @media screen and (max-width: 600px){
       #columnOne,
       #columnTwo {
         width: 100%;
         top: 0;
         left:0;
       }
     }
     .title {
       position: relative;
       width: 740px;
       height: 60px;
       margin-bottom: 10px;
     }
     @media screen and (max-width: 600px){
       .title {
         width: 100%;
         font-size: 24px;
       }
     }
     @media screen and (max-width: 900px){
       .title {
         width: 100%;
       }
     }
    .card {
      background-color: transparent;
      width: 360px;
      height: 220px;
      perspective: 1000px;
    }
     .card-inner {
       position: relative;
       width: 100%;
       height: 100%;
       background-image: linear-gradient(to right, #f0f, #a5a, #606 70%);
       border-radius: 15px;
       transition: transform 0.5s;
       transform-style: preserve-3d;
       box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     }
     .card:hover .card-inner {
        transform: rotateY(180deg);
     }
     .card-front, .card-back {
       position: absolute;
       width: 100%;
       height: 100%;
      -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
     }
     .card-back {
       width: 360px;
       height: 220px;
       margin-top: -18px;
       background-image: linear-gradient(to right, #606, #a5a, #f0f 80%);
       border-radius: 15px;
       transform: rotateY(180deg);
     }
     .card-front {
       width: 360px;
       height: 220px;
       background-image: linear-gradient(to right, #f0f, #a5a, #606 70%);
       border-radius: 15px;
     }
   @media screen and (max-width: 600px){
     .card {
       margin-top: 30px;
     }
   }
     h1 {
       position: absolute;
       margin: 10px;
       color: #ccc;
       text-shadow: 2px 2px 2px #aaa;
     }
      @media screen and (max-width: 600px){
        h1 {
          font-size: 24px;
        }
      }
     .payment {
       font-size: 42px;
       margin-left:50%;
       transform: translatex(-50%);
     }
     .personal {
       position: relative;
       top: 280px;
       left:50%;
       transform: translatex(-82%);
       font-size: 42px;
       margin-bottom: 0px;
     }
     @media screen and (max-width: 600px){
       .personal {
         top: 0px;
         left: 100%;
       }
     }
     .box {
       margin-top: 60px;
       margin-left: 40px;
       width: 40px;
       height: 41px;
       background-color: #aa0;
       border: 1px solid #333;
       border-radius: 6px;
       box-shadow: 0 0 5px #333;
       overflow: hidden;
       z-index: 1;
     }
     @media screen and (max-width: 600px){
       .box {
         top: 170px;
       }
     }
     span {
       position: relative;
       top: -18px;
       left: -5px;
       color: #aa0;
       font-size:50px;
       overflow: hidden;
       z-index: 0;
     }
     .div1 {
       position: absolute;
       top: 55px;
       left: 100px;
       width: 50px;
       height:50px;
       color: #eee;
     }
     .fas {
       position: relative;
       margin-top: 55px;
       margin-left: 85px;
       font-size:24px;
       transform: rotate(90deg);
     }
     @media screen and (max-width: 600px) {
       .fas {
         top: 180px;
       }
     }
      .icon{
        position: relative;
        float: right;
        margin: 5px 10px;
        width: 90px;
        height: 65px;
      }
      #ico0 {
        display: "block";
        color: #00c;
        font-size: 80px;
      }
      #ico1 {
        display: "none";
        color: #00f;
        font-size: 80px
      }
      #ico2 {
        display: "none";
        color: #f00;
        font-size: 80px
      }
      #ico3 {
        display: "none";
        color: #fa0;
        font-size: 80px
      }
     h3 {
       position: relative;
       top: 10px;
       left: 30px;
       font-size:28px;
       color: #ddd;
       text-shadow: 2px 2px 2px #bbb;
     }
     .h3span {
       position: relative;
       top: 5px;
       left: 40px;
       font-size:28px;
       color: #ddd;
       text-shadow: 2px 2px 2px #bbb;
     }
     .pwrite {
       position: relative;
       left: 10px;
       font-size:16px;
       color: #eee;
       text-shadow: 1px 1px 1px #999;
     }
      .strip {
        position: relative;
        width: 100%;
        height: 50px;
        top: 15px;
        background-color: #333;
      }
      .sigstrip {
        position: relative;
        top: 0px;
        left: 10px;
        padding-right: 5px;
        width: 60%;
        height: 30px;
        background-image: repeating-linear-gradient(#fff, #ccc 10%, #fa0 10%)
      }
      .sig {
        position: relative;
        top: 0px;
        left: 20px;
        font-family: 'Parisienne', cursive;
        font-size: 24px;
      }
      .input {
        float: right;
        width: 50px;
        height: 22px;
        margin-top: 3px;
        margin-left: -20px;
        background-color: #ccf;
        border: 1px solid #33f;
      }
      .square {
        position: relative;
        top: 10px;
        left: 10px;
        padding: 15px;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        background-image: linear-gradient(to right, #ccc, #eee, #ccc);
        border-radius: 6px;
      }
      .info {
        position: absolute;
        top: 65px;
        left: 65%;
        width: 35.5%;
        font-size: 12px;
        color: #eee;
      }
      .infone {
        position: absolute;
        top: 175px;
        left: 10px;
        width: 45%;
        color: #eee;
        text-align: center;
      }
      .infone > p {
        font-size: 6px;
      }
      input[type=text] {
       width: 245px;
       margin: 5px 0 5px 0;
       padding: 3px;
       box-sizing: border-box;
       background-color: #ccf;
       border: 1px solid #33f;
       outline: 0;
     }
     #cdnum1,
     #cdnum2,
     #cdnum3,
     #cdnum4 {
       width: 56px;
       margin-left: 1px;
     }
     #exdate {
       width: 236px;
     }
     #sort {
       width: 271px;
     }
     #security {
       width: 88px;
     }
     @media screen and (max-width: 600px) {
       #security {
         width: 92px;
       }
     }
     #cardType {
       width: 99px;
       margin-right:16px;
       float:right;
     }
     @media screen and (max-width: 600px) {
       #cardType {
         margin-right: 2px;
       }
     }
     select {
       margin-left: -5px;
       padding: 2px;
       box-sizing: border-box;
       background-color: #eee;
       border: 1px solid #333;
       outline: 0;
     }
     i {
       position: absolute;
       top: 0px;
       transform: rotate(-0deg);
       font-size: 28px;
     }
     #fa-fa-cc-visa {
       left: 175px;
       color:#00c;
     }
     #fa-fa-cc-amex {
       left: 230px;
       color:#00f;
     }
     #fa-fa-cc-mastercard {
       left: 285px;
       color:#f00;
     }
     #fa-fa-cc-discover {
       left: 335px;
       color:#fa0;
     }
     #fa-fa-cc-visa1 {
       position: relative;
       top: 0px;
       color:#00c;
     }
     #fa-fa-cc-amex1 {
       position: relative;
       top: 0px;
       color:#00f;
     }
     #fa-fa-cc-mastercard1 {
       position: relative;
       top: 0px;
       color:#f00;
     }
     #fa-fa-cc-discover1 {
       position: relative;
       top: 0px;
       color:#fa0;
     }

function cardName() {
  var x = document.getElementById("name").value;
  document.getElementById("cardname").innerHTML = x;
}
function cardNumberOne() {
  var x = document.getElementById("cdnum1").value;
  document.getElementById("cardnumber1").innerHTML = x;
}
function cardNumberTwo() {
  var x = document.getElementById("cdnum2").value;
  document.getElementById("cardnumber2").innerHTML = x;
}
function cardNumberThree() {
  var x = document.getElementById("cdnum3").value;
  document.getElementById("cardnumber3").innerHTML = x;
}
function cardNumberFour() {
  var x = document.getElementById("cdnum4").value;
  document.getElementById("cardnumber4").innerHTML = x;
}
function expiracyDate() {
  var x = document.getElementById("exdate").value;
  document.getElementById("expire").innerHTML = "Expiracy Date" + " " + x;
}
function sortCode() {
  var x = document.getElementById("sort").value;
  document.getElementById("sortcode").innerHTML = "Sort Code" + " " + x;
}
function securityCode() {
  var x = document.getElementById("security").value;
  document.getElementById("sec").innerHTML = x;
}
function closeIcons() {
  document.getElementById("ico0").style.display = "none";
  document.getElementById("ico1").style.display = "none";
  document.getElementById("ico2").style.display = "none";
  document.getElementById("ico3").style.display = "none";
}
function openIconOne() {
  document.getElementById("ico0").style.display = "block";
  document.getElementById("cardType").innerHTML = "Visa";
}
function openIconTwo() {
  document.getElementById("ico1").style.display = "block";
  document.getElementById("cardType").innerHTML = "Amex";
}
function openIconThree() {
  document.getElementById("ico2").style.display = "block";
  document.getElementById("cardType").innerHTML = "Mastercard";
}
function openIconFour() {
  document.getElementById("ico3").style.display = "block";
  document.getElementById("cardType").innerHTML = "Discover";
}