User Profile

index.html

<div class="sidebar">
  <div class="user">
    <div class="picture"></div>
    <div class="user-details">
      <span class="name">Kingturo</span>
      <span class="title">front end developer</span>
      <span class="tribe"></span>
    </div>
  </div>
</div>

style.less

.sidebar {
  width: 260px;
  height: 100%;
  background-color: #212121;
  
  .user {
    display: flex;
    height: 100px;
    padding: 14px 24px;
    align-items: center;
    
    .picture {
      width: 56px;
      height: 56px;
      border-radius: 100%;
      background-color: white;
    }
    
    .user-details {
      color: white;
      margin-left: 16px;
      
      span {
        display: block;
        
        &.name {
          text-transform: capitalize;
          font-size: 14px;
        }
        
        &.title {
          text-transform: uppercase;
          font-size: 11px;
        }
      }
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

user-profile.markdown

User Profile

A Pen by Kingturo on CodePen.

License.