<div class="np-card course-card np-card-container" style="padding-bottom: 1rem;">
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <div class="row">
        <div class="col-6 col-md-6">
          <h3 class="np-card-content-title recent-achievements">
            Recent<br>Achievements
          </h3>
        </div>
        <div class="col-6 col-md-6" style="text-align: right;">
          <button class="view-achievements-button" onclick="#" type="button">View all</button>
        </div>
      </div>
      <div class="horizontal-separator"></div>
    </div>
    <i class="achievement-icon far fa-trophy fa-5x"></i>
    <div class="np-card-content-title recent-achievements col-12" style="text-align: center;">
        <p>OpenWallet - Learning the basics</p>
    </div>
</div>

<style>
  .view-achievements-button {
    background-color: #030f3c;
    border: none;
    color: white;
    padding: 5px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
    border-radius: 30px;
    margin-top:12px;
  }

  .recent-achievements {
    font-size: 16px;
  }

  .achievement-icon {
    text-align: center;
    color: grey;
  }

  .horizontal-separator {
    border-bottom: 1px solid #3998b5;
  }

  @media screen and (max-width: 1200px) {
    .recent-achievements {
        font-size: 12px;
    }

  }

  @media screen and (max-width: 800px) {
    .view-achievements-button {
      font-size: 9px;
    }
  }


  </style>


