.card
  %h1
    Luke Skywalker
  %img{src: "http://static.wix.com/media/9173d6_b6e7d7a2d6e92e1a1da9aefda77fa7d7.jpg_256"}
  %p.bio
    Luke Skywalker was the son of Anakin Skywalker and Padmé Amidala, and the older twin brother of Leia Organa Solo. He was a Jedi Master and hero of the Galactic Civil War. A celebrated pilot and leader, Skywalker was most famous for destroying the first Death Star and prompting Darth Vader to kill Emperor Palpatine, which led to the eventual downfall of the Galactic Empire.

.comment
  If you didn't catch the animation, hit Cmd + Shift + 5 or refresh the page :)

@import compass

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab)
@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:300)

*
  box-sizing: border-box

body
  background-color: #2C2D3D

.card
  width: 600px
  margin: 40px auto
  background-color: #F7F7E9
  color: #444
  overflow: hidden // clearfix
  box-shadow: 5px 5px 0 0 #aaa
  
  h1
    margin: 0
    padding: 20px
    text-align: center
    font:
      family: Roboto Slab
      weight: 400
    background-color: #4DD65F
    animation: fadein 1.2s
    
  img
    float: left
    width: 200px
    height: 200px
    margin: 20px
    position: relative
    z-index: 1
    animation: grow 0.6s
    
  .bio
    position: relative
    margin: 20px
    font-family: Merriweather Sans
    animation: slidein 1.2s
      
@keyframes fadein
  from
    color: hsla(0, 0, 0, 0)
  to
    color: inherit

@keyframes grow
  from
    transform: scale(0)
  80%
    transform: scale(1.1)
  to
    transform: scale(1)

@keyframes slidein
  from
    opacity: 0
  49.9%
    opacity: 0
  50%
    left: -240px
  to
    left: 0

.comment
  font:
    family: Merriweather Sans
    size: 12px
  color: #ddd
  text-align: center