File: //proc/self/root/home/artinside/public_html/sabbry/html-admin/product_details.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Mosaddek">
<meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
<link rel="shortcut icon" href="img/favicon.png">
<title>Product details list</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<!--external css-->
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/jquery-ui/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<!--right slidebar-->
<link href="css/slidebars.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
</head>
<body>
<section id="container" class="">
<!--header start-->
<header class="header white-bg">
<div class="sidebar-toggle-box">
<i class="fa fa-bars"></i>
</div>
<!--logo start-->
<a href="index.html" class="logo">Flat<span>lab</span></a>
<!--logo end-->
<div class="nav notify-row" id="top_menu">
<!-- notification start -->
<ul class="nav top-menu">
<!-- settings start -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-tasks"></i>
<span class="badge badge-success">6</span>
</a>
<ul class="dropdown-menu extended tasks-bar">
<div class="notify-arrow notify-arrow-green"></div>
<li>
<p class="green">You have 6 pending tasks</p>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">40%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Database Update</div>
<div class="percent">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Iphone Development</div>
<div class="percent">87%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
<span class="sr-only">87% Complete</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Mobile App</div>
<div class="percent">33%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 33%">
<span class="sr-only">33% Complete (danger)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">45%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</a>
</li>
<li class="external">
<a href="#">See All Tasks</a>
</li>
</ul>
</li>
<!-- settings end -->
<!-- inbox dropdown start-->
<li id="header_inbox_bar" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-envelope-o"></i>
<span class="badge badge-danger">5</span>
</a>
<ul class="dropdown-menu extended inbox">
<div class="notify-arrow notify-arrow-red"></div>
<li>
<p class="red">You have 5 new messages</p>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="./img/avatar-mini.jpg"></span>
<span class="subject">
<span class="from">Jonathan Smith</span>
<span class="time">Just now</span>
</span>
<span class="message">
Hello, this is an example msg.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="./img/avatar-mini2.jpg"></span>
<span class="subject">
<span class="from">Jhon Doe</span>
<span class="time">10 mins</span>
</span>
<span class="message">
Hi, Jhon Doe Bhai how are you ?
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="./img/avatar-mini3.jpg"></span>
<span class="subject">
<span class="from">Jason Stathum</span>
<span class="time">3 hrs</span>
</span>
<span class="message">
This is awesome dashboard.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="./img/avatar-mini4.jpg"></span>
<span class="subject">
<span class="from">Jondi Rose</span>
<span class="time">Just now</span>
</span>
<span class="message">
Hello, this is metrolab
</span>
</a>
</li>
<li>
<a href="#">See all messages</a>
</li>
</ul>
</li>
<!-- inbox dropdown end -->
<!-- notification dropdown start-->
<li id="header_notification_bar" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-bell-o"></i>
<span class="badge badge-warning">7</span>
</a>
<ul class="dropdown-menu extended notification">
<div class="notify-arrow notify-arrow-yellow"></div>
<li>
<p class="yellow">You have 7 new notifications</p>
</li>
<li>
<a href="#">
<span class="label label-danger"><i class="fa fa-bolt"></i></span>
Server #3 overloaded.
<span class="small italic">34 mins</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-warning"><i class="fa fa-bell"></i></span>
Server #10 not respoding.
<span class="small italic">1 Hours</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-danger"><i class="fa fa-bolt"></i></span>
Database overloaded 24%.
<span class="small italic">4 hrs</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-success"><i class="fa fa-plus"></i></span>
New user registered.
<span class="small italic">Just now</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-info"><i class="fa fa-bullhorn"></i></span>
Application error.
<span class="small italic">10 mins</span>
</a>
</li>
<li>
<a href="#">See all notifications</a>
</li>
</ul>
</li>
<!-- notification dropdown end -->
</ul>
<!-- notification end -->
</div>
<div class="top-nav ">
<!--search & user info start-->
<ul class="nav pull-right top-menu">
<li>
<input type="text" class="form-control search" placeholder="Search">
</li>
<!-- user login dropdown start-->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<img alt="" src="img/avatar1_small.jpg">
<span class="username">Jhon Doue</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu extended logout dropdown-menu-right">
<div class="log-arrow-up"></div>
<li><a href="#"><i class=" fa fa-suitcase"></i>Profile</a></li>
<li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>
<li><a href="#"><i class="fa fa-bell-o"></i> Notification</a></li>
<li><a href="login.html"><i class="fa fa-key"></i> Log Out</a></li>
</ul>
</li>
<li class="sb-toggle-right">
<i class="fa fa-align-right"></i>
</li>
<!-- user login dropdown end -->
</ul>
<!--search & user info end-->
</div>
</header>
<!--header end-->
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-laptop"></i>
<span>Layouts</span>
</a>
<ul class="sub">
<li><a href="boxed_page.html">Boxed Page</a></li>
<li><a href="horizontal_menu.html">Horizontal Menu</a></li>
<li><a href="header-color.html">Different Color Top bar</a></li>
<li><a href="mega_menu.html">Mega Menu</a></li>
<li><a href="language_switch_bar.html">Language Switch Bar</a></li>
<li><a href="email_template.html" target="_blank">Email Template</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-book"></i>
<span>UI Elements</span>
</a>
<ul class="sub">
<li><a href="general.html">General</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="modal.html">Modal</a></li>
<li><a href="toastr.html">Toastr Notifications</a></li>
<li><a href="widget.html">Widget</a></li>
<li><a href="slider.html">Slider</a></li>
<li><a href="nestable.html">Nestable</a></li>
<li><a href="tree.html">Tree View</a></li>
<li><a href="font_awesome.html">Font Awesome</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-cogs"></i>
<span>Components</span>
</a>
<ul class="sub">
<li><a href="grids.html">Grids</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="todo_list.html">Todo List</a></li>
<li><a href="draggable_portlet.html">Draggable Portlet</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" >
<i class="fa fa-tasks"></i>
<span>Form Stuff</span>
</a>
<ul class="sub">
<li><a href="form_component.html">Form Components</a></li>
<li><a href="advanced_form_components.html">Advanced Components</a></li>
<li><a href="form_wizard.html">Form Wizard</a></li>
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="dropzone.html">Dropzone File Upload</a></li>
<li><a href="inline_editor.html">Inline Editor</a></li>
<li><a href="image_cropping.html">Image Cropping</a></li>
<li><a href="file_upload.html">Multiple File Upload</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-th"></i>
<span>Data Tables</span>
</a>
<ul class="sub">
<li><a href="basic_table.html">Basic Table</a></li>
<li><a href="responsive_table.html">Responsive Table</a></li>
<li><a href="dynamic_table.html">Dynamic Table</a></li>
<li><a href="editable_table.html">Editable Table</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" >
<i class=" fa fa-envelope"></i>
<span>Mail</span>
</a>
<ul class="sub">
<li><a href="inbox.html">Inbox</a></li>
<li><a href="inbox_details.html">Inbox Details</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class=" fa fa-bar-chart-o"></i>
<span>Charts</span>
</a>
<ul class="sub">
<li><a href="morris.html">Morris</a></li>
<li><a href="chartjs.html">Chartjs</a></li>
<li><a href="flot_chart.html">Flot Charts</a></li>
<li><a href="xchart.html">xChart</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="active">
<i class="fa fa-shopping-cart"></i>
<span>Shop</span>
</a>
<ul class="sub">
<li><a href="product_list.html">List View</a></li>
<li class="active"><a href="product_details.html">Details View</a></li>
</ul>
</li>
<li>
<a href="google_maps.html" >
<i class="fa fa-map-marker"></i>
<span>Google Maps </span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-comments-o"></i>
<span>Chat Room</span>
</a>
<ul class="sub">
<li><a href="lobby.html">Lobby</a></li>
<li><a href="chat_room.html"> Chat Room</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" >
<i class="fa fa-glass"></i>
<span>Extra</span>
</a>
<ul class="sub">
<li><a href="blank.html">Blank Page</a></li>
<li><a href="sidebar_closed.html">Sidebar Closed</a></li>
<li><a href="people_directory.html">People Directory</a></li>
<li><a href="coming_soon.html">Coming Soon</a></li>
<li><a href="lock_screen.html">Lock Screen</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="project_list.html">Project List</a></li>
<li><a href="project_details.html">Project Details</a></li>
<li><a href="search_result.html">Search Result</a></li>
<li><a href="pricing_table.html">Pricing Table</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="fb_wall.html">FB Wall</a></li>
<li><a href="404.html">404 Error</a></li>
<li><a href="500.html">500 Error</a></li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-user"></i>
<span>Login Page</span>
</a>
</li>
<!--multi level menu start-->
<li class="sub-menu">
<a href="javascript:;" >
<i class="fa fa-sitemap"></i>
<span>Multi level Menu</span>
</a>
<ul class="sub">
<li><a href="javascript:;">Menu Item 1</a></li>
<li class="sub-menu">
<a href="boxed_page.html">Menu Item 2</a>
<ul class="sub">
<li><a href="javascript:;">Menu Item 2.1</a></li>
<li class="sub-menu">
<a href="javascript:;">Menu Item 3</a>
<ul class="sub">
<li><a href="javascript:;">Menu Item 3.1</a></li>
<li><a href="javascript:;">Menu Item 3.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!--multi level menu end-->
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!-- page start-->
<div class="row">
<div class="col-md-3">
<section class="card">
<div class="card-body">
<input type="text" placeholder="Keyword Search" class="form-control">
</div>
</section>
<section class="card">
<header class="card-header">
Category
</header>
<div class="card-body">
<ul class="nav flex-column prod-cat">
<li class="nav-item">
<a href="#" class="active nav-link"><i class=" fa fa-angle-right"></i> Dress</a>
<ul class="nav flex-column">
<li class="active nav-item"><a href="#" class="nav-link">- Shirt</a></li>
<li class="nav-item"><a href="#" class="nav-link">- Pant</a></li>
<li class="nav-item"><a href="#" class="nav-link">- Shoes</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link"><i class=" fa fa-angle-right"></i> Bags & Purses</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class=" fa fa-angle-right"></i> Beauty</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class=" fa fa-angle-right"></i> Coat & Jacket</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class=" fa fa-angle-right"></i> Jeans</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class=" fa fa-angle-right"></i> Jewellery</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class=" fa fa-angle-right"></i> Electronics</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class=" fa fa-angle-right"></i> Sports</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class=" fa fa-angle-right"></i> Technology</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class=" fa fa-angle-right"></i> Watches</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class=" fa fa-angle-right"></i> Accessories</a></li>
</ul>
</div>
</section>
<section class="card">
<header class="card-header">
Price Range
</header>
<div class="card-body sliders">
<div id="slider-range" class="slider"></div>
<div class="slider-info">
<span id="slider-range-amount"></span>
</div>
</div>
</section>
<section class="card">
<header class="card-header">
Filter
</header>
<div class="card-body">
<form role="form product-form">
<div class="form-group">
<label>Brand</label>
<select class="form-control">
<option>Wallmart</option>
<option>Catseye</option>
<option>Moonsoon</option>
<option>Textmart</option>
</select>
</div>
<div class="form-group">
<label>Color</label>
<select class="form-control">
<option>White</option>
<option>Black</option>
<option>Red</option>
<option>Green</option>
</select>
</div>
<div class="form-group">
<label>Type</label>
<select class="form-control">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>Extra Large</option>
</select>
</div>
<button class="btn btn-primary" type="submit">Filter</button>
</form>
</div>
</section>
<section class="card">
<header class="card-header">
Best Seller
</header>
<div class="card-body">
<div class="best-seller">
<article class="media">
<a class="mr-3 thumb p-thumb">
<img src="img/product1.jpg">
</a>
<div class="media-body">
<a href="#" class=" p-head">Item One Tittle</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
<article class="media">
<a class="mr-3 thumb p-thumb">
<img src="img/product2.png">
</a>
<div class="media-body">
<a href="#" class=" p-head">Item Two Tittle</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
<article class="media">
<a class="mr-3 thumb p-thumb">
<img src="img/product3.png">
</a>
<div class="media-body">
<a href="#" class=" p-head">Item Three Tittle</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
</div>
</div>
</section>
</div>
<div class="col-md-9">
<section class="card ">
<div class="card-body row">
<div class="col-md-6">
<div class="pro-img-details">
<img class="img-fluid" src="img/product-list/pro-thumb-big.jpg" alt=""/>
</div>
<div class="pro-img-list">
<a href="#">
<img src="img/product-list/pro-thumb-1.jpg" alt="">
</a>
<a href="#">
<img src="img/product-list/pro-thumb-2.jpg" alt="">
</a>
<a href="#">
<img src="img/product-list/pro-thumb-3.jpg" alt="">
</a>
<a href="#">
<img src="img/product-list/pro-thumb-1.jpg" alt="">
</a>
</div>
</div>
<div class="col-md-6">
<h4 class="pro-d-title">
<a href="#" class="">
Leopard Shirt Dress
</a>
</h4>
<p>
Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
</p>
<div class="product_meta">
<span class="posted_in"> <strong>Categories:</strong> <a rel="tag" href="#">Jackets</a>, <a rel="tag" href="#">Men</a>, <a rel="tag" href="#">Shirts</a>, <a rel="tag" href="#">T-shirt</a>.</span>
<span class="tagged_as"><strong>Tags:</strong> <a rel="tag" href="#">mens</a>, <a rel="tag" href="#">womens</a>.</span>
</div>
<div class="m-bot15"> <strong>Price : </strong> <span class="amount-old">$544</span> <span class="pro-price"> $300.00</span></div>
<div class="form-group">
<label>Quantity</label>
<input type="quantiy" placeholder="1" class="form-control quantity">
</div>
<p>
<button class="btn btn-round btn-danger" type="button"><i class="fa fa-shopping-cart"></i> Add to Cart</button>
</p>
</div>
</div>
</section>
<section class="card">
<header class="card-header tab-bg-dark-navy-blue p-0">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active show" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Description</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">Review</a>
</li>
</ul>
</header>
<div class="card-body">
<div class="tab-content tasi-tab" id="myTabContent">
<div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem mollitia nisi
veritatis! Illum labore, natus nisi perferendis quaerat quam quod
reprehenderit voluptates! Amet aperiam, laborum mollitia placeat possimus
voluptate voluptatum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem mollitia nisi
veritatis! Illum labore, natus nisi perferendis quaerat quam quod
reprehenderit voluptates! Amet aperiam, laborum mollitia placeat possimus
voluptate voluptatum.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<article class="media mb-3">
<a class="mr-3 p-thumb">
<img src="img/avatar-mini.jpg">
</a>
<div class="media-body">
<a class="cmt-head" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<p> <i class="fa fa-clock-o"></i> 1 hours ago</p>
</div>
</article>
<article class="media mb-3">
<a class="mr-3 p-thumb">
<img src="img/avatar-mini2.jpg">
</a>
<div class="media-body">
<a class="cmt-head" href="#">Nulla vel metus scelerisque ante sollicitudin commodo</a>
<p> <i class="fa fa-clock-o"></i> 23 mins ago</p>
</div>
</article>
<article class="media mb-3">
<a class="mr-3 p-thumb">
<img src="img/avatar-mini3.jpg">
</a>
<div class="media-body">
<a class="cmt-head" href="#">Donec lacinia congue felis in faucibus. </a>
<p> <i class="fa fa-clock-o"></i> 15 mins ago</p>
</div>
</article>
</div>
</div>
</div>
</section>
<div class="row product-list">
<div class="col-md-4">
<section class="card">
<div class="pro-img-box">
<img src="img/product-list/pro-1.jpg" alt=""/>
<a href="#" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="card-body text-center">
<h4>
<a href="#" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="card">
<div class="pro-img-box">
<img src="img/product-list/pro1.jpg" alt=""/>
<a href="#" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="card-body text-center">
<h4>
<a href="#" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="card">
<div class="pro-img-box">
<img src="img/product-list/pro2.jpg" alt=""/>
<a href="#" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="card-body text-center">
<h4>
<a href="#" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- page end-->
</section>
</section>
<!--main content end-->
<!-- Right Slidebar start -->
<div class="sb-slidebar sb-right sb-style-overlay">
<h5 class="side-title">Online Customers</h5>
<ul class="quick-chat-list">
<li class="online">
<div class="media">
<a href="#" class="">
<img alt="" src="img/chat-avatar2.jpg" class="mr-3 rounded-circle">
</a>
<div class="media-body">
<strong>John Doe</strong>
<small>Dream Land, AU</small>
</div>
</div><!-- media -->
</li>
<li class="online">
<div class="media">
<a href="#" class="">
<img alt="" src="img/chat-avatar.jpg" class="mr-3 rounded-circle">
</a>
<div class="media-body">
<div class="media-status">
<span class=" badge bg-important">3</span>
</div>
<strong>Jonathan Smith</strong>
<small>United States</small>
</div>
</div><!-- media -->
</li>
<li class="online">
<div class="media">
<a href="#" class="">
<img alt="" src="img/pro-ac-1.png" class="mr-3 rounded-circle">
</a>
<div class="media-body">
<div class="media-status">
<span class=" badge badge-success">5</span>
</div>
<strong>Jane Doe</strong>
<small>ABC, USA</small>
</div>
</div><!-- media -->
</li>
<li class="online">
<div class="media">
<a href="#" class="">
<img alt="" src="img/avatar1.jpg" class="mr-3 rounded-circle">
</a>
<div class="media-body">
<strong>Anjelina Joli</strong>
<small>Fockland, UK</small>
</div>
</div><!-- media -->
</li>
<li class="online">
<div class="media">
<a href="#" class="">
<img alt="" src="img/mail-avatar.jpg" class="mr-3 rounded-circle">
</a>
<div class="media-body">
<div class="media-status">
<span class=" badge bg-warning">7</span>
</div>
<strong>Mr Tasi</strong>
<small>Dream Land, USA</small>
</div>
</div><!-- media -->
</li>
</ul>
<h5 class="side-title"> pending Task</h5>
<ul class="p-task tasks-bar">
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">40%</div>
</div>
<div class="progress">
<div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-striped bg-success">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Database Update</div>
<div class="percent">60%</div>
</div>
<div class="progress">
<div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-striped bg-warning">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Iphone Development</div>
<div class="percent">87%</div>
</div>
<div class="progress">
<div style="width: 87%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-striped bg-info">
<span class="sr-only">87% Complete</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Mobile App</div>
<div class="percent">33%</div>
</div>
<div class="progress">
<div style="width: 33%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-striped bg-danger">
<span class="sr-only">33% Complete (danger)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">45%</div>
</div>
<div class="progress">
<div style="width: 45%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar progress-bar-striped">
<span class="sr-only">45% Complete</span>
</div>
</div>
</a>
</li>
<li class="external">
<a href="#">See All Tasks</a>
</li>
</ul>
</div>
<!-- Right Slidebar end -->
<!--footer start-->
<footer class="site-footer">
<div class="text-center">
2018 © FlatLab by VectorLab.
<a href="#" class="go-top">
<i class="fa fa-angle-up"></i>
</a>
</div>
</footer>
<!--footer end-->
</section>
<!-- js placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="assets/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/jquery.customSelect.min.js" ></script>
<script src="js/respond.min.js" ></script>
<!--right slidebar-->
<script src="js/slidebars.min.js"></script>
<!--common script for all pages-->
<script src="js/common-scripts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function(){
$('select.styled').customSelect();
});
// range slider
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#slider-range-amount").text("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#slider-range-amount").text("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
});
</script>
</body>
</html>