---
layout: inner
title: Dashboard
---

<div class="container">
  <div class="profile-header">
    <div
      class="cover-container imageBG bg-dark rounded-top"
      data-img="assets/img/shapes.png"
      title="profile pic"
    ></div>
    <div class="profile-info py-3 border rounded-bottom">
      <div class="row d-flex align-items-center">
        <div class="col-sm-12 col-md-6">
          <div class="user-detail pl-3">
            <div class="d-flex flex-wrap align-items-center">
              <div class="profile-img pr-4">
                <img
                  src="assets/img/avatar-2.jpg"
                  alt=""
                  class="img-lg rounded-circle"
                />
              </div>
              <div class="profile-detail d-flex align-items-center">
                <h3 class="mb-0">Nik Jone</h3>
                <p class="m-0 pl-3">- Web designer</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-12 col-md-6">
          <ul
            class="nav nav-pills d-flex align-items-end float-right profile-feed-items p-0 m-0"
          >
            <li>
              <a class="nav-link active" data-toggle="pill" href="#profile-feed"
                >feed</a
              >
            </li>
            <li>
              <a class="nav-link" data-toggle="pill" href="#profile-activity"
                >Activity</a
              >
            </li>
            <li>
              <a class="nav-link" data-toggle="pill" href="#profile-friends"
                >friends</a
              >
            </li>
            <li>
              <a class="nav-link" data-toggle="pill" href="#profile-profile"
                >profile</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="row mb-4 mt-3 d-flex justify-content-between align-items-center">
    <div class="col-md-8">
      <h5 class="mb-0">HTML Templates</h5>
    </div>
    <div class="col-md-4">
      <a href="#" class="btn btn-link float-right"
        >Explore all <i class="las la-long-arrow-alt-right"></i>
      </a>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="card item-card h-100 border-0">
        <div class="item-card__image rounded">
          <a href="single-product.html">
            <img
              src="assets/img/07_1569098924541.jpg"
              class="img-fluid rounded"
              alt=""
            />
          </a>
          <div class="hover-icons">
            <ul class="list-unstyled">
              <li>
                <a href="javascript:void(0)"><i class="las la-desktop"></i></a>
              </li>
              <li>
                <a href="javascript:void(0)"><i class="lar la-bookmark"></i></a>
              </li>
            </ul>
          </div>
        </div>
        <!-- end: Item card image -->
        <div class="card-body px-0 pt-3">
          <div class="d-flex justify-content-between align-items-start">
            <div class="item-title">
              <a href="#">
                <h3 class="h5 mb-0 text-truncate">Magazine Mockup Kit</h3>
              </a>
            </div>
            <div class="item-price">
              <span>$14</span>
            </div>
          </div>
          <!-- end: Card info -->
          <div
            class="d-flex justify-content-start align-items-center item-meta"
          >
            <div class="short-description mb-0">
              <p class="mb-0 extension-text">
                <a href="#">WordPress</a><span class="ml-1">in</span>
                <a href="#">Creative</a>
              </p>
            </div>
          </div>
          <!-- end: Card meta -->
        </div>
        <!-- edn:Card body -->
      </div>
      <!-- end: Card -->
    </div>
    <!-- end: col -->
    <div class="col-md-3">
      <div class="card item-card h-100 border-0">
        <div class="item-card__image rounded">
          <a href="single-product.html">
            <img
              src="assets/img/details_image_01_1575382494691.jpg"
              class="img-fluid rounded"
              alt=""
            />
          </a>
          <div class="hover-icons">
            <ul class="list-unstyled">
              <li>
                <a href="javascript:void(0)"><i class="las la-desktop"></i></a>
              </li>
              <li>
                <a href="javascript:void(0)"><i class="lar la-bookmark"></i></a>
              </li>
            </ul>
          </div>
        </div>
        <!-- end: Item card image -->
        <div class="card-body px-0 pt-3">
          <div class="d-flex justify-content-between align-items-start">
            <div class="item-title">
              <a href="#">
                <h3 class="h5 mb-0 text-truncate">Resume Template / CV</h3>
              </a>
            </div>
            <div class="item-price">
              <span>$14</span>
            </div>
          </div>
          <!-- end: Card info -->
          <div
            class="d-flex justify-content-start align-items-center item-meta"
          >
            <div class="short-description mb-0">
              <p class="mb-0 extension-text">
                <a href="#">WordPress</a><span class="ml-1">in</span>
                <a href="#">Creative</a>
              </p>
            </div>
          </div>
          <!-- end: Card meta -->
        </div>
        <!-- end:Card body -->
      </div>
      <!-- end: Card -->
    </div>
    <!-- end: col -->
    <div class="col-md-3">
      <div class="card item-card h-100 border-0">
        <div class="item-card__image rounded">
          <a href="single-product.html">
            <img
              src="assets/img/4_1561960992838.png"
              class="img-fluid rounded"
              alt=""
            />
          </a>
          <div class="hover-icons">
            <ul class="list-unstyled">
              <li>
                <a href="javascript:void(0)"><i class="las la-desktop"></i></a>
              </li>
              <li>
                <a href="javascript:void(0)"><i class="lar la-bookmark"></i></a>
              </li>
            </ul>
          </div>
        </div>
        <!-- end: Item card image -->
        <div class="card-body px-0 pt-3">
          <div class="d-flex justify-content-between align-items-start">
            <div class="item-title">
              <a href="#">
                <h3 class="h5 mb-0 text-truncate">Media/Press Kit</h3>
              </a>
            </div>
            <div class="item-price">
              <span>$14</span>
            </div>
          </div>
          <!-- end: Card info -->
          <div
            class="d-flex justify-content-start align-items-center item-meta"
          >
            <div class="short-description mb-0">
              <p class="mb-0 extension-text">
                <a href="#">UI Kit</a><span class="ml-1">in</span>
                <a href="#">Corporate</a>
              </p>
            </div>
          </div>
          <!-- end: Card meta -->
        </div>
        <!-- edn:Card body -->
      </div>
      <!-- end: Card -->
    </div>
    <!-- end: col -->
    <div class="col-md-3">
      <div class="card item-card h-100 border-0">
        <div class="item-card__image rounded">
          <a href="single-product.html">
            <img
              src="assets/img/featured-image-1_1576013144470.png"
              class="img-fluid rounded"
              alt=""
            />
          </a>
          <div class="hover-icons">
            <ul class="list-unstyled">
              <li>
                <a href="javascript:void(0)"><i class="las la-desktop"></i></a>
              </li>
              <li>
                <a href="javascript:void(0)"><i class="lar la-bookmark"></i></a>
              </li>
            </ul>
          </div>
        </div>
        <!-- end: Item card image -->
        <div class="card-body px-0 pt-3">
          <div class="d-flex justify-content-between align-items-start">
            <div class="item-title">
              <a href="#">
                <h3 class="h5 mb-0 text-truncate">Box Mockup Vol.3</h3>
              </a>
            </div>
            <div class="item-price">
              <span>$14</span>
            </div>
          </div>
          <!-- end: Card info -->
          <div
            class="d-flex justify-content-start align-items-center item-meta"
          >
            <div class="short-description mb-0">
              <p class="mb-0 extension-text">
                <a href="#">UI Kit</a><span class="ml-1">in</span>
                <a href="#">Corporate</a>
              </p>
            </div>
          </div>
          <!-- end: Card meta -->
        </div>
        <!-- edn:Card body -->
      </div>
      <!-- end: Card -->
    </div>
    <!-- end: col -->
  </div>
</div>