Glovo Signature

Signature for employees

by Paulo Ávila

HTML

<div style="font-family:'Avenir Next',Avenir,Helvetica,sans-serif;color:#000000;font-size:12px;">
  <div style="font-weight:600;letter-spacing:.8px;color:#3f3f3f">
    Oscar Pierre
  </div>
  <div style="font-weight:6px;letter-spacing:.5px;color:#2ABB9b;">
    Co-Founder
  </div>
  <div style="color:#bfbebe;">
    Barcelona, Spain
  </div>
</div>

CSS

#wrapper {
    padding: 10px 20px 20px;
    border: 0px dashed #ccc;
    border-radius: 10px;
    display: inline-block;
}

form {
    margin: 0 0 20px;
}

.signature {
  display: flex;
  align-items: flex-start;
}

.signature img {
  margin-top: 18px;
}

JavaScript

$("#f_name").on("propertychange change keyup paste input", function(event) {
  var $this = $(this)
  var val = $.trim($this.val())
  $("#sig_name").text(val ? val : $this.attr("placeholder"));
});

$("#f_title").on("propertychange change keyup paste input", function(event) {
  var $this = $(this)
  var val = $.trim($this.val())
  $("#sig_title").text((val ? val : $this.attr("placeholder")));
});

$("#f_phone").on("propertychange change keyup paste input", function(event) {
  var $this = $(this)
  var val = $.trim($this.val())
  $("#sig_phone").text(val ? val : $this.attr("placeholder"));
});

$("#f_location").on("propertychange change keyup paste input", function(event) {
  var $this = $(this)
  var val = $.trim($this.val())
  $("#sig_location").text(val ? val : $this.attr("placeholder"));
});