?
áEÓê¤ÎïLwebshll2019
<!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="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<title>Typography</title>
<!--Core CSS -->
<link href="bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]>
<script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section id="container" >
<!--header start-->
<header class="header fixed-top clearfix">
<!--logo start-->
<div class="brand">
<a href="index.html" class="logo">
<img src="images/logo.png" alt="">
</a>
<div class="sidebar-toggle-box">
<div class="fa fa-bars"></div>
</div>
</div>
<!--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 bg-success">8</span>
</a>
<ul class="dropdown-menu extended tasks-bar">
<li>
<p class="">You have 8 pending tasks</p>
</li>
<li>
<a href="#">
<div class="task-info clearfix">
<div class="desc pull-left">
<h5>Target Sell</h5>
<p>25% , Deadline 12 June’13</p>
</div>
<span class="notification-pie-chart pull-right" data-percent="45">
<span class="percent"></span>
</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info clearfix">
<div class="desc pull-left">
<h5>Product Delivery</h5>
<p>45% , Deadline 12 June’13</p>
</div>
<span class="notification-pie-chart pull-right" data-percent="78">
<span class="percent"></span>
</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info clearfix">
<div class="desc pull-left">
<h5>Payment collection</h5>
<p>87% , Deadline 12 June’13</p>
</div>
<span class="notification-pie-chart pull-right" data-percent="60">
<span class="percent"></span>
</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info clearfix">
<div class="desc pull-left">
<h5>Target Sell</h5>
<p>33% , Deadline 12 June’13</p>
</div>
<span class="notification-pie-chart pull-right" data-percent="90">
<span class="percent"></span>
</span>
</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 bg-important">4</span>
</a>
<ul class="dropdown-menu extended inbox">
<li>
<p class="red">You have 4 Mails</p>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="images/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="images/avatar-mini-2.jpg"></span>
<span class="subject">
<span class="from">Jane Doe</span>
<span class="time">2 min ago</span>
</span>
<span class="message">
Nice admin template
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="images/avatar-mini-3.jpg"></span>
<span class="subject">
<span class="from">Tasi sam</span>
<span class="time">2 days ago</span>
</span>
<span class="message">
This is an example msg.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="images/avatar-mini.jpg"></span>
<span class="subject">
<span class="from">Mr. Perfect</span>
<span class="time">2 hour ago</span>
</span>
<span class="message">
Hi there, its a test
</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 bg-warning">3</span>
</a>
<ul class="dropdown-menu extended notification">
<li>
<p>Notifications</p>
</li>
<li>
<div class="alert alert-info clearfix">
<span class="alert-icon"><i class="fa fa-bolt"></i></span>
<div class="noti-info">
<a href="#"> Server #1 overloaded.</a>
</div>
</div>
</li>
<li>
<div class="alert alert-danger clearfix">
<span class="alert-icon"><i class="fa fa-bolt"></i></span>
<div class="noti-info">
<a href="#"> Server #2 overloaded.</a>
</div>
</div>
</li>
<li>
<div class="alert alert-success clearfix">
<span class="alert-icon"><i class="fa fa-bolt"></i></span>
<div class="noti-info">
<a href="#"> Server #3 overloaded.</a>
</div>
</div>
</li>
</ul>
</li>
<!-- notification dropdown end -->
</ul>
<!-- notification end -->
</div>
<div class="top-nav clearfix">
<!--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="images/avatar1_small.jpg">
<span class="username">John Doe</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu extended logout">
<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="login.html"><i class="fa fa-key"></i> Log Out</a></li>
</ul>
</li>
<!-- user login dropdown end -->
<li>
<div class="toggle-right-box">
<div class="fa fa-bars"></div>
</div>
</li>
</ul>
<!--search & user info end-->
</div>
</header>
<!--header end-->
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start--> <div class="leftside-navigation">
<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="language_switch.html">Language Switch Bar</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="active">
<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 class="active"><a href="typography.html">Typography</a></li>
<li><a href="widget.html">Widget</a></li>
<li><a href="slider.html">Slider</a></li>
<li><a href="tree_view.html">Tree View</a></li>
<li><a href="nestable.html">Nestable</a></li>
<li><a href="grids.html">Grids</a></li>
<li><a href="calendar.html">Calender</a></li>
<li><a href="draggable_portlet.html">Draggable Portlet</a></li>
</ul>
</li>
<li>
<a href="fontawesome.html">
<i class="fa fa-bullhorn"></i>
<span>Fontawesome </span>
</a>
</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-tasks"></i>
<span>Form Components</span>
</a>
<ul class="sub">
<li><a href="form_component.html">Form Elements</a></li>
<li><a href="advanced_form.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="file_upload.html">Muliple File Upload</a></li>
<li><a href="dropzone.html">Dropzone</a></li>
<li><a href="inline_editor.html">Inline Editor</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="mail.html">Inbox</a></li>
<li><a href="mail_compose.html">Compose Mail</a></li>
<li><a href="mail_view.html">View Mail</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="c3_chart.html">C3 Chart</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class=" fa fa-bar-chart-o"></i>
<span>Maps</span>
</a>
<ul class="sub">
<li><a href="google_map.html">Google Map</a></li>
<li><a href="vector_map.html">Vector Map</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="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="pricing_table.html">Pricing Table</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="gallery.html">Media Gallery</a></li><li><a href="404.html">404 Error</a></li>
<li><a href="500.html">500 Error</a></li>
<li><a href="registration.html">Registration</a></li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-user"></i>
<span>Login Page</span>
</a>
</li>
</ul></div>
<!-- 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-sm-8">
<section class="panel">
<header class="panel-heading">
Typography
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-cog"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<h3>Headings</h3>
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
<div class="col-md-6">
<h3>Texts</h3>
<p class="muted">
Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p class="text-warning">
Etiam porta sem malesuada magna mollis euismod.
</p>
<p class="text-danger">
Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p class="text-info">
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
</p>
<p class="text-success">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<h3>Sample text with lead body</h3>
<p class="lead">
Lead body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
</p>
</div>
<div class="col-md-6">
<h3>Sample text</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
</p>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<h3>Address</h3>
<div class="well">
<address>
<strong>ThemeBucket</strong><br>
ABC Ave, Suite 14<br>
BucketLand, Australia <br>
<abbr title="Phone">P:</abbr> (123) 456-7890 </address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">
first.last@email.com
</a>
<br>
<br>
<strong>Web Address</strong><br>
<a href="http://themebucket.net">
themebucket.net
</a>
</address>
</div>
</div>
<div class="col-md-6">
<h3>Some more text here</h3>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<hr>
<h4> Alignments </h4>
<p class="text-left">
Left aligned text.
</p>
<p class="text-center">
Center aligned text.
</p>
<p class="text-right">
Right aligned text.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<h3> Blockquotes </h3>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.
</p>
</blockquote>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
<div class="clearfix">
<blockquote class="pull-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
</div>
</div>
<div class="col-md-6">
<h3> Wells </h3>
<div class="well">
<h4>Default well</h4>
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.Integer molestie lorem at massa Integer molestie lorem at massa Integer molestie lorem at massa Integer molestie lorem at massa.
</div>
<div class="well well-large">
<h4>Large Well</h4>
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Integer molestie lorem at massa Integer molestie lorem at massa Integer molestie lorem at massa
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<h3>Description lists</h3>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Lorem Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Ipsum Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
</div>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel">
<header class="panel-heading">
Unordered Lists
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-cog"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="panel-body">
<ul>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Facilisis in pretium nisl aliquet
</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>
Phasellus iaculis neque
</li>
<li>
Purus sodales ultricies
</li>
<li>
Vestibulum laoreet porttitor sem
</li>
<li>
Ac tristique libero volutpat at
</li>
</ul>
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ul>
</div>
</section>
<section class="panel">
<header class="panel-heading">
Ordered Lists
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-cog"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="panel-body">
<ol>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Facilisis in pretium nisl aliquet
</li>
<li>
Nulla volutpat aliquam velit
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ol>
</div>
</section>
<section class="panel">
<header class="panel-heading">
Unstyled Lists
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-cog"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="panel-body">
<ul class="list-unstyled">
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>
Phasellus iaculis neque
</li>
<li>
Purus sodales ultricies
</li>
<li>
Vestibulum laoreet porttitor sem
</li>
<li>
Ac tristique libero volutpat at
</li>
</ul>
</li>
<li>
Nulla volutpat aliquam velit
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ul>
</div>
</section>
<section class="panel">
<header class="panel-heading">
Inline Lists
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-cog"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="panel-body">
<ul class="list-inline">
<li>
1. Lorem
</li>
<li>
2. Ipsum
</li>
<li>
3. Dolor
</li>
<li>
4. Ament
</li>
<li>
5. Bucket
</li>
<li>
6. Theme
</li>
</ul>
</div>
</section>
<section class="panel">
<header class="panel-heading">
Text States
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-cog"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="panel-body">
<p class="text-muted">
Muted text Sample
</p>
<p class="text-primary">
Primary text Sample
</p>
<p class="text-success">
Success text Sample
</p>
<p class="text-info">
Info text Sample
</p>
<p class="text-warning">
Warning text Sample
</p>
<p class="text-danger">
Danger text Sample
</p>
</div>
</section>
</div>
</div>
<!-- page end-->
</section>
</section>
<!--main content end-->
<!--right sidebar start-->
<div class="right-sidebar">
<div class="search-row">
<input type="text" placeholder="Search" class="form-control">
</div>
<div class="right-stat-bar">
<ul class="right-side-accordion">
<li class="widget-collapsible">
<a href="#" class="head widget-head red-bg active clearfix">
<span class="pull-left">work progress (5)</span>
<span class="pull-right widget-collapse"><i class="ico-minus"></i></span>
</a>
<ul class="widget-container">
<li>
<div class="prog-row side-mini-stat clearfix">
<div class="side-graph-info">
<h4>Target sell</h4>
<p>
25%, Deadline 12 june 13
</p>
</div>
<div class="side-mini-graph">
<div class="target-sell">
</div>
</div>
</div>
<div class="prog-row side-mini-stat">
<div class="side-graph-info">
<h4>product delivery</h4>
<p>
55%, Deadline 12 june 13
</p>
</div>
<div class="side-mini-graph">
<div class="p-delivery">
<div class="sparkline" data-type="bar" data-resize="true" data-height="30" data-width="90%" data-bar-color="#39b7ab" data-bar-width="5" data-data="[200,135,667,333,526,996,564,123,890,564,455]">
</div>
</div>
</div>
</div>
<div class="prog-row side-mini-stat">
<div class="side-graph-info payment-info">
<h4>payment collection</h4>
<p>
25%, Deadline 12 june 13
</p>
</div>
<div class="side-mini-graph">
<div class="p-collection">
<span class="pc-epie-chart" data-percent="45">
<span class="percent"></span>
</span>
</div>
</div>
</div>
<div class="prog-row side-mini-stat">
<div class="side-graph-info">
<h4>delivery pending</h4>
<p>
44%, Deadline 12 june 13
</p>
</div>
<div class="side-mini-graph">
<div class="d-pending">
</div>
</div>
</div>
<div class="prog-row side-mini-stat">
<div class="col-md-12">
<h4>total progress</h4>
<p>
50%, Deadline 12 june 13
</p>
<div class="progress progress-xs mtop10">
<div style="width: 50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info">
<span class="sr-only">50% Complete</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="widget-collapsible">
<a href="#" class="head widget-head terques-bg active clearfix">
<span class="pull-left">contact online (5)</span>
<span class="pull-right widget-collapse"><i class="ico-minus"></i></span>
</a>
<ul class="widget-container">
<li>
<div class="prog-row">
<div class="user-thumb">
<a href="#"><img src="images/avatar1_small.jpg" alt=""></a>
</div>
<div class="user-details">
<h4><a href="#">Jonathan Smith</a></h4>
<p>
Work for fun
</p>
</div>
<div class="user-status text-danger">
<i class="fa fa-comments-o"></i>
</div>
</div>
<div class="prog-row">
<div class="user-thumb">
<a href="#"><img src="images/avatar1.jpg" alt=""></a>
</div>
<div class="user-details">
<h4><a href="#">Anjelina Joe</a></h4>
<p>
Available
</p>
</div>
<div class="user-status text-success">
<i class="fa fa-comments-o"></i>
</div>
</div>
<div class="prog-row">
<div class="user-thumb">
<a href="#"><img src="images/chat-avatar2.jpg" alt=""></a>
</div>
<div class="user-details">
<h4><a href="#">John Doe</a></h4>
<p>
Away from Desk
</p>
</div>
<div class="user-status text-warning">
<i class="fa fa-comments-o"></i>
</div>
</div>
<div class="prog-row">
<div class="user-thumb">
<a href="#"><img src="images/avatar1_small.jpg" alt=""></a>
</div>
<div class="user-details">
<h4><a href="#">Mark Henry</a></h4>
<p>
working
</p>
</div>
<div class="user-status text-info">
<i class="fa fa-comments-o"></i>
</div>
</div>
<div class="prog-row">
<div class="user-thumb">
<a href="#"><img src="images/avatar1.jpg" alt=""></a>
</div>
<div class="user-details">
<h4><a href="#">Shila Jones</a></h4>
<p>
Work for fun
</p>
</div>
<div class="user-status text-danger">
<i class="fa fa-comments-o"></i>
</div>
</div>
<p class="text-center">
<a href="#" class="view-btn">View all Contacts</a>
</p>
</li>
</ul>
</li>
<li class="widget-collapsible">
<a href="#" class="head widget-head purple-bg active">
<span class="pull-left"> recent activity (3)</span>
<span class="pull-right widget-collapse"><i class="ico-minus"></i></span>
</a>
<ul class="widget-container">
<li>
<div class="prog-row">
<div class="user-thumb rsn-activity">
<i class="fa fa-clock-o"></i>
</div>
<div class="rsn-details ">
<p class="text-muted">
just now
</p>
<p>
<a href="#">Jim Doe </a>Purchased new equipments for zonal office setup
</p>
</div>
</div>
<div class="prog-row">
<div class="user-thumb rsn-activity">
<i class="fa fa-clock-o"></i>
</div>
<div class="rsn-details ">
<p class="text-muted">
2 min ago
</p>
<p>
<a href="#">Jane Doe </a>Purchased new equipments for zonal office setup
</p>
</div>
</div>
<div class="prog-row">
<div class="user-thumb rsn-activity">
<i class="fa fa-clock-o"></i>
</div>
<div class="rsn-details ">
<p class="text-muted">
1 day ago
</p>
<p>
<a href="#">Jim Doe </a>Purchased new equipments for zonal office setup
</p>
</div>
</div>
</li>
</ul>
</li>
<li class="widget-collapsible">
<a href="#" class="head widget-head yellow-bg active">
<span class="pull-left"> shipment status</span>
<span class="pull-right widget-collapse"><i class="ico-minus"></i></span>
</a>
<ul class="widget-container">
<li>
<div class="col-md-12">
<div class="prog-row">
<p>
Full sleeve baby wear (SL: 17665)
</p>
<div class="progress progress-xs mtop10">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete</span>
</div>
</div>
</div>
<div class="prog-row">
<p>
Full sleeve baby wear (SL: 17665)
</p>
<div class="progress progress-xs mtop10">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
<span class="sr-only">70% Completed</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!--right sidebar end-->
</section>
<!-- Placed js at the end of the document so the pages load faster -->
<!--Core js-->
<script src="js/jquery.js"></script>
<script src="bs3/js/bootstrap.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-slimScroll-1.3.0/jquery.slimscroll.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<!--Easy Pie Chart-->
<script src="js/easypiechart/jquery.easypiechart.js"></script>
<!--Sparkline Chart-->
<script src="js/sparkline/jquery.sparkline.js"></script>
<!--jQuery Flot Chart-->
<script src="js/flot-chart/jquery.flot.js"></script>
<script src="js/flot-chart/jquery.flot.tooltip.min.js"></script>
<script src="js/flot-chart/jquery.flot.resize.js"></script>
<script src="js/flot-chart/jquery.flot.pie.resize.js"></script>
<!--common script init for all pages-->
<script src="js/scripts.js"></script>
</body>
</html>