---
layout: default
title: Profile Timeline
---

<!-- Container -->
<div class="container is-custom">
  <!-- Profile page main wrapper -->
  <div id="profile-main" 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/profile/timeline/timeline-header.html -->
        {{> timeline-header}}
      </div>
    </div>

    <div class="columns">
      <div id="profile-timeline-widgets" class="column is-4">
        <!-- Basic Infos widget -->
        <!-- html/partials/pages/profile/timeline/widgets/basic-infos-widget.html -->
        {{> basic-infos-widget}}

        <!-- Photos widget -->
        <!-- html/partials/pages/profile/timeline/widgets/photos-widget.html -->
        {{> photos-widget}}

        <!-- Star friends widget -->
        <!-- html/partials/pages/profile/timeline/widgets/star-friends-widget.html -->
        {{> star-friends-widget}}

        <!-- Videos widget -->
        <!-- html/partials/pages/profile/timeline/widgets/videos-widget.html -->
        {{> videos-widget}}

        <!-- Trips widget -->
        <!-- html/partials/pages/profile/timeline/widgets/trips-widget.html -->
        {{> trips-widget}}

        <div class="box-heading">
          <h4>Events</h4>
          <div class="dropdown is-neutral is-spaced is-right dropdown-trigger">
            <div>
              <div class="button">
                <i data-feather="more-vertical"></i>
              </div>
            </div>
            <div class="dropdown-menu" role="menu">
              <div class="dropdown-content">
                <a class="dropdown-item">
                  <div class="media">
                    <i data-feather="calendar"></i>
                    <div class="media-content">
                      <h3>All Events</h3>
                      <small>View all your events</small>
                    </div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="media">
                    <i data-feather="search"></i>
                    <div class="media-content">
                      <h3>Search</h3>
                      <small>Search for events.</small>
                    </div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="media">
                    <i data-feather="compass"></i>
                    <div class="media-content">
                      <h3>Suggestions</h3>
                      <small>View trendy suggestions.</small>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- Schedule calendar widget -->
        <!-- html/partials/widgets/schedule/schedule-widget.html -->
        {{> schedule-widget}}
      </div>

      <div class="column is-8">
        <div id="profile-timeline-posts" class="box-heading">
          <h4>Posts</h4>
          <div class="button-wrap">
            <button type="button" class="button is-active">Recent</button>
            <button type="button" class="button">Popular</button>
          </div>
        </div>

        <div class="profile-timeline">
          <!-- Timeline post 1 -->
          <!-- html/partials/pages/profile/posts/timeline-post1.html -->
          {{> timeline-post1}}

          <!-- Timeline post 2 -->
          <!-- html/partials/pages/profile/posts/timeline-post2.html -->
          {{> timeline-post2}}

          <!-- Timeline post 3 -->
          <!-- html/partials/pages/profile/posts/timeline-post3.html -->
          {{> timeline-post3}}

          <!-- Timeline post 4 -->
          <!-- html/partials/pages/profile/posts/timeline-post4.html -->
          {{> timeline-post4}}

          <!-- Timeline post 5 -->
          <!-- html/partials/pages/profile/posts/timeline-post5.html -->
          {{> timeline-post5}}

          <!-- Timeline post 6 -->
          <!-- html/partials/pages/profile/posts/timeline-post6.html -->
          {{> timeline-post6}}

          <!-- Timeline post 7 -->
          <!-- html/partials/pages/profile/posts/timeline-post7.html -->
          {{> timeline-post7}}
        </div>
      </div>
    </div>
  </div>
  <!-- /Profile page main wrapper -->
</div>
<!-- /Container -->

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

<!-- Share modal -->
<!-- /partials/pages/feed/modals/share-modal.html -->
{{> share-modal}}