---
title: Projects
body_class: app-projects
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/jquery-selective/jquery-selective.css">
  {{/content}}

  {{#content "css" mode="prepend"}}
    <link rel="stylesheet" href="{{assets}}/examples/css/apps/projects.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/jquery-selective/jquery-selective.min.js"></script>
    <script src="{{global}}/vendor/bootbox/bootbox.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{global}}/js/Plugin/animate-list.js"></script>
    <script src="{{global}}/js/Plugin/bootbox.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{assets}}/js/Site.js"></script>
    <script src="{{assets}}/js/App/Projects.js"></script>
  {{/content}}

  {{#content "scripts" mode="replace"}}
    <script src="{{assets}}/examples/js/apps/projects.js"></script>
  {{/content}}

  {{#content "body"}}

    <div class="page">
      <div class="page-header">
        <h1 class="page-title">Projects</h1>
        <div class="page-header-actions">
          <form>
            <div class="input-search input-search-dark">
              <i class="input-search-icon md-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="" placeholder="Search...">
            </div>
          </form>
        </div>
      </div>
      <div class="page-content">
        <div class="projects-sort">
          <span class="projects-sort-label">Sorted by : </span>
          <div class="inline-block dropdown">
            <span id="projects-menu" data-toggle="dropdown" aria-expanded="false" role="button">
              Dropdown
              <i class="icon md-chevron-down" aria-hidden="true"></i>
            </span>
            <div class="dropdown-menu animation-scale-up animation-top-left animation-duration-250"
              aria-labelledby="projects-menu" role="menu">
              <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1">Sort One</a>
              <a class="active dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1">Sort Two</a>
              <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1">Sort Three</a>
            </div>
          </div>
        </div>
        <div class="projects-wrap">
          <ul class="blocks blocks-100 blocks-xxl-5 blocks-lg-4 blocks-md-3 blocks-sm-2"
            data-plugin="animateList" data-child=">li">
            <li>
              <div class="panel">
                <figure class="overlay overlay-hover animation-hover">
                  <img class="caption-figure overlay-figure" src="{{global}}/photos/placeholder.png">
                  <figcaption class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <div class="btn-group">
                      <div class="dropdown float-left">
                        <button type="button" class="btn btn-icon btn-pure btn-default" title="Setting"><i class="icon md-settings" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="">Copy</a>
                          <a class="dropdown-item" href="">Rename</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-icon btn-pure btn-default" title="Delete"
                        data-tag="project-delete"><i class="icon md-delete" aria-hidden="true"></i></button>
                    </div>
                    <button type="button" class="btn btn-inverse project-button">View Project</button>
                  </figcaption>
                </figure>
                <div class="time float-right">Feb 22, 2017</div>
                <div class="text-truncate">Lorem ipsum</div>
              </div>
            </li>
            <li>
              <div class="panel">
                <figure class="overlay overlay-hover animation-hover">
                  <img class="caption-figure overlay-figure" src="{{global}}/photos/placeholder.png">
                  <figcaption class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <div class="btn-group">
                      <div class="dropdown float-left">
                        <button type="button" class="btn btn-icon btn-pure btn-default" title="Setting"><i class="icon md-settings" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="">Copy</a>
                          <a class="dropdown-item" href="">Rename</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-icon btn-pure btn-default" title="Delete"
                        data-tag="project-delete"><i class="icon md-delete" aria-hidden="true"></i></button>
                    </div>
                    <button type="button" class="btn btn-inverse project-button">View Project</button>
                  </figcaption>
                </figure>
                <div class="time float-right">Mar 10, 2017</div>
                <div class="text-truncate">Voluptate pariatur</div>
              </div>
            </li>
            <li>
              <div class="panel">
                <figure class="overlay overlay-hover animation-hover">
                  <img class="caption-figure overlay-figure" src="{{global}}/photos/placeholder.png">
                  <figcaption class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <div class="btn-group">
                      <div class="dropdown float-left">
                        <button type="button" class="btn btn-icon btn-pure btn-default" title="Setting"><i class="icon md-settings" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="">Copy</a>
                          <a class="dropdown-item" href="">Rename</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-icon btn-pure btn-default" title="Delete"
                        data-tag="project-delete"><i class="icon md-delete" aria-hidden="true"></i></button>
                    </div>
                    <button type="button" class="btn btn-inverse project-button">View Project</button>
                  </figcaption>
                </figure>
                <div class="time float-right">Mar 8, 2017</div>
                <div class="text-truncate">Laboris Excepteur</div>
              </div>
            </li>
            <li>
              <div class="panel">
                <figure class="overlay overlay-hover animation-hover">
                  <img class="caption-figure overlay-figure" src="{{global}}/photos/placeholder.png">
                  <figcaption class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <div class="btn-group">
                      <div class="dropdown float-left">
                        <button type="button" class="btn btn-icon btn-pure btn-default" title="Setting"><i class="icon md-settings" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="">Copy</a>
                          <a class="dropdown-item" href="">Rename</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-icon btn-pure btn-default" title="Delete"
                        data-tag="project-delete"><i class="icon md-delete" aria-hidden="true"></i></button>
                    </div>
                    <button type="button" class="btn btn-inverse project-button">View Project</button>
                  </figcaption>
                </figure>
                <div class="time float-right">June 22, 2017</div>
                <div class="text-truncate">Consequat ullamco</div>
              </div>
            </li>
            <li>
              <div class="panel">
                <figure class="overlay overlay-hover animation-hover">
                  <img class="caption-figure overlay-figure" src="{{global}}/photos/placeholder.png">
                  <figcaption class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <div class="btn-group">
                      <div class="dropdown float-left">
                        <button type="button" class="btn btn-icon btn-pure btn-default" title="Setting"><i class="icon md-settings" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="">Copy</a>
                          <a class="dropdown-item" href="">Rename</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-icon btn-pure btn-default" title="Delete"
                        data-tag="project-delete"><i class="icon md-delete" aria-hidden="true"></i></button>
                    </div>
                    <button type="button" class="btn btn-inverse project-button">View Project</button>
                  </figcaption>
                </figure>
                <div class="time float-right">Apr 30, 2017</div>
                <div class="text-truncate">Eiusmod amet</div>
              </div>
            </li>
            <li>
              <div class="panel">
                <figure class="overlay overlay-hover animation-hover">
                  <img class="caption-figure overlay-figure" src="{{global}}/photos/placeholder.png">
                  <figcaption class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <div class="btn-group">
                      <div class="dropdown float-left">
                        <button type="button" class="btn btn-icon btn-pure btn-default" title="Setting"><i class="icon md-settings" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="">Copy</a>
                          <a class="dropdown-item" href="">Rename</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-icon btn-pure btn-default" title="Delete"
                        data-tag="project-delete"><i class="icon md-delete" aria-hidden="true"></i></button>
                    </div>
                    <button type="button" class="btn btn-inverse project-button">View Project</button>
                  </figcaption>
                </figure>
                <div class="time float-right">May 12, 2017</div>
                <div class="text-truncate">ullamco quis</div>
              </div>
            </li>
            <li>
              <div class="panel">
                <figure class="overlay overlay-hover animation-hover">
                  <img class="caption-figure overlay-figure" src="{{global}}/photos/placeholder.png">
                  <figcaption class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <div class="btn-group">
                      <div class="dropdown float-left">
                        <button type="button" class="btn btn-icon btn-pure btn-default" title="Setting"><i class="icon md-settings" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="">Copy</a>
                          <a class="dropdown-item" href="">Rename</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-icon btn-pure btn-default" title="Delete"
                        data-tag="project-delete"><i class="icon md-delete" aria-hidden="true"></i></button>
                    </div>
                    <button type="button" class="btn btn-inverse project-button">View Project</button>
                  </figcaption>
                </figure>
                <div class="time float-right">May 25, 2017</div>
                <div class="text-truncate">Reprehenderit</div>
              </div>
            </li>
            <li>
              <div class="panel">
                <figure class="overlay overlay-hover animation-hover">
                  <img class="caption-figure overlay-figure" src="{{global}}/photos/placeholder.png">
                  <figcaption class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <div class="btn-group">
                      <div class="dropdown float-left">
                        <button type="button" class="btn btn-icon btn-pure btn-default" title="Setting"><i class="icon md-settings" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="">Copy</a>
                          <a class="dropdown-item" href="">Rename</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-icon btn-pure btn-default" title="Delete"
                        data-tag="project-delete"><i class="icon md-delete" aria-hidden="true"></i></button>
                    </div>
                    <button type="button" class="btn btn-inverse project-button">View Project</button>
                  </figcaption>
                </figure>
                <div class="time float-right">Aug 30, 2017</div>
                <div class="text-truncate">Ullamco fugiat</div>
              </div>
            </li>
            <li>
              <div class="panel">
                <figure class="overlay overlay-hover animation-hover">
                  <img class="caption-figure overlay-figure" src="{{global}}/photos/placeholder.png">
                  <figcaption class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <div class="btn-group">
                      <div class="dropdown float-left">
                        <button type="button" class="btn btn-icon btn-pure btn-default" title="Setting"><i class="icon md-settings" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="">Copy</a>
                          <a class="dropdown-item" href="">Rename</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-icon btn-pure btn-default" title="Delete"
                        data-tag="project-delete"><i class="icon md-delete" aria-hidden="true"></i></button>
                    </div>
                    <button type="button" class="btn btn-inverse project-button">View Project</button>
                  </figcaption>
                </figure>
                <div class="time float-right">Oct 8, 2017</div>
                <div class="text-truncate">Dolor veniam</div>
              </div>
            </li>
            <li>
              <div class="panel">
                <figure class="overlay overlay-hover animation-hover">
                  <img class="caption-figure overlay-figure" src="{{global}}/photos/placeholder.png">
                  <figcaption class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <div class="btn-group">
                      <div class="dropdown float-left">
                        <button type="button" class="btn btn-icon btn-pure btn-default" title="Setting"><i class="icon md-settings" aria-hidden="true"></i></button>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="">Copy</a>
                          <a class="dropdown-item" href="">Rename</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-icon btn-pure btn-default" title="Delete"
                        data-tag="project-delete"><i class="icon md-delete" aria-hidden="true"></i></button>
                    </div>
                    <button type="button" class="btn btn-inverse project-button">View Project</button>
                  </figcaption>
                </figure>
                <div class="time float-right">Oct 18, 2017</div>
                <div class="text-truncate">Minim officia</div>
              </div>
            </li>
          </ul>
        </div>

        <nav>
          <ul class="pagination pagination-no-border">
            <li class="disabled page-item">
              <a class="page-link" href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li class="active page-item"><a class="page-link" href="javascript:void(0)">1 <span class="sr-only">(current)</span></a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0)">5</a></li>
            <li class="page-item">
              <a class="page-link" href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <!-- Site Action -->
    <div class="site-action" data-target="#addProjectForm" data-toggle="modal" data-plugin="actionBtn">
      <button type="button" data-action="add" class="site-action-toggle btn-raised btn btn-success btn-floating">
        <i class="icon md-plus" aria-hidden="true"></i>
      </button>
    </div>
    <!-- End Site Action -->

    <!-- Add Project Form -->
    <div class="modal fade" id="addProjectForm" aria-hidden="true" aria-labelledby="addProjectForm"
      role="dialog" tabindex="-1">
      <div class="modal-dialog modal-simple">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
            <h4 class="modal-title">Create New Project</h4>
          </div>
          <div class="modal-body">
            <form action="#" method="post" role="form">
              <div class="form-group">
                <label class="form-control-label mb-15" for="name">Project name:</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="Project name">
              </div>
              <div class="form-group">
                <label class="form-control-label mb-15" for="name">Project description:</label>
                <textarea class="form-control mb-sm" placeholder="Project description." rows="4"></textarea>
              </div>
              <div class="form-group">
                <label class="form-control-label mb-15" for="name">Choice people to your project:</label>
                <select multiple="multiple" class="plugin-selective"></select>
              </div>
            </form>
          </div>
          <div class="modal-footer text-right">
            <button class="btn btn-primary" data-dismiss="modal" type="button">Creat</button>
            <a class="btn btn-sm btn-white btn-pure" data-dismiss="modal" href="javascript:void(0)">Cancel</a>
          </div>
        </div>
      </div>
    </div>
    <!-- End Add Project Form -->

  {{/content}}
{{/extend}}