A Pen by Hendra Susanto.

index.slim

.container
  .profile-box
    .profile-cover-image
      img(src="http://api.randomuser.me/0.3/portraits/men/2.jpg")
    .profile-picture
      img(src="http://api.randomuser.me/0.3/portraits/men/2.jpg")
    .profile-content
      h1 John Doe
      p Designer at Doe's Company,<br>ridiculously skilled.
      .socials
        a(href="#")
          i.fa.fa-dribbble
        a(href="#")
          i.fa.fa-twitter
        a(href="#")
          i.fa.fa-github

Profile-Box-Widget.markdown

Profile Box Widget

Based on the shot here.

http://dribbble.com/shots/1413877-Abandoned-Personal-Site-Idea

A Pen by Hendra Susanto on CodePen.

License.

style.scss

@import "compass";
body {
  font-family: Lato;
  background: #bada55;
}

.container {
  margin: 50px auto;
  width: 400px;
}

a {
  display: inline-block;
  transition: all ease 0.3s;
}

$coverImageHeight: 300px;

.profile-box {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  
  .profile-picture {
    position: absolute;
    top: $coverImageHeight - 60px;
    left: 50%;
    margin-left: -55px;
    
    img {
      border: 5px solid #fff;
      border-radius: 100%;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
      width: 100px;
      height: 100px;
    }
  }
}

.profile-cover-image {
  height: $coverImageHeight;
  overflow: hidden;
  
  img {
    width: 100%;
  }
}

.profile-content {
  padding: 40px 20px;
  text-align: center;
  
  h1 {
    font-weight: normal;
    margin-bottom: 0.2em;
  }
  
  p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #d2d2d2;
  }
  
  .socials {
    a {
      color: #d2d2d2;
      margin: 0 15px;
      font-size: 1.6em;
      transform: translateY(4px);
      
      &:hover {
        color: #aaa;
        transform: translateY(0);
      }
    }
  }
}