Secure Vault EMF

Prototype

by AntonLapshin

HTML

<div>

  <h1>
    Credit Card
  </h1>
  
  <div class="field" style="width: 50%">
    <h2>
      Card Number:
    </h2>
    <input />
  </div>
  
  <div class="field" style="width: 21%">
    <h2>
     Expiration:
    </h2>
    <div>
      <input style="width: 15%"/>
      <span style="display: inline-block; text-align: center; width: 10%">/</span>
      <input style="width: 35%"/>
      <span style="display: inline-block; text-align: center; width: 20%">[]</span>
    </div>
  </div>
  
  <div class="field" style="width: 24%">
    <h2>
     CVV:
    </h2>
    <input style="width: 40%"/>
    <a href="#" style="width: 55%">What is this?</a>
  </div>  

  <p>
    Input the credit card data as it is shown on the front side of your credit card.
  </p>
  
  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
      <path fill="#000000" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" />
  </svg>
  <span >Protected in vault</span>
</div>

CSS

.field {
  display: inline-block;
  padding-right: 1%;
}

.field input  {
  width: 100%;
}