<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend">
    <i data-feather="star"></i>
  </div>
  <div class="img-container">
    <img
      class="avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/amadou.jpg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/senegal.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Amadou Diop</h3>
    <p>Sales Manager</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">728</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">184</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">226</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend">
    <i data-feather="star"></i>
  </div>
  <div class="img-container">
    <img
      class="avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/roxane.jpg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/france.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Roxane Blanchart</h3>
    <p>Head of Marketing</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">1.5k</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">551</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">2.5k</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend">
    <i data-feather="star"></i>
  </div>
  <div class="img-container">
    <img
      class="avatar is-placeholder"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/placeholder-m.jpg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/canada.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>John Stanley</h3>
    <p>Accountant</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">412</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">95</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">168</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend">
    <i data-feather="star"></i>
  </div>
  <div class="img-container">
    <img
      class="avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/luis.png"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/spain.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Luis Carrillo Estrella</h3>
    <p>Graphic Designer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">3k</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">378</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">1.1k</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend">
    <i data-feather="star"></i>
  </div>
  <div class="img-container">
    <img
      class="avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/hisashi.jpg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/japan.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Hisashi Yokida</h3>
    <p>Scientist</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">8k</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">1.2k</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">28.2k</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend">
    <i data-feather="star"></i>
  </div>
  <div class="img-container">
    <img
      class="avatar is-placeholder"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/placeholder-f.jpg"
      alt=""
    />
    <img
      class="country"
      src="assets/img/icons/flags/united-states-of-america.svg"
      alt=""
    />
  </div>
  <div class="friend-info">
    <h3>Emily Statterfield</h3>
    <p>Teacher</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">72</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">3</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">25</div>
    </div>
  </div>
</div>
