<!-- 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
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.