<!--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">
    <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/bob.png"
      alt=""
    />
    <img
      class="country"
      src="assets/img/icons/flags/united-states-of-america.svg"
      alt=""
    />
  </div>
  <div class="friend-info">
    <h3>Bob Barker</h3>
    <p>Software Engineer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">428</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">531</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">663</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/lana.jpeg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/finland.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Lana Henrikssen</h3>
    <p>Fashion Designer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">1.2k</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">632</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">2.8k</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/brian.jpg"
      alt=""
    />
    <img
      class="country"
      src="assets/img/icons/flags/united-states-of-america.svg"
      alt=""
    />
  </div>
  <div class="friend-info">
    <h3>Brian Stevenson</h3>
    <p>Accountant</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">274</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">51</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">223</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">
    <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>Tina Holmes</h3>
    <p>Happy Grandmother</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>
<!--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/mike.jpg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/canada.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Mike Lasalle</h3>
    <p>Business Owner</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">439</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">19</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">32</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/united-states-of-america.svg"
      alt=""
    />
  </div>
  <div class="friend-info">
    <h3>Garry Carter</h3>
    <p>Businessman</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">265</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">65</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">429</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">
    <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/gaelle.jpeg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/france.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Gaelle Morris</h3>
    <p>Business Angel</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">1.3k</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">261</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">951</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">
    <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/greg.png"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/south-africa.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Greg Patel</h3>
    <p>Web Designer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">1.3k</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">712</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">2.9k</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/wayne.png"
      alt=""
    />
    <img
      class="country"
      src="assets/img/icons/flags/united-states-of-america.svg"
      alt=""
    />
  </div>
  <div class="friend-info">
    <h3>Wayne Krascinsky</h3>
    <p>Designer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">654</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">229</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">498</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">
    <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/chems.jpg"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/switzerland.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Frida Svenson</h3>
    <p>Interior Design</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">2k</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">218</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">884</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/nikos.png"
      alt=""
    />
    <img class="country" src="assets/img/icons/flags/greece.svg" alt="" />
  </div>
  <div class="friend-info">
    <h3>Nikos Markopoulos</h3>
    <p>Shipyard Engineer</p>
  </div>
  <div class="friend-stats">
    <div class="stat-block">
      <label>Friends</label>
      <div class="stat-number">687</div>
    </div>
    <div class="stat-block">
      <label>Posts</label>
      <div class="stat-number">65</div>
    </div>
    <div class="stat-block">
      <label>Likes</label>
      <div class="stat-number">118</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/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>
<!--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>
