<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,300,700' rel='stylesheet' type='text/css'>

<!-- Custom Element -->
<author-card data-image="https://avatars3.githubusercontent.com/u/5623751?v=3&s=460" data-name="Fili Santillán" data-country="México" data-url="http://filisantillan.com"></author-card>
body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Josefin Sans', sans-serif;
  color: white;
}

/* Author-card */
author-card{
  text-align: center;
  padding: 3em 1.5rem;
  background: #1E252A;
  border-radius: 7px;
}

/* Author-card Image*/
author-card::shadow .x-image{
  transition: 1s;
}

/* Author-card Image animation*/
author-card::shadow .x-image:hover{
  transform: rotate(360deg);
}

/* Author-card Name*/
author-card::shadow .x-name{
  color: #4299D4;
  font-size: 3.5rem;
  margin: 3rem 0 0.5rem 0;
}

/* Author-card Country*/
author-card::shadow .x-country{
  display: block;
  font-size: 2rem;
  font-weight: 700;
}

/* Author-card Button*/
author-card::shadow .x-button{
  padding: 0.8rem 2rem;
  display: inline-block;
  text-decoration: none;
  color: #1E252A;
  background: #4299D4;
  border-radius: 5px;
  box-shadow: 4px 4px white;
  font-size: 1.2rem;
  margin: 0.8rem 0 0 0;
  transition: 0.3s;
}

/* Author-card Button animation*/
author-card::shadow .x-button:hover{
  transform: scale(1.1);
}
var authorCard = Object.create(HTMLElement.prototype);

authorCard.createdCallback = function() {

    var shadow = this.createShadowRoot();
    
    // Image
    var image = document.createElement("img");
    image.src = this.getAttribute("data-image");
    image.alt = this.getAttribute("data-name");
    image.width = "150";
    image.height = "150";
    image.className = "x-image";
  
    shadow.appendChild(image);
    
    // Name
    var name = document.createElement("h1");
    name.innerText = this.getAttribute('data-name');
    name.className = "x-name";
  
    shadow.appendChild(name);
    
    // Country
    var country = document.createElement("span");
    country.innerText = this.getAttribute('data-country');
    country.className = "x-country";
  
    shadow.appendChild(country);
    
    //Button
    var button = document.createElement("a");
    button.innerText = "Web Site";
    button.href = this.getAttribute("data-url");
    button.target = "blank";
    button.className = "x-button";
  
    shadow.appendChild(button);
};

var xAuthorCard = document.registerElement("author-card", { 
    prototype: authorCard
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.