A Pen by Mustafa ismail .

index.html

<section>
    
    <header class="clearfix">
      <div class="liks">
        <i class="icon"></i>
        <span>255</span>
      </div>
      <div class="user">
        <div class="avatar">
          <img alt="Dwayne Johnson" src="http://i.imgur.com/DmPjhGo.jpg">
        </div>
        <h2>Dwayne Johnson</h2>
        <p>Actor</p>
        <a href="#" class="follow"><span>+</span>Follow</a>
      </div>
      
    </header>
    
    <ul class="menu">
      <li><a href="#" class="active profile">Profile</a></li>
      <li><a href="#" class="timeline">Timeline</a></li>
      <li><a href="#" class="podcast">Podcast</a></li>
    </ul>
    
  </section>
  
  <p class="copyrights">
    Designed by
    <a href='https://dribbble.com/shots/1518589-Profile'>vikas1307</a>
    and coded by
    <a href='http://codepen.io/mustafaismail22/'>Mustafa ismail</a>
  </p>

Profile-Widget.markdown

Profile Widget

A Pen by Mustafa ismail on CodePen.

License.

style.sass

body
  background-color: #e3e5e7
  font: normal 16px/22px "GothamRoundedLight", sans-serif
    
.clearfix:after
  content: ""
  display: block
  clear: both
  visibility: hidden
  font-size: 0
  height: 0

.clearfix
  *display: inline-block
  
section
  width: 420px
  background: #fff
  position: relative
  margin: 50px auto
  padding: 0 0 4px
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.2)
  z-index: 0
  
  &:after
    position: absolute
    left: 4px
    top: 4px
    bottom: 4px
    content: ""
    background: #f6f6f6
    width: 84px
    z-index: -1
    
    
  header
    text-align: center
    width: 100%
    
    .user
      float: right
      width: 335px
      padding: 30px 0
    
      .avatar
        margin:  0 auto
        width: 150px
        height: 150px
        border-radius: 100%
        background-color: #fff

        img 
          display: block
          width: 100%
          height: 100%
          border-radius: 100%
      h2
        margin: 15px 0 0 
        color: #000
        font: normal 24px/1 "GothamRoundedMedium", sans-serif
      p
        color: #b0b0b0
        font-size: 18px
        margin: 15px 0 0 

      a.follow
        display: inline-block
        border-radius: 50px
        background: #23f3ac
        text-decoration: none
        width: 180px
        height: 50px
        margin: 15px 0 0
        color: #fff
        font: normal 18px/50px "GothamRoundedBold", sans-serif
        transition: all ease .2s
        
        span
          font-size: 20px
          margin-right: 5px
          
        &:hover
          opacity: .7
    
    .liks
      padding: 15px 0
      float: left
      width: 85px
      
      .icon
        background: #fff url(http://i.imgur.com/p6pVEjp.png) no-repeat center
        width: 55px
        height: 55px
        border-radius: 100%
        display: inline-block
      span
        display: inline-block
        background: #fff
        border-radius: 20px
        width: 40px
        height: 20px
        font: normal 13px/20px "GothamRoundedBold", sans-serif
    
  .menu
    list-style: none
    margin: 0 
    padding: 0
      
    a
      display: block
      text-decoration: none
      padding: 30px 0 30px 120px
      font-size: 20px
      color: #b2b2b2
      border-left: 4px solid #fff
      background: rgba(232, 232, 232, 0.4)  url(http://i.imgur.com/bdUSt1u.png) no-repeat 26px center
      transition: all ease .2s
        
      &:hover 
        padding-left: 130px
        color: #787878
        border-color: #f67878
        
      &.active
        border-color: #f67878
        color: #787878
        font-family: 'GothamRoundedMedium' , sans-serif
 
      &.timeline
        background-image: url(http://i.imgur.com/5eFnzAS.png)
        background-color: transparent
        
      &.podcast
        background-image: url(http://i.imgur.com/ZnwPYeb.png)
      
.copyrights
  text-align: center
  text-transform: capitalize
  margin: 50px
  a
    text-decoration: none
    color: #f67878