HOSN-app/app/src/components/profile-header/profile-header.html

<!-- Generated template for the ProfileHeaderComponent component -->
<div>
  <div class="profile-banner" [style.background]="'url('+ user.profile_banner_url +')'">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 300 100"
      xml:space="preserve" width="100%" class="svg-triangle">
      <polygon points="0,75  0,100 300,100 300,99" fill="#FFFFFF" />
    </svg>
    <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="avatar">
  </div>
  <div padding>
    <p class="profile-stats">{{ user.followers_count | friendlyNumber }} Followers | {{ user.friends_count | friendlyNumber }} Following</p>
    <p class="profile-description" *ngIf="user.description">{{ user.description }}</p>
    <div class="profile-infos">
      <span class="user-location" *ngIf="user.location">
        <ion-icon name="pin"></ion-icon>&nbsp;{{ user.location }}
      </span>
      <span class="user-website" *ngIf="user.url">
        <ion-icon name="link"></ion-icon>&nbsp;
        <span [innerHTML]="user.url | replaceUrls: user.entities.url.urls"></span>
      </span>
    </div>
  </div>
</div>