---
layout: navbar-v1-white
title: Feed Profile
---

<!--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>