---
layout: default
title: Page Profile
---

<!-- Container -->
<div class="container is-custom">
  <!-- Profile page main wrapper -->
  <div id="pages-community" class="view-wrap is-headless">
    <div class="columns is-multiline no-margin">
      <!-- Left side column -->
      <div class="column is-paddingless">
        <!-- Timeline Header -->
        <!-- html/partials/pages/pages/page-profile-header.html -->
        {{> page-profile-header}}
      </div>
    </div>

    <div class="columns has-portrait-padding">
      <div class="column is-4">
        <!-- Community widget -->
        <!-- html/partials/pages/widgets/page-community-widget.html -->
        {{> page-community-widget}}
      </div>

      <div class="column is-8">
        <div class="community-content">
          <div class="community-info">
            <div class="page-followers">
              <div class="header">
                <h3>Followers</h3>
              </div>
              <div class="followers">
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/nelly.png"
                    data-user-popover="9"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/leana.jpg"
                    data-user-popover="15"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/azzouz.jpg"
                    data-user-popover="20"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/elise.jpg"
                    data-user-popover="6"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/david.jpg"
                    data-user-popover="4"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/edward.jpeg"
                    data-user-popover="5"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/dan.jpg"
                    data-user-popover="1"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/brian.jpg"
                    data-user-popover="19"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/milly.jpg"
                    data-user-popover="7"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/daniel.jpg"
                    data-user-popover="3"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/ken.jpg"
                    data-user-popover="14"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/cathy.png"
                    data-user-popover="21"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/bob.png"
                    data-user-popover="22"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/greg.png"
                    data-user-popover="23"
                    alt=""
                  />
                </a>
                <a class="follower">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/hisashi.jpg"
                    data-user-popover="24"
                    alt=""
                  />
                </a>
              </div>
              <!-- Show More -->
              <div class="more-followers">
                <a>Show More</a>
              </div>
            </div>
          </div>
          <div class="community-widgets">
            <div class="page-counts">
              <div class="like-count">
                <span>78K</span>
                <span>Likes</span>
              </div>
              <div class="follow-count">
                <span>148K</span>
                <span>Followers</span>
              </div>
            </div>

            <div class="page-invites">
              <div class="header">
                <h3>Invite your friends</h3>
                <div class="control">
                  <input
                    type="text"
                    class="input"
                    placeholder="Search your friends..."
                  />
                  <div class="search-icon">
                    <i data-feather="search"></i>
                  </div>
                </div>
              </div>
              <div class="suggestions">
                <div class="suggestion">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/aline.jpg"
                    data-user-popover="16"
                    alt=""
                  />
                  <div class="meta">
                    <span>Aline</span>
                  </div>
                  <a class="button">Invite</a>
                </div>
                <div class="suggestion">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/bobby.jpg"
                    data-user-popover="8"
                    alt=""
                  />
                  <div class="meta">
                    <span>Bobby</span>
                  </div>
                  <a class="button">Invite</a>
                </div>
                <div class="suggestion">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/rolf.jpg"
                    data-user-popover="13"
                    alt=""
                  />
                  <div class="meta">
                    <span>Rolf</span>
                  </div>
                  <a class="button">Invite</a>
                </div>
                <div class="suggestion">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/stella.jpg"
                    data-user-popover="2"
                    alt=""
                  />
                  <div class="meta">
                    <span>Stella</span>
                  </div>
                  <a class="button">Invite</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Change cover image modal -->
<!--html/partials/pages/profile/timeline/modals/change-cover-modal.html-->
{{> change-cover-modal}}

<!-- Change profile pic modal -->
<!--html/partials/pages/profile/timeline/modals/change-profile-pic-modal.html-->
{{> change-profile-pic-modal}}

<!-- User photos and albums -->
<!--html/partials/pages/profile/timeline/modals/user-photos-modal.html-->
{{> user-photos-modal}}

<!-- Profile picture crop modal -->
<!--html/partials/pages/profile/timeline/modals/upload-crop-profile-modal.html-->
{{> upload-crop-profile-modal}}

<!-- Cover image crop modal -->
<!--html/partials/pages/profile/timeline/modals/upload-crop-cover-modal.html-->
{{> upload-crop-cover-modal}}