<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend is-active">
    <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/dan.jpg"
      alt=""
    />
    <img
      class="country"
      src="assets/img/icons/flags/united-states-of-america.svg"
      alt=""
    />
  </div>
  <div class="friend-info">
    <h3>Dan Walker</h3>
    <p>WordPress Developer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">478</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">293</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">899</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend is-active">
    <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/david.jpg"
      alt=""
    />
    <img
      class="country"
      src="assets/img/icons/flags/united-states-of-america.svg"
      alt=""
    />
  </div>
  <div class="friend-info">
    <h3>David Kim</h3>
    <p>Senior Developer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">642</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">112</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">468</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend is-active">
    <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/daniel.jpg"
      alt=""
    />
    <img
      class="country"
      src="assets/img/icons/flags/united-kingdom.svg"
      alt=""
    />
  </div>
  <div class="friend-info">
    <h3>Daniel Wellington</h3>
    <p>Sales Manager</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">465</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">41</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">174</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend is-active">
    <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/stella.jpg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/germany.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Stella Bergmann</h3>
    <p>Social Influencer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">8.7k</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">528</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">25.4k</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend is-active">
    <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/edward.jpeg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/ireland.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Edward Mayers</h3>
    <p>Data Scientist</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">612</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">58</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">82</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend is-active">
    <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/nelly.png"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/australia.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Nelly Schwartz</h3>
    <p>Student</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">874</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">890</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend is-active">
    <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/rolf.jpg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/germany.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Rolf Krupp</h3>
    <p>Fashion Designer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">2.3k</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">351</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">6.7k</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend is-active">
    <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/elise.jpg"
      alt=""
    />
    <img
      class="country"
      src="assets/img/icons/flags/united-kingdom.svg"
      alt=""
    />
  </div>
  <div class="friend-info">
    <h3>Elise Walker</h3>
    <p>Social Influencer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">15.7k</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">857</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">22.9k</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend is-active">
    <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/milly.jpg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/italy.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Milly Augustine</h3>
    <p>Lawyer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">567</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">142</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">629</div>
    </div>
  </div>
</div>
<!--Friend-->
<div class="card-flex friend-card">
  <div class="star-friend is-active">
    <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/azzouz.jpg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/france.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Azzouz El Paytoun</h3>
    <p>Unemployed</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">336</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">158</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">748</div>
    </div>
  </div>
</div>
