sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
1,837 lines • 84.5 kB
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Sleek Dashboard - Free Bootstrap 4 Admin Dashboard Template and UI Kit. It is very powerful bootstrap admin dashboard, which allows you to build products like admin panels, content management systems and CRMs etc.">
<title>Sleek - Admin Dashboard Template</title>
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500" rel="stylesheet" />
<link href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css" rel="stylesheet" />
<!-- PLUGINS CSS STYLE -->
<link href="assets/plugins/nprogress/nprogress.css" rel="stylesheet" />
<link href="assets/plugins/daterangepicker/daterangepicker.css" rel="stylesheet" />
<!-- SLEEK CSS -->
<link id="sleek-css" rel="stylesheet" href="assets/css/sleek.css" />
<!-- FAVICON -->
<link href="assets/img/favicon.png" rel="shortcut icon" />
<!--
HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
-->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="assets/plugins/nprogress/nprogress.js"></script>
</head>
<body class="header-fixed sidebar-fixed sidebar-dark header-light" id="body">
<script>
NProgress.configure({ showSpinner: false });
NProgress.start();
</script>
<div class="wrapper">
<!-- Github Link -->
<a href="https://github.com/tafcoder/sleek-dashboard" target="_blank" class="github-link">
<svg width="70" height="70" viewBox="0 0 250 250" aria-hidden="true">
<defs>
<linearGradient id="grad1" x1="0%" y1="75%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#896def;stop-opacity:1" />
<stop offset="100%" style="stop-color:#482271;stop-opacity:1" />
</linearGradient>
</defs>
<path d="M 0,0 L115,115 L115,115 L142,142 L250,250 L250,0 Z" fill="url(#grad1)"></path>
</svg>
<i class="mdi mdi-github-circle"></i>
</a>
<!--
====================================
——— LEFT SIDEBAR WITH FOOTER
=====================================
-->
<aside class="left-sidebar bg-sidebar">
<div id="sidebar" class="sidebar sidebar-with-footer">
<!-- Aplication Brand -->
<div class="app-brand">
<a href="/index.html" title="Sleek Dashboard">
<svg
class="brand-icon"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"
width="30"
height="33"
viewBox="0 0 30 33"
>
<g fill="none" fill-rule="evenodd">
<path
class="logo-fill-blue"
fill="#7DBCFF"
d="M0 4v25l8 4V0zM22 4v25l8 4V0z"
/>
<path class="logo-fill-white" fill="#FFF" d="M11 4v25l8 4V0z" />
</g>
</svg>
<span class="brand-name text-truncate">Sleek Dashboard</span>
</a>
</div>
<!-- begin sidebar scrollbar -->
<div class="sidebar-scrollbar">
<!-- sidebar menu -->
<ul class="nav sidebar-inner" id="sidebar-menu">
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#dashboard"
aria-expanded="false" aria-controls="dashboard">
<i class="mdi mdi-view-dashboard-outline"></i>
<span class="nav-text">Dashboard</span> <b class="caret"></b>
</a>
<ul class="collapse" id="dashboard"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="index.html">
<span class="nav-text">Ecommerce</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="analytics.html">
<span class="nav-text">Analytics</span>
<span class="badge badge-success">new</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#app"
aria-expanded="false" aria-controls="app">
<i class="mdi mdi-pencil-box-multiple"></i>
<span class="nav-text">App</span> <b class="caret"></b>
</a>
<ul class="collapse" id="app"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="chat.html">
<span class="nav-text">Chat</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="contacts.html">
<span class="nav-text">Contacts</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="team.html">
<span class="nav-text">Team</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="calendar.html">
<span class="nav-text">Calendar</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#components"
aria-expanded="false" aria-controls="components">
<i class="mdi mdi-folder-multiple-outline"></i>
<span class="nav-text">Components</span> <b class="caret"></b>
</a>
<ul class="collapse" id="components"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="alert.html">
<span class="nav-text">Alert</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="badge.html">
<span class="nav-text">Badge</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="breadcrumb.html">
<span class="nav-text">Breadcrumb</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="button-default.html">
<span class="nav-text">Button Default</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="button-dropdown.html">
<span class="nav-text">Button Dropdown</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="button-group.html">
<span class="nav-text">Button Group</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="button-social.html">
<span class="nav-text">Button Social</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="button-loading.html">
<span class="nav-text">Button Loading</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="card.html">
<span class="nav-text">Card</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="carousel.html">
<span class="nav-text">Carousel</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="collapse.html">
<span class="nav-text">Collapse</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="list-group.html">
<span class="nav-text">List Group</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="modal.html">
<span class="nav-text">Modal</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="pagination.html">
<span class="nav-text">Pagination</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="popover-tooltip.html">
<span class="nav-text">Popover & Tooltip</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="progress-bar.html">
<span class="nav-text">Progress Bar</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="spinner.html">
<span class="nav-text">Spinner</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="switcher.html">
<span class="nav-text">Switcher</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="tab.html">
<span class="nav-text">Tab</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
aria-expanded="false" aria-controls="icons">
<i class="mdi mdi-diamond-stone"></i>
<span class="nav-text">Icons</span> <b class="caret"></b>
</a>
<ul class="collapse" id="icons"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="material-icon.html">
<span class="nav-text">Material Icon</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="flag-icon.html">
<span class="nav-text">Flag Icon</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
aria-expanded="false" aria-controls="forms">
<i class="mdi mdi-email-mark-as-unread"></i>
<span class="nav-text">Forms</span> <b class="caret"></b>
</a>
<ul class="collapse" id="forms"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="basic-input.html">
<span class="nav-text">Basic Input</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="input-group.html">
<span class="nav-text">Input Group</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="checkbox-radio.html">
<span class="nav-text">Checkbox & Radio</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="form-validation.html">
<span class="nav-text">Form Validation</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="form-advance.html">
<span class="nav-text">Form Advance</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
aria-expanded="false" aria-controls="tables">
<i class="mdi mdi-table"></i>
<span class="nav-text">Tables</span> <b class="caret"></b>
</a>
<ul class="collapse" id="tables"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="basic-tables.html">
<span class="nav-text">Basic Tables</span>
</a>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#data-tables"
aria-expanded="false" aria-controls="data-tables">
<span class="nav-text">Data Tables</span> <b class="caret"></b>
</a>
<ul class="collapse" id="data-tables">
<div class="sub-menu">
<li >
<a href="basic-data-table.html">Basic Data Table</a>
</li>
<li >
<a href="responsive-data-table.html">Responsive Data Table</a>
</li>
<li >
<a href="hoverable-data-table.html">Hoverable Data Table</a>
</li>
<li >
<a href="expendable-data-table.html">Expendable Data Table</a>
</li>
</div>
</ul>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
aria-expanded="false" aria-controls="maps">
<i class="mdi mdi-google-maps"></i>
<span class="nav-text">Maps</span> <b class="caret"></b>
</a>
<ul class="collapse" id="maps"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="google-map.html">
<span class="nav-text">Google Map</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="vector-map.html">
<span class="nav-text">Vector Map</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
aria-expanded="false" aria-controls="widgets">
<i class="mdi mdi-widgets"></i>
<span class="nav-text">Widgets</span> <b class="caret"></b>
</a>
<ul class="collapse" id="widgets"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="general-widget.html">
<span class="nav-text">General Widget</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="chart-widget.html">
<span class="nav-text">Chart Widget</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
aria-expanded="false" aria-controls="charts">
<i class="mdi mdi-chart-pie"></i>
<span class="nav-text">Charts</span> <b class="caret"></b>
</a>
<ul class="collapse" id="charts"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="chartjs.html">
<span class="nav-text">ChartJS</span>
</a>
</li>
</div>
</ul>
</li>
<li class="has-sub active expand" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#pages"
aria-expanded="false" aria-controls="pages">
<i class="mdi mdi-image-filter-none"></i>
<span class="nav-text">Pages</span> <b class="caret"></b>
</a>
<ul class="collapse show" id="pages"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li class="active" >
<a class="sidenav-item-link" href="user-profile.html">
<span class="nav-text">User Profile</span>
</a>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
aria-expanded="false" aria-controls="authentication">
<span class="nav-text">Authentication</span> <b class="caret"></b>
</a>
<ul class="collapse" id="authentication">
<div class="sub-menu">
<li >
<a href="sign-in.html">Sign In</a>
</li>
<li >
<a href="sign-up.html">Sign Up</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#others"
aria-expanded="false" aria-controls="others">
<span class="nav-text">Others</span> <b class="caret"></b>
</a>
<ul class="collapse" id="others">
<div class="sub-menu">
<li >
<a href="invoice.html">Invoice</a>
</li>
<li >
<a href="404.html">404 Page</a>
</li>
</div>
</ul>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#documentation"
aria-expanded="false" aria-controls="documentation">
<i class="mdi mdi-book-open-page-variant"></i>
<span class="nav-text">Documentation</span> <b class="caret"></b>
</a>
<ul class="collapse" id="documentation"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li class="section-title">
Getting Started
</li>
<li >
<a class="sidenav-item-link" href="introduction.html">
<span class="nav-text">Introduction</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="quick-start.html">
<span class="nav-text">Quick Start</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="customization.html">
<span class="nav-text">Customization</span>
</a>
</li>
<li class="section-title">
Layouts
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#headers"
aria-expanded="false" aria-controls="headers">
<span class="nav-text">Header Variations</span> <b class="caret"></b>
</a>
<ul class="collapse" id="headers">
<div class="sub-menu">
<li >
<a href="header-fixed.html">Header Fixed</a>
</li>
<li >
<a href="header-static.html">Header Static</a>
</li>
<li >
<a href="header-light.html">Header Light</a>
</li>
<li >
<a href="header-dark.html">Header Dark</a>
</li>
</div>
</ul>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#sidebar-navs"
aria-expanded="false" aria-controls="sidebar-navs">
<span class="nav-text">Sidebar Variations</span> <b class="caret"></b>
</a>
<ul class="collapse" id="sidebar-navs">
<div class="sub-menu">
<li >
<a href="sidebar-fixed-default.html">Sidebar Fixed Default</a>
</li>
<li >
<a href="sidebar-fixed-minified.html">Sidebar Fixed Minified</a>
</li>
<li >
<a href="sidebar-fixed-offcanvas.html">Sidebar Fixed Offcanvas</a>
</li>
<li >
<a href="sidebar-static-default.html">Sidebar Static Default</a>
</li>
<li >
<a href="sidebar-static-minified.html">Sidebar Static Minified</a>
</li>
<li >
<a href="sidebar-static-offcanvas.html">Sidebar Static Offcanvas</a>
</li>
<li >
<a href="sidebar-with-footer.html">Sidebar With Footer</a>
</li>
<li >
<a href="sidebar-without-footer.html">Sidebar Without Footer</a>
</li>
<li >
<a href="right-sidebar.html">Right Sidebar</a>
</li>
</div>
</ul>
</li>
<li >
<a class="sidenav-item-link" href="rtl.html">
<span class="nav-text">RTL Direction</span>
</a>
</li>
</div>
</ul>
</li>
</ul>
</div>
<div class="sidebar-footer">
<hr class="separator mb-0" />
<div class="sidebar-footer-content">
<h6 class="text-uppercase">
Cpu Uses <span class="float-right">40%</span>
</h6>
<div class="progress progress-xs">
<div
class="progress-bar active"
style="width: 40%;"
role="progressbar"
></div>
</div>
<h6 class="text-uppercase">
Memory Uses <span class="float-right">65%</span>
</h6>
<div class="progress progress-xs">
<div
class="progress-bar progress-bar-warning"
style="width: 65%;"
role="progressbar"
></div>
</div>
</div>
</div>
</div>
</aside>
<div class="page-wrapper">
<!-- Header -->
<header class="main-header " id="header">
<nav class="navbar navbar-static-top navbar-expand-lg">
<!-- Sidebar toggle button -->
<button id="sidebar-toggler" class="sidebar-toggle">
<span class="sr-only">Toggle navigation</span>
</button>
<!-- search form -->
<div class="search-form d-none d-lg-inline-block">
<div class="input-group">
<button type="button" name="search" id="search-btn" class="btn btn-flat">
<i class="mdi mdi-magnify"></i>
</button>
<input type="text" name="query" id="search-input" class="form-control" placeholder="'button', 'chart' etc."
autofocus autocomplete="off" />
</div>
<div id="search-results-container">
<ul id="search-results"></ul>
</div>
</div>
<div class="navbar-right ">
<ul class="nav navbar-nav">
<li class="dropdown notifications-menu">
<button class="dropdown-toggle" data-toggle="dropdown">
<i class="mdi mdi-bell-outline"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">You have 5 notifications</li>
<li>
<a href="#">
<i class="mdi mdi-account-plus"></i> New user registered
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-account-remove"></i> User deleted
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 07 AM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-chart-areaspline"></i> Sales report is ready
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 12 PM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-account-supervisor"></i> New client
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-server-network-off"></i> Server overloaded
<span class=" font-size-12 d-inline-block float-right"><i class="mdi mdi-clock-outline"></i> 05 AM</span>
</a>
</li>
<li class="dropdown-footer">
<a class="text-center" href="#"> View All </a>
</li>
</ul>
</li>
<li class="right-sidebar-in right-sidebar-2-menu">
<i class="mdi mdi-settings mdi-spin"></i>
</li>
<!-- User Account -->
<li class="dropdown user-menu">
<button href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<img src="assets/img/user/user.png" class="user-image" alt="User Image" />
<span class="d-none d-lg-inline-block">Abdus Salam</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<!-- User image -->
<li class="dropdown-header">
<img src="assets/img/user/user.png" class="img-circle" alt="User Image" />
<div class="d-inline-block">
Abdus Salam <small class="pt-1">iamabdus@gmail.com</small>
</div>
</li>
<li>
<a href="user-profile.html">
<i class="mdi mdi-account"></i> My Profile
</a>
</li>
<li>
<a href="#">
<i class="mdi mdi-email"></i> Message
</a>
</li>
<li>
<a href="#"> <i class="mdi mdi-diamond-stone"></i> Projects </a>
</li>
<li class="right-sidebar-in">
<a href="javascript:0"> <i class="mdi mdi-settings"></i> Setting </a>
</li>
<li class="dropdown-footer">
<a href="index.html"> <i class="mdi mdi-logout"></i> Log Out </a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="content-wrapper">
<div class="content"> <div class="bg-white border rounded">
<div class="row no-gutters">
<div class="col-lg-4 col-xl-3">
<div class="profile-content-left pt-5 pb-3 px-3 px-xl-5">
<div class="card text-center widget-profile px-0 border-0">
<div class="card-img mx-auto rounded-circle">
<img src="assets/img/user/u6.jpg" alt="user image">
</div>
<div class="card-body">
<h4 class="py-2 text-dark">Albrecht Straub</h4>
<p>Albrecht.straub@gmail.com</p>
<a class="btn btn-primary btn-pill btn-lg my-4" href="#">Follow</a>
</div>
</div>
<div class="d-flex justify-content-between ">
<div class="text-center pb-4">
<h6 class="text-dark pb-2">1503</h6>
<p>Friends</p>
</div>
<div class="text-center pb-4">
<h6 class="text-dark pb-2">2905</h6>
<p>Followers</p>
</div>
<div class="text-center pb-4">
<h6 class="text-dark pb-2">1200</h6>
<p>Following</p>
</div>
</div>
<hr class="w-100">
<div class="contact-info pt-4">
<h5 class="text-dark mb-1">Contact Information</h5>
<p class="text-dark font-weight-medium pt-4 mb-2">Email address</p>
<p>Albrecht.straub@gmail.com</p>
<p class="text-dark font-weight-medium pt-4 mb-2">Phone Number</p>
<p>+99 9539 2641 31</p>
<p class="text-dark font-weight-medium pt-4 mb-2">Birthday</p>
<p>Nov 15, 1990</p>
<p class="text-dark font-weight-medium pt-4 mb-2">Social Profile</p>
<p class="pb-3 social-button">
<a href="#" class="mb-1 btn btn-outline btn-twitter rounded-circle">
<i class="mdi mdi-twitter"></i>
</a>
<a href="#" class="mb-1 btn btn-outline btn-linkedin rounded-circle">
<i class="mdi mdi-linkedin"></i>
</a>
<a href="#" class="mb-1 btn btn-outline btn-facebook rounded-circle">
<i class="mdi mdi-facebook"></i>
</a>
<a href="#" class="mb-1 btn btn-outline btn-skype rounded-circle">
<i class="mdi mdi-skype"></i>
</a>
</p>
</div>
</div>
</div>
<div class="col-lg-8 col-xl-9">
<div class="profile-content-right py-5">
<ul class="nav nav-tabs px-3 px-xl-5 nav-style-border" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="timeline-tab" data-toggle="tab" href="#timeline" role="tab" aria-controls="timeline" aria-selected="true">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<div class="tab-content px-3 px-xl-5" id="myTabContent">
<div class="tab-pane fade" id="timeline" role="tabpanel" aria-labelledby="timeline-tab">
<div class="media mt-5 profile-timeline-media">
<div class="align-self-start iconbox-45 overflow-hidden mr-3">
<img src="assets/img/user/u3.jpg" alt="Generic placeholder image">
</div>
<div class="media-body">
<h6 class="mt-0 text-dark">Larissa Gebhardt</h6>
<span>Designer</span>
<span class="float-right">5 mins ago</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa1.jpg" alt="Product">
</div>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa2.jpg" alt="Product">
</div>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa3.jpg" alt="Product">
</div>
</div>
</div>
<div class="media mt-5 profile-timeline-media">
<div class="align-self-start iconbox-45 overflow-hidden mr-3">
<img src="assets/img/user/u4.jpg" alt="Generic placeholder image">
</div>
<div class="media-body">
<h6 class="mt-0 text-dark">Walter Reuter</h6>
<span>Designer</span>
<span class="float-right">2 hrs ago</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>
</div>
<div class="media mt-5 profile-timeline-media">
<div class="align-self-start iconbox-45 overflow-hidden mr-3">
<img src="assets/img/user/u7.jpg" alt="Generic placeholder image">
</div>
<div class="media-body">
<h6 class="mt-0 text-dark">Albrecht Straub</h6>
<span>Designer</span>
<span class="float-right">5 days ago</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa4.jpg" alt="Product">
</div>
</div>
</div>
<div class="media mt-5 profile-timeline-media">
<div class="align-self-start iconbox-45 overflow-hidden mr-3">
<img src="assets/img/user/u8.jpg" alt="Generic placeholder image">
</div>
<div class="media-body">
<h6 class="mt-0 text-dark">Selena Wagner</h6>
<span>Designer</span>
<span class="float-right">Mar 05, 2018</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa5.jpg" alt="Product">
</div>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa6.jpg" alt="Product">
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="mt-5">
<div class="row">
<div class="col-xl-4">
<div class="media widget-media p-4 bg-white border">
<div class="icon rounded-circle mr-4 bg-primary">
<i class="mdi mdi-account-outline text-white "></i>
</div>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">5300</h4>
<p>New Users</p>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="media widget-media p-4 bg-white border">
<div class="icon rounded-circle bg-warning mr-4">
<i class="mdi mdi-cart-outline text-white "></i>
</div>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">1953</h4>
<p>Order Placed</p>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="media widget-media p-4 bg-white border">
<div class="icon rounded-circle mr-4 bg-danger">
<i class="mdi mdi-cart-outline text-white "></i>
</div>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">1450</h4>
<p>Total Sales</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6">
<!-- Notification Table -->
<div class="card card-default" data-scroll-height="550">
<div class="card-header justify-content-between ">
<h2>Latest Notifications</h2>
<div>
<button class="text-black-50 mr-2 font-size-20"><i class="mdi mdi-cached"></i></button>
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-notification">
<li class="dropdown-item"><a href="#">Action</a></li>
<li class="dropdown-item"><a href="#">Another action</a></li>
<li class="dropdown-item"><a href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body slim-scroll">
<div class="media pb-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
<i class="mdi mdi-cart-outline font-size-20"></i>
</div>
<div class="media-body pr-3 ">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Order</a>
<p >Selena has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-success text-white">
<i class="mdi mdi-email-outline font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Enquiry</a>
<p >Phileine has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 9 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
<i class="mdi mdi-stack-exchange font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">Support Ticket</a>
<p >Emma has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
<i class="mdi mdi-cart-outline font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New order</a>
<p >Ryan has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white">
<i class="mdi mdi-calendar-blank font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="">Comapny Meetup</a>
<p >Phileine has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
<i class="mdi mdi-stack-exchange font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">Support Ticket</a>
<p >Emma has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
</div>
<div class="media py-3 align-items-center justify-content-between">
<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-success text-white">
<i class="mdi mdi-email-outline font-size-20"></i>
</div>
<div class="media-body pr-3">
<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Enquiry</a>
<p >Phileine has placed an new order</p>
</div>
<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 9 AM</span>
</div>
</div>
<div class="mt-3"></div>
</div>
</div>
<div class="col-xl-6">
<!-- To Do list -->
<div class="card card-default todo-table" id="todo" data-scroll-height="550">
<div class="card-header justify-content-between">
<h2>To Do List</h2>
<a class="btn btn-primary btn-pill" id="add-task" href="#" role="button"> Add task </a>
</div>
<div class="card-body slim-scroll">
<div class="todo-single-item d-none" id="todo-input">
<form >
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Todo" autofocus>
</div>
</form>
</div>
<div class="todo-list" id="todo-list">
<div class="todo-single-item d-flex flex-row justify-content-between finished">
<i class="mdi"></i>
<span >Finish Dashboard UI Kit update</span>
<span class="badge badge-primary">Finished</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between current">
<i class="mdi"></i>
<span >Create new prototype for the landing page</span>
<span class="badge badge-primary">Today</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between ">
<i class="mdi"></i>
<span > Add new Google Analytics code to all main files </span>
<span class="badge badge-danger">Yesterday</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between ">
<i class="mdi"></i>
<span >Update parallax scroll on team page</span>
<span class="badge badge-success">Dec 15, 2018</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between ">
<i class="mdi"></i>
<span >Update parallax scroll on team page</span>
<span class="badge badge-success">Dec 15, 2018</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between ">
<i class="mdi"></i>
<span >Create online customer list book</span>
<span class="badge badge-success">Dec 15, 2018</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between ">
<i class="mdi"></i>
<span >Lorem ipsum dolor sit amet, consectetur.</span>
<span class="badge badge-success">Dec 15, 2018</span>
</div>
<div class="todo-single-item d-flex flex-row justify-content-between mb-1">
<i class="mdi"></i>
<span >Update parallax scroll on team page</span>
<span class="badge badge-success">Dec 15, 2018</span>
</div>
</div>
</div>
<div class="mt-3"></div>
</div>
</div>
<div class="col-12">
<!-- Recent Order Table -->
<div class="card card-table-border-none" id="recent-orders">
<div class="card-header justify-content-between">
<h2>Recent Orders</h2>
<div class="date-range-report ">
<span></span>
</div>
</div>
<div class="card-body pt-0 pb-5">
<table class="table card-table table-responsive table-responsive-large" style="width:100%">
<thead>
<tr>
<th>Order ID</th>
<th>Product Name</th>
<th class="d-none d-xl-table-cell">Units</th>
<th class="d-none d-xl-table-cell">Order Date</th>
<th class="d-none d-xl-table-cell">Order Cost</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>24541</td>
<td>
<a class="text-dark" href=""> Coach Swagger</a>
</td>
<td class="d-none d-xl-table-cell">1 Unit</td>
<td class="d-none d-xl-table-cell">Oct 20, 2018</td>
<td class="d-none d-xl-table-cell">$230</td>
<td>
<span class="badge badge-success">Completed</span>
</td>
<td class="text-right">
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="" role="button" id="dropdown-recent-order1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order1">
<li class="dropdown-item">
<a href="#">View</a>
</li>
<li class="dropdown-item">
<a href="#">Remove</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>24541</td>
<td>
<a class="text-dark" href=""> Toddler Shoes, Gucci Watch</a>
</td>
<td class="d-none d-xl-table-cell">2 Units</td>
<td class="d-none d-xl-table-cell">Nov 15, 2018</td>
<td class="d-none d-xl-table-cell">$550</td>
<td>
<span class="badge badge-warning">Delayed</span>
</td>
<td class="text-right">
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-recent-order2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order2">
<li class="dropdown-item">
<a href="#">View</a>
</li>
<li class="dropdown-item">
<a href="#">Remove</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>24541</td>
<td>
<a class="text-dark" href=""> Hat Black Suits</a>
</td>
<td class="d-none d-xl-table-cell">1 Unit</td>
<td class="d-none d-xl-table-cell">Nov 18, 2018</td>
<td class="d-none d-xl-table-cell">$325</td>
<td>
<span class="badge badge-warning">On Hold</span>
</td>
<td class="text-right">
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-recent-order3"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order3">
<li class="dropdown-item">
<a href="#">View</a>
</li>
<li class="dropdown-item">
<a href="#">Remove</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>24541</td>
<td>
<a class="text-dark" href=""> Backpack Gents, Swimming Cap Slin</a>
</td>
<td class="d-none d-xl-table-cell">5 Units</td>
<td class="d-none d-xl-table-cell">Dec 13, 2018</td>
<td class="d-none d-xl-table-cell">$200</td>
<td>
<span class="badge badge-success">Completed</span>
</td>
<td class="text-right">
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-recent-order4"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order4">
<li class="dropdown-item">
<a href="#">View</a>
</li>
<li class="dropdown-item">
<a href="#">Remove</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>24541</td>
<td>
<a class="text-dark" href=""> Speed 500 Ignite</a>
</td>
<td class="d-none d-xl-table-cell">1 Unit</td>
<td class="d-none d-xl-table-cell">Dec 23, 2018</td>
<td class="d-none d-xl-table-cell">$150</td>
<td>
<span class="badge badge-danger">Cancelled</span>
</td>
<td class="text-right">
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-recent-order5"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order5">
<li class="dropdown-item">
<a href="#">View</a>
</li>
<li class="dropdown-item">
<a href="#">Remove</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show active" id="settings" role="tabpanel" aria-labelledby="settings-tab">
<div class="mt-5">
<form>
<div class="form-group row mb-6">
<label for="coverImage" class="col-sm-4 col-lg-2 col-form-label">User Image</label>
<div class="col-sm-8 col-lg-10">
<div class="custom-file mb-1">
<input type="file" class="custom-file-input" id="coverImage" required>
<label class="custom-file-label" for="coverImage">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-lg-6">
<div class="form-group">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" value="Albrecht">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" value="Straub">
</div>
</div>
</div>
<div class="form-group mb-4">
<label for="userName">User name</label>
<input type="text" class="form-control" id="userName" value="Straub">
<span class="d-block mt-1">Accusamus nobis at omnis consequuntur culpa tempore saepe animi.</span>
</div>
<div class="form-group mb-4">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="albrecht.straub@gmail.com">
</div>
<div class="form-group mb-4">
<label for="oldPassword">Old password</label>
<input type="password" class="form-control" id="oldPassword">
</div>
<div class="form-group mb-4">
<label for="newPassword">New password</label>
<input type="password" class="form-control" id="newPassword">
</div>
<div class="form-group mb-4">
<label for="conPassword">Confirm password</label>
<input type="password" class="form-control" id="conPassword">
</div>
<div class="d-flex justify-content-end mt-5">
<button type="submit" class="btn btn-primary mb-2 btn-pill">Update Profile</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-sidebar-2">
<div class="right-sidebar-container-2">
<div class="slim-scroll-right-sidebar-2">
<div class="right-sidebar-2-header">
<h2>Layout Settings</h2>
<p>User Interface Settings</p>
<div class="btn-close-right-sidebar-2">
<i class="mdi mdi-window-close"></i>
</div>
</div>
<div class="right-sidebar-2-body">
<span class="right-sidebar-2-subtitle">Header Layout</span>
<div class="no-col-space">
<a href="javascript:void(0);" class="btn-right-sidebar-2 header-fixed-to btn-right-sidebar-2-active">Fixed</a>
<a href="javascript:void(0);" class="btn-right-sidebar-2 header-static-to">Static</a>
</div>
<span class="right-sidebar-2-subtitle">Sidebar Layout</span>
<div class="no-col-space">
<select class="right-sidebar-2-select" id="sidebar-option-select">
<option value="sidebar-fixed">Fixed Default</option>
<option value="sidebar-fixed-minified">Fixed Minified</option>
<option value="sidebar-fixed-offcanvas">Fixed Offcanvas</option>
<option value="sidebar-static">Static Default</option>
<option value="sidebar-static-minified">Static Minified</option>
<option value="sidebar-static-offcanvas">Static Offcanvas</option>
</select>
</div>
<span class="right-sidebar-2-subtitle">Header Background</span>
<div class="no-col-space">
<a href="javascript:void(0);" class="btn-right-sidebar-2 btn-right-sidebar-2-active header-light-to">Light</a>
<a href="javascript:void(0);" class="btn-right-sidebar-2 header-dark-to">Dark</a>
</div>
<span class="right-sidebar-2-subtitle">Navigation Background</span>
<div class="no-col-space">
<a href="javascript:void(0);" class="btn-right-sidebar-2 btn-right-sidebar-2-active sidebar-dark-to">Dark</a>
<a href="javascript:void(0);" class="btn-right-sidebar-2 sidebar-light-to">Light</a>
</div>
<span class="right-sidebar-2-subtitle">Direction</span>
<div class="no-col-space">
<a href="javascript:void(0);" class="btn-right-sidebar-2 btn-right-sidebar-2-active ltr-to">LTR</a>
<a href="javascript:void(0);" class="btn-right-sidebar-2 rtl-to">RTL</a>
</div>
<div class="d-flex justify-content-center" style="padding-top: 30px">
<div id="reset-options" style="width: auto; cursor: pointer" class="btn-right-sidebar-2 btn-reset">Reset
Settings</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer mt-auto">
<div class="copyright bg-white">
<p>
© <span id="copy-year">2019</span> Copyright Sleek Dashboard Bootstrap Template by
<a
class="text-primary"
href="http://www.iamabdus.com/"
target="_blank"
>Abdus</a
>.
</p>
</div>
<script>
var d = new Date();
var year = d.getFullYear();
document.getElementById("copy-year").innerHTML = year;
</script>
</footer>
</div>
</div>
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/jekyll-search.min.js"></script>
<script src="assets/plugins/daterangepicker/moment.min.js"></script>
<script src="assets/plugins/daterangepicker/daterangepicker.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('input[name="dateRange"]').daterangepicker({
autoUpdateInput: false,
singleDatePicker: true,
locale: {
cancelLabel: 'Clear'
}
});
jQuery('input[name="dateRange"]').on('apply.daterangepicker', function (ev, picker) {
jQuery(this).val(picker.startDate.format('MM/DD/YYYY'));
});
jQuery('input[name="dateRange"]').on('cancel.daterangepicker', function (ev, picker) {
jQuery(this).val('');
});
});
</script>
<script src="assets/js/sleek.bundle.js"></script>
</body>
</html>