<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   @import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700i");
body {
  background: #777;
}

.card {
  display: block;
  background: #444;
  width: 420px;
  min-height: 192px;
  padding: 40px 40px;
  margin: 10vh auto;
  position: relative;
}

.object {
  color: #fff;
  font-family: "Ubuntu Mono", Courier, monospace;
  line-height: 1.5;
}
.object > .dec {
  color: #ccbb75;
}
.object > .name {
  color: #7f99bb;
}
.object > .pairs {
  padding-left: 20px;
}
.object > .pairs > .pair {
  display: block;
}
.object > .pairs > .pair .key {
  color: #988095;
}
.object.form > .pairs > .pair > label {
  display: inline-block;
  width: 40%;
}
.object > .pairs > .pair > .value,
.object > .pairs > .pair > .value > a {
  color: #96b38a;
}
.object.form > .pairs > .pair {
  margin-bottom: 1em;
}
.object.form > .pairs > .pair > .value {
  border: 0px;
  border-bottom: 1px solid #96b38a;
  background: rgba(0, 0, 0, 0);
  font-family: "Ubuntu Mono", Courier, monospace;
  padding: 0;
  padding-bottom: 2px;
  font-size: 1em;
  width: 50%;
}
.object > .pairs > .pair > .value > a:hover {
  color: #fff;
}
.object > .pairs > .pair > .bool {
  color: #ccbb75;
}
  </style>
 </head>
 <body translate="no">
  <div id="card">
   <div class="card">
    <div class="object form">
     <div class="pairs">
      <span class="pair">
       <label>
        <span class="key">
         firstName
        </span>
        :
       </label>
       <input class="value" placeholder="" v-model="firstName"/>
      </span>
      <span class="pair">
       <label>
        <span class="key">
         lastName
        </span>
        :
       </label>
       <input class="value" placeholder="" v-model="lastName"/>
      </span>
      <span class="pair">
       <label>
        <span class="key">
         career
        </span>
        :
       </label>
       <input class="value" placeholder="" v-model="career"/>
      </span>
      <span class="pair">
       <label>
        <span class="key">
         currentlyEmployed
        </span>
        :
       </label>
       <input class="value bool" type="checkbox" v-model="currentlyEmployed"/>
      </span>
      <span class="pair">
       <label>
        <span class="key">
         currentStack
        </span>
        :
       </label>
       <input class="value" v-model="currentStack"/>
      </span>
      <span class="pair">
       <label>
        <span class="key">
         interests
        </span>
        :
       </label>
       <input class="value" v-model="interests"/>
      </span>
      <span class="pair">
       <label>
        <span class="key">
         location
        </span>
        :
       </label>
       <input class="value" v-model="location"/>
      </span>
      <span class="pair" v-for="(val, key) in links">
       <label>
        <span class="key">
         {{key}}
        </span>
        :
       </label>
       <input class="value" v-model="links[key]"/>
      </span>
     </div>
    </div>
   </div>
   <div class="card">
    <div class="object">
     <span class="dec">
      var
     </span>
     <span class="name">
      {{varName}}
     </span>
     <span class="brackets">
      = {
     </span>
     <p class="brackets pairs">
      <span class="pair">
       <span class="key">
        career
       </span>
       :
       <span class="value">
        "{{career}}"
       </span>
       ,
      </span>
      <span class="pair">
       <span class="key">
        currentlyEmployed
       </span>
       :
       <span class="value bool">
        {{currentlyEmployed}}
       </span>
       ,
      </span>
      <span class="pair">
       <span class="key">
        currentStack
       </span>
       :
       <span class="value">
        "{{currentStack}}"
       </span>
       ,
      </span>
      <span class="pair">
       <span class="key">
        interests
       </span>
       :
       <span class="value">
        "{{interests}}"
       </span>
       ,
      </span>
      <span class="pair">
       <span class="key">
        location
       </span>
       :
       <span class="value">
        "{{location}}"
       </span>
       ,
      </span>
      <span class="pair">
       <span class="key">
        links
       </span>
       : {
       <span class="value" v-for="(value, key) of links">
        <a :href="value">
         {{key}}
        </a>
        ,
       </span>
       }
      </span>
     </p>
     <span class="brackets">
      };
     </span>
    </div>
   </div>
  </div>
 </body>
</html>
