sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
1,252 lines (790 loc) • 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 p