Username

<header class="masthead-user">
  <div class="container-center">
    <div class="masthead-content">
      <div class="masthead-left">
        <a class="masthead-link" href="/">
          <i class="las la-arrow-left"></i> Back
        </a>
      </div>

      <div class="masthead-main">
        <div class="user-rating-4 user-rating-lg">
          <img class="avatar" src="./../../assets/images/placeholder-user-avatar-1.jpg" alt="User avatar">
        </div>

        <div class="masthead-main-content">
          <h1 class="masthead-title">
            Username  
          </h1>

          <p class="masthead-paragraph">
            Allow users to add a short status if desired (80 character limit)
          </p>

          <ul class="masthead-main-list">
            <li class="masthead-main-list-item">
              <a class="masthead-main-list-link" href="/">204 followers</a> ·
            </li>

            <li class="masthead-main-list-item">
              <a class="masthead-main-list-link" href="/">111 following</a>
            </li>
          </ul>

          <a class="btn-add" href="/" role="button">
            <i class="las la-plus"></i>
            Follow
          </a>
        </div>
      </div>

      <div class="masthead-section">
        <h4 class="masthead-title-secondary">
          Achievements
        </h4>

        <div class="masthead-achievements-content">
          <div class="badge-achievement-gold">
            <span class="badge-achievement-dot"></span>
            3
          </div>  

          <div class="badge-achievement-silver">
            <span class="badge-achievement-dot"></span>
            5
          </div> 

          <div class="badge-achievement-bronze">
            <span class="badge-achievement-dot"></span>
            1
          </div> 
        </div>
      </div> 

      <div class="masthead-section">
        <h4 class="masthead-title-secondary">
          Rating
        </h4>

        <span class="masthead-rating-content">
          <strong>143</strong> ± 0
        </span>
      </div>

      <div class="masthead-section">
        <h4 class="masthead-title-secondary">
          Rating
        </h4>

        <span class="masthead-rating-content">
          #13
        </span>
      </div>

      <div class="masthead-section">
        <h4 class="masthead-title-secondary">
          Name
        </h4>

        <span class="masthead-name-content">
          Full name
        </span>
      </div>

      <div class="masthead-section">
        <h4 class="masthead-title-secondary">
          Location
        </h4>

        <span class="masthead-location-content">
          City, Country
        </span>
      </div>

      <div class="masthead-section">
        <h4 class="masthead-title-secondary">
          Connect
        </h4>

        <ul class="masthead-list">
          <li class="masthead-list-item">
            <a class="masthead-list-link" href="/">
              GitHub
            </a>
          </li>

          <li class="masthead-list-item">
            <a class="masthead-list-link" href="/">
              LinkedIn
            </a>
          </li>

          <li class="masthead-list-item">
            <a class="masthead-list-link" href="/">
              Personal
            </a>
          </li>

          <li class="masthead-list-item">
            <a class="masthead-list-link" href="/">
              Twitter
            </a>
          </li>
        </ul>
      </div>

      <div class="masthead-section">
        <h4 class="masthead-title-secondary">
          Organization
        </h4>

        <span class="masthead-location-content">
          Organization name
        </span>
      </div>
    </div>
  </div>
</header>