Glovo Signature

Signature for employees

by Paulo Ávila

HTML

<div style="font-weight:600;letter-spacing:.8px;color:#3f3f3f;text-decoration:none;font-family:'Avenir Next',Avenir,Helvetica,sans-serif;font-size:12px;">
    Paulo Ávila
  </div>
  <div style="font-weight:6px;letter-spacing:.5px;color:#2ABB9b;text-decoration:none;font-family:'Avenir Next',Avenir,Helvetica,sans-serif;font-size:12px;">
    Senior Product Manager
  </div>
  <div style="color:#000000;color:#bfbebe;font-family:'Avenir Next',Avenir,Helvetica,sans-serif;font-size:12px;">
    Barcelona, Spain
  </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"));
});

$("#f_email").on("propertychange change keyup paste input", function(event) {
  var $this = $(this)
  var val = $.trim($this.val())
  var email = val ? val : $this.attr("placeholder")
  $("#sig_name").attr("href", "mailto:" + email);
  $("#sig_title").attr("href", "mailto:" + email);
});