---
layout: navbar-v2
title: Feed Profile
---

<div id="profile-feed" class="navbar-v2-wrapper">
  <!--Feed Profile-->
  <div class="feed-profile-wrapper">
    <!--Profile section-->
    <div class="profile-wrapper">
      <!--Avatar-->
      <div class="profile-avatar-wrapper">
        <a class="button">
          <i data-feather="chevron-left"></i>
        </a>
        <div class="avatar-wrap">
          <img
            src="https://via.placeholder.com/150x150"
            data-demo-src="assets/img/avatars/jenna.png"
            data-user-popover="0"
            alt=""
          />
          <div class="badge">
            <i data-feather="check"></i>
          </div>
        </div>
        <a class="button">
          <i data-feather="chevron-right"></i>
        </a>
      </div>

      <!--Stats-->
      <div class="user-stats">
        <div class="stat-block">
          <span>518</span>
          <span>Posts</span>
        </div>
        <div class="stat-block">
          <span>220k</span>
          <span>Followers</span>
        </div>
        <div class="stat-block">
          <span>197</span>
          <span>Following</span>
        </div>
      </div>
      <div class="button-wrap">
        <button class="button is-solid secondary-button is-fullwidth raised">
          Follow
        </button>
      </div>

      <!--Bio-->
      <div class="user-bio">
        <h4>Jenna Davis</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iam enim
          adesse poterit. Quis est tam dissimile homini. At ille pellit, qui
          permulcet sensum voluptate.
        </p>
        <a>friendkit.co/jennadavis</a>
      </div>

      <!--Connections-->
      <div class="connections">
        <a class="connection">
          <div class="connection-avatar">
            <img
              class="avatar"
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/dan.jpg"
              data-user-popover="1"
              alt=""
            />
          </div>
        </a>
        <a class="connection">
          <div class="connection-avatar">
            <img
              class="avatar"
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
              data-page-popover="0"
              alt=""
            />
          </div>
        </a>
        <a class="connection">
          <div class="connection-avatar">
            <img
              class="avatar"
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/stella.jpg"
              data-user-popover="2"
              alt=""
            />
          </div>
        </a>
        <a class="connection">
          <div class="connection-avatar">
            <img
              class="avatar"
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/vector/icons/logos/metamovies.svg"
              data-user-popover="2"
              alt=""
            />
          </div>
        </a>
        <a class="connection">
          <div class="connection-avatar">
            <img
              class="avatar"
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/edward.jpeg"
              data-user-popover="5"
              alt=""
            />
          </div>
        </a>
        <a class="connection">
          <div class="connection-avatar">
            <img
              class="avatar"
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/elise.jpg"
              data-user-popover="6"
              alt=""
            />
          </div>
        </a>
        <a class="connection">
          <div class="connection-avatar">
            <img
              class="avatar"
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/bobby.jpg"
              data-user-popover="8"
              alt=""
            />
          </div>
        </a>
        <a class="connection">
          <div class="connection-avatar">
            <img
              class="avatar"
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/milly.jpg"
              data-user-popover="7"
              alt=""
            />
          </div>
        </a>
        <a class="connection">
          <div class="connection-avatar">
            <img
              class="avatar"
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/vector/icons/logos/drop.svg"
              data-user-popover="10"
              alt=""
            />
          </div>
        </a>
      </div>

      <div class="more-connections">
        <a>View More</a>
      </div>
    </div>

    <!--Posts Grid-->
    <div class="posts-wrapper">
      <div class="columns is-multiline">
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/39.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/39.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/51.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/51.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/47.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/47.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/43.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/43.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/40.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/40.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/35.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/35.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/46.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/46.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/18.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/18.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/33.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/33.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/32.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/32.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/12.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/12.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/49.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/49.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/54.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/54.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/34.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/34.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>