<div id="event-3" class="event-details-wrap">
  <div class="meta-block">
    <i class="mdi mdi-earth"></i>
    <div class="meta">
      <span>Public</span>
      <span>This is a public event</span>
    </div>
  </div>
  <div class="meta-block">
    <i class="mdi mdi-map-marker"></i>
    <div class="meta">
      <span>Where</span>
      <span>@ Frank's appartment</span>
    </div>
  </div>
  <div class="meta-block">
    <i class="mdi mdi-progress-clock"></i>
    <div class="meta">
      <span>When</span>
      <span>08:00pm - 02:00am</span>
    </div>
  </div>
  <div class="participants-wrap">
    <label>29 Participants</label>
    <div class="participants">
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/avatars/jenna.png"
        alt=""
        data-user-popover="0"
      />
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/avatars/elise.jpg"
        alt=""
        data-user-popover="6"
      />
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/avatars/daniel.jpg"
        alt=""
        data-user-popover="3"
      />
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/avatars/rolf.jpg"
        alt=""
        data-user-popover="13"
      />
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/avatars/milly.jpg"
        alt=""
        data-user-popover="7"
      />
      <div class="is-more">+24</div>
    </div>
  </div>
  <div class="event-description">
    <label>Description</label>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
      blanditiis commodi accusamus dolores itaque repudiandae.
    </p>
  </div>
  <hr />
  <div class="button-wrap">
    <a class="button is-bold">Participating</a>
    <a class="button is-bold">Details</a>
  </div>
</div>
