eclass.unmer.ac.id

<!DOCTYPE html>

<title>Misc - UI elements - PixelAdmin: Responsive Bootstrap Template</title>

<script>function _pxDemo_loadStylesheet(a,b,c){var c=c||decodeURIComponent((new RegExp(";\\s*"+encodeURIComponent("px-demo-theme")+"\\s*=\\s*([^;]+)\\s*;","g").exec(";"+document.cookie+";")||[])[1]||"clean"),d="rtl"===document.getElementsByTagName("html")[0].getAttribute("dir");document.write(a.replace(/^(.*?)((?:\.min)?\.css)$/,'<link href="$1'+(c.indexOf("dark")!==-1&&a.indexOf("/css/")!==-1&&a.indexOf("/themes/")===-1?"-dark":"")+(!d||0!==a.indexOf("assets/css")&&0!==a.indexOf("assets/demo")?"":".rtl")+'$2" rel="stylesheet" type="text/css"'+(b?'class="'+b+'"':"")+">"))}</script>

<script>"ltr"!==document.getElementsByTagName("html")[0].getAttribute("dir")&&"1"===decodeURIComponent((new RegExp(";\\s*"+encodeURIComponent("px-demo-rtl")+"\\s*=\\s*([^;]+)\\s*;","g").exec(";"+document.cookie+";")||[])[1]||"0")&&document.getElementsByTagName("html")[0].setAttribute("dir","rtl");</script>

<script>
    _pxDemo_loadStylesheet('assets/css/bootstrap.min.css', 'px-demo-stylesheet-bs');
    _pxDemo_loadStylesheet('assets/css/pixeladmin.min.css', 'px-demo-stylesheet-core');
    _pxDemo_loadStylesheet('assets/css/widgets.min.css', 'px-demo-stylesheet-widgets');
  </script>

<script>
    function _pxDemo_loadTheme(a){var b=decodeURIComponent((new RegExp(";\\s*"+encodeURIComponent("px-demo-theme")+"\\s*=\\s*([^;]+)\\s*;","g").exec(";"+document.cookie+";")||[])[1]||"clean");_pxDemo_loadStylesheet(a+b+".min.css","px-demo-stylesheet-theme",b)}
    _pxDemo_loadTheme('assets/css/themes/');
  </script>

<script>_pxDemo_loadStylesheet('assets/demo/demo.css');</script>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/holder/2.9.0/holder.js"></script>

<script src="assets/pace/pace.min.js"></script>

<ul class="px-nav-content">
      <li class="px-nav-box p-a-3 b-b-1" id="demo-px-nav-box">
        <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <img src="assets/demo/avatars/1.jpg" alt="" class="pull-xs-left m-r-2 border-round" style="width: 54px; height: 54px;">
        <div class="font-size-16"><span class="font-weight-light">Welcome, </span><strong>John</strong></div>
        <div class="btn-group" style="margin-top: 4px;">
          <a href="#" class="btn btn-xs btn-primary btn-outline"><i class="fa fa-envelope"></i></a>
          <a href="#" class="btn btn-xs btn-primary btn-outline"><i class="fa fa-user"></i></a>
          <a href="#" class="btn btn-xs btn-primary btn-outline"><i class="fa fa-cog"></i></a>
          <a href="#" class="btn btn-xs btn-danger btn-outline"><i class="fa fa-power-off"></i></a>
        </div>
      </li>

<li class="px-nav-item px-nav-dropdown">
        <a href="#"><i class="px-nav-icon ion-ios-pulse-strong"></i><span class="px-nav-label">Dashboards<span class="label label-danger">5</span></span></a>

<ul class="px-nav-dropdown-menu">
          <li class="px-nav-item"><a href="index.html"><span class="px-nav-label">Default</span></a></li>
          <li class="px-nav-item"><a href="dashboards-analytics.html"><span class="px-nav-label">Analytics</span></a></li>
          <li class="px-nav-item"><a href="dashboards-videos.html"><span class="px-nav-label">Videos</span></a></li>
          <li class="px-nav-item"><a href="dashboards-financial.html"><span class="px-nav-label">Financial</span></a></li>
          <li class="px-nav-item"><a href="dashboards-blog.html"><span class="px-nav-label">Blog</span></a></li>
        </ul>
      </li>
      <li class="px-nav-item">
        <a href="boxes.html"><i class="px-nav-icon ion-ios-analytics"></i><span class="px-nav-label">Boxes</span></a>
      </li>
      <li class="px-nav-item px-nav-dropdown">
        <a href="#"><i class="px-nav-icon ion-erlenmeyer-flask"></i><span class="px-nav-label">Widgets</span></a>

<ul class="px-nav-dropdown-menu">
          <li class="px-nav-item"><a href="widgets-lists.html"><span class="px-nav-label">Lists</span></a></li>
          <li class="px-nav-item"><a href="widgets-pricing.html"><span class="px-nav-label">Pricing</span></a></li>
          <li class="px-nav-item"><a href="widgets-timeline.html"><span class="px-nav-label">Timeline</span></a></li>
          <li class="px-nav-item"><a href="widgets-misc.html"><span class="px-nav-label">Misc</span></a></li>
        </ul>
      </li>
      <li class="px-nav-item">
        <a href="utilities.html"><i class="px-nav-icon ion-cube"></i><span class="px-nav-label">Utilities</span></a>
      </li>
      <li class="px-nav-item px-nav-dropdown">
        <a href="#"><i class="px-nav-icon ion-monitor"></i><span class="px-nav-label">UI elements</span></a>

<ul class="px-nav-dropdown-menu">
          <li class="px-nav-item"><a href="ui-buttons.html"><span class="px-nav-label">Buttons</span></a></li>
          <li class="px-nav-item"><a href="ui-tabs.html"><span class="px-nav-label">Tabs & Accordions</span></a></li>
          <li class="px-nav-item"><a href="ui-modals.html"><span class="px-nav-label">Modals</span></a></li>
          <li class="px-nav-item"><a href="ui-alerts.html"><span class="px-nav-label">Alerts & Tooltips</span></a></li>
          <li class="px-nav-item"><a href="ui-panels.html"><span class="px-nav-label">Panels</span></a></li>
          <li class="px-nav-item"><a href="ui-sortable.html"><span class="px-nav-label">Sortable</span></a></li>
          <li class="px-nav-item"><a href="ui-carousel.html"><span class="px-nav-label">Carousel</span></a></li>
          <li class="px-nav-item"><a href="ui-misc.html"><span class="px-nav-label">Misc</span></a></li>
        </ul>
      </li>
      <li class="px-nav-item px-nav-dropdown">
        <a href="#"><i class="px-nav-icon ion-android-checkbox-outline"></i><span class="px-nav-label">Forms</span></a>

<ul class="px-nav-dropdown-menu">
          <li class="px-nav-item"><a href="forms-layout.html"><span class="px-nav-label">Layout</span></a></li>
          <li class="px-nav-item"><a href="forms-controls.html"><span class="px-nav-label">Controls</span></a></li>
          <li class="px-nav-item"><a href="forms-components.html"><span class="px-nav-label">Components</span></a></li>
          <li class="px-nav-item"><a href="forms-advanced.html"><span class="px-nav-label">Advanced</span></a></li>
          <li class="px-nav-item"><a href="forms-sliders.html"><span class="px-nav-label">Sliders</span></a></li>
          <li class="px-nav-item"><a href="forms-pickers.html"><span class="px-nav-label">Pickers</span></a></li>
          <li class="px-nav-item"><a href="forms-editors.html"><span class="px-nav-label">Editors</span></a></li>
          <li class="px-nav-item"><a href="forms-validation.html"><span class="px-nav-label">Validation</span></a></li>
        </ul>
      </li>
      <li class="px-nav-item px-nav-dropdown">
        <a href="#"><i class="px-nav-icon ion-ios-keypad"></i><span class="px-nav-label">Tables</span></a>

<ul class="px-nav-dropdown-menu">
          <li class="px-nav-item"><a href="tables-bootstrap.html"><span class="px-nav-label">Bootstrap</span></a></li>
          <li class="px-nav-item"><a href="tables-datatables.html"><span class="px-nav-label">DataTables</span></a></li>
          <li class="px-nav-item"><a href="tables-editable-table.html"><span class="px-nav-label">editableTableWidget</span></a></li>
        </ul>
      </li>
      <li class="px-nav-item px-nav-dropdown">
        <a href="#"><i class="px-nav-icon ion-stats-bars"></i><span class="px-nav-label">Charts</span></a>

<ul class="px-nav-dropdown-menu">
          <li class="px-nav-item"><a href="charts-flot.html"><span class="px-nav-label">Flot.js</span></a></li>
          <li class="px-nav-item"><a href="charts-morris.html"><span class="px-nav-label">Morris.js</span></a></li>
          <li class="px-nav-item"><a href="charts-chart.html"><span class="px-nav-label">Chart.js</span></a></li>
          <li class="px-nav-item"><a href="charts-chartist.html"><span class="px-nav-label">Chartist</span></a></li>
          <li class="px-nav-item"><a href="charts-c3.html"><span class="px-nav-label">C3.js</span></a></li>
          <li class="px-nav-item"><a href="charts-sparkline.html"><span class="px-nav-label">Sparkline</span></a></li>
          <li class="px-nav-item"><a href="charts-easy-pie-chart.html"><span class="px-nav-label">Easy Pie Chart</span></a></li>
        </ul>
      </li>
      <li class="px-nav-item px-nav-dropdown">
        <a href="#"><i class="px-nav-icon ion-ios-paper"></i><span class="px-nav-label">Pages<span class="label label-info">22</span></span></a>

<ul class="px-nav-dropdown-menu">
          <li class="px-nav-item px-nav-dropdown">
            <a href="#"><span class="px-nav-label">Authentication</span></a>

<ul class="px-nav-dropdown-menu">
              <li class="px-nav-item"><a href="pages-blog-posts.html"><span class="px-nav-label">Posts</span></a></li>
              <li class="px-nav-item"><a href="pages-blog-post.html"><span class="px-nav-label">Post</span></a></li>
            </ul>
          </li>
          <li class="px-nav-item px-nav-dropdown">
            <a href="#"><span class="px-nav-label">Error pages</span></a>

<ul class="px-nav-dropdown-menu">
              <li class="px-nav-item"><a href="pages-404.html"><span class="px-nav-label">404</span></a></li>
              <li class="px-nav-item"><a href="pages-500.html"><span class="px-nav-label">500</span></a></li>
            </ul>
          </li>
          <li class="px-nav-item px-nav-dropdown">
            <a href="#"><span class="px-nav-label">Forum</span></a>

<ul class="px-nav-dropdown-menu">
              <li class="px-nav-item"><a href="pages-forum-forums-list.html"><span class="px-nav-label">Forums list</span></a></li>
              <li class="px-nav-item"><a href="pages-forum-topics.html"><span class="px-nav-label">Topics</span></a></li>
              <li class="px-nav-item"><a href="pages-forum-thread.html"><span class="px-nav-label">Thread</span></a></li>
            </ul>
          </li>
          <li class="px-nav-item px-nav-dropdown">
            <a href="#"><span class="px-nav-label">Messages</span></a>

<ul class="px-nav-dropdown-menu">
              <li class="px-nav-item"><a href="pages-messages-list.html"><span class="px-nav-label">List</span></a></li>
              <li class="px-nav-item"><a href="pages-messages-item.html"><span class="px-nav-label">Item</span></a></li>
              <li class="px-nav-item"><a href="pages-messages-new.html"><span class="px-nav-label">New message</span></a></li>
            </ul>
          </li>
          <li class="px-nav-item"><a href="pages-about-us.html"><span class="px-nav-label">About Us</span></a></li>
          <li class="px-nav-item"><a href="pages-account.html"><span class="px-nav-label">Account</span></a></li>
          <li class="px-nav-item"><a href="pages-invoice.html"><span class="px-nav-label">Invoice</span></a></li>
          <li class="px-nav-item"><a href="pages-pricing.html"><span class="px-nav-label">Pricing</span></a></li>
          <li class="px-nav-item"><a href="pages-profile-v1.html"><span class="px-nav-label">Profile v1</span></a></li>
          <li class="px-nav-item"><a href="pages-profile-v2.html"><span class="px-nav-label">Profile v2</span></a></li>
          <li class="px-nav-item"><a href="pages-search-results.html"><span class="px-nav-label">Search results</span></a></li>
          <li class="px-nav-item"><a href="pages-support-center.html"><span class="px-nav-label">Support center</span></a></li>
          <li class="px-nav-item"><a href="pages-blank.html"><span class="px-nav-label">Blank</span></a></li>
        </ul>
      </li>
      <li class="px-nav-item">
        <a href="../color_generator/index.html"><i class="px-nav-icon ion-aperture"></i><span class="px-nav-label">Color Generator</span></a>
      </li>
      <li class="px-nav-item">
        <a href="../docs/index.html" target="_blank" class="bg-success text-white b-a-0"><i class="px-nav-icon ion-social-buffer"></i><span class="px-nav-label">Docs</span></a>
      </li>
      <li class="px-nav-box b-t-1 p-a-2">
        <a href="pages-invoice.html" class="btn btn-primary btn-block btn-outline">Create Invoice</a>
      </li>
    </ul>
  </nav>

<nav class="navbar px-navbar">
    
    <div class="navbar-header">
      <a class="navbar-brand px-demo-brand" href="index.html"><span class="px-demo-logo bg-primary"><span class="px-demo-logo-1"></span><span class="px-demo-logo-2"></span><span class="px-demo-logo-3"></span><span class="px-demo-logo-4"></span><span class="px-demo-logo-5"></span><span class="px-demo-logo-6"></span><span class="px-demo-logo-7"></span><span class="px-demo-logo-8"></span><span class="px-demo-logo-9"></span></span>PixelAdmin</a>
    </div>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#px-demo-navbar-collapse" aria-expanded="false"><i class="navbar-toggle-icon"></i></button>

<div class="collapse navbar-collapse" id="px-demo-navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Categories</a>
          <div class="dropdown-multi-column">
            <ul class="dropdown-menu dropdown-column col-md-4">
              <li class="dropdown-header">Business</li>
              <li><a href="#">Design &amp; Urban Ecologies</a></li>
              <li><a href="#">Fine Art</a></li>
              <li><a href="#">Fashion Design</a></li>
              <li><a href="#">Strategic Design</a></li>
            </ul>
            <ul class="dropdown-menu dropdown-column col-md-4">
              <li class="dropdown-header">Liberal Arts</li>
              <li><a href="#">Anthropology</a></li>
              <li><a href="#">Media Studies</a></li>
              <li><a href="#">Philosophy</a></li>
            </ul>
            <ul class="dropdown-menu dropdown-column col-md-4">
              <li class="dropdown-header">Social Sciences</li>
              <li><a href="#">Food Studies</a></li>
              <li><a href="#">Journalism</a></li>
              <li><a href="#">Non Profit Management</a></li>
            </ul>
          </div>
        </li>

<li class="dropdown">
          <a href class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bookmark m-r-1"></i>Links</a>
          <ul class="dropdown-menu">
            <li class="dropdown-toggle">
              <a href>Products</a>
              <ul class="dropdown-menu">
                <li><a href="#">All</a></li>
                <li><a href="#">Popular</a></li>
                <li><a href="#">Recent</a></li>
                <li><a href="#">Featured</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="fa fa-plus m-r-1"></i>Add product</a></li>
              </ul>
            </li>
            <li class="dropdown-toggle">
              <a href>Users</a>
              <ul class="dropdown-menu">
                <li><a href="#">All</a></li>
                <li><a href="#">Recent</a></li>
                <li><a href="#">Banned</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="fa fa-user-plus m-r-1"></i>Create user</a></li>
              </ul>
            </li>
            <li class="dropdown-toggle">
              <a href>Blog</a>
              <ul class="dropdown-menu">
                <li><a href="#">All</a></li>
                <li><a href="#">Popular</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="fa fa-edit m-r-1"></i>New blog post</a></li>
              </ul>
            </li>
            <li class="divider"></li>
            <li><a href="#">Overview</a></li>
          </ul>
        </li>
      </ul>

<ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="https://stackoverflow.com" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <i class="px-navbar-icon fa fa-bullhorn font-size-14"></i>
            <span class="px-navbar-icon-label">Notifications</span>
            <span class="px-navbar-label label label-success">5</span>
          </a>
          <div class="dropdown-menu p-a-0" style="width: 300px">
            <div id="navbar-notifications" style="height: 280px; position: relative;">
              <div class="widget-notifications-item">
                <div class="widget-notifications-title text-danger">SYSTEM</div>
                <div class="widget-notifications-description"><strong>Error 500</strong>: Syntax error in index.php at line <strong>461</strong>.</div>
                <div class="widget-notifications-date">12h ago</div>
                <div class="widget-notifications-icon fa fa-hdd-o bg-danger"></div>
              </div>

<div class="widget-notifications-item">
                <div class="widget-notifications-title text-info">STORE</div>
                <div class="widget-notifications-description">You have <strong>9</strong> new orders.</div>
                <div class="widget-notifications-date">12h ago</div>
                <div class="widget-notifications-icon fa fa-truck bg-info"></div>
              </div>

<div class="widget-notifications-item">
                <div class="widget-notifications-title text-default">CRON DAEMON</div>
                <div class="widget-notifications-description">Job <strong>"Clean DB"</strong> has been completed.</div>
                <div class="widget-notifications-date">12h ago</div>
                <div class="widget-notifications-icon fa fa-clock-o bg-default"></div>
              </div>

<div class="widget-notifications-item">
                <div class="widget-notifications-title text-success">SYSTEM</div>
                <div class="widget-notifications-description">Server <strong>up</strong>.</div>
                <div class="widget-notifications-date">12h ago</div>
                <div class="widget-notifications-icon fa fa-hdd-o bg-success"></div>
              </div>

<div class="widget-notifications-item">
                <div class="widget-notifications-title text-warning">SYSTEM</div>
                <div class="widget-notifications-description"><strong>Warning</strong>: Processor load <strong>92%</strong>.</div>
                <div class="widget-notifications-date">12h ago</div>
                <div class="widget-notifications-icon fa fa-hdd-o bg-warning"></div>
              </div>
            </div>

<a href="#" class="widget-more-link">MORE NOTIFICATIONS</a>
          </div>
        </li>

<li class="dropdown">
          <a href="https://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <i class="px-navbar-icon fa fa-envelope font-size-14"></i>
            <span class="px-navbar-icon-label">Income messages</span>
            <span class="px-navbar-label label label-danger">8</span>
          </a>
          <div class="dropdown-menu p-a-0" style="width: 300px;">
            <div id="navbar-messages" style="height: 280px; position: relative;">
              <div class="widget-messages-alt-item">
                <img src="assets/demo/avatars/2.jpg" alt="" class="widget-messages-alt-avatar">
                <a href="#" class="widget-messages-alt-subject text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
                <div class="widget-messages-alt-description">from <a href="#">Robert Jang</a></div>
                <div class="widget-messages-alt-date">2h ago</div>
              </div>

<div class="widget-messages-alt-item">
                <img src="assets/demo/avatars/3.jpg" alt="" class="widget-messages-alt-avatar">
                <a href="#" class="widget-messages-alt-subject text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                <div class="widget-messages-alt-description">from <a href="#">Michelle Bortz</a></div>
                <div class="widget-messages-alt-date">2h ago</div>
              </div>

<div class="widget-messages-alt-item">
                <img src="assets/demo/avatars/4.jpg" alt="" class="widget-messages-alt-avatar">
                <a href="#" class="widget-messages-alt-subject text-truncate">Lorem ipsum dolor sit amet.</a>
                <div class="widget-messages-alt-description">from <a href="#">Timothy Owens</a></div>
                <div class="widget-messages-alt-date">2h ago</div>
              </div>

<div class="widget-messages-alt-item">
                <img src="assets/demo/avatars/5.jpg" alt="" class="widget-messages-alt-avatar">
                <a href="#" class="widget-messages-alt-subject text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                <div class="widget-messages-alt-description">from <a href="#">Denise Steiner</a></div>
                <div class="widget-messages-alt-date">2h ago</div>
              </div>

<div class="widget-messages-alt-item">
                <img src="assets/demo/avatars/2.jpg" alt="" class="widget-messages-alt-avatar">
                <a href="#" class="widget-messages-alt-subject text-truncate">Lorem ipsum dolor sit amet.</a>
                <div class="widget-messages-alt-description">from <a href="#">Robert Jang</a></div>
                <div class="widget-messages-alt-date">2h ago</div>
              </div>

<a href="#" class="widget-more-link">MORE MESSAGES</a>
          </div> 
        </li>

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <img src="assets/demo/avatars/1.jpg" alt="" class="px-navbar-image">
            <span class="hidden-md">John Doe</span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="pages-profile-v2.html"><span class="label label-warning pull-xs-right"><i class="fa fa-asterisk"></i></span>Profile</a></li>
            <li><a href="pages-account.html">Account</a></li>
            <li><a href="pages-messages-list.html"><i class="dropdown-icon fa fa-envelope"></i>&nbsp;&nbsp;Messages</a></li>
            <li class="divider"></li>
            <li><a href="pages-signin-v1.html"><i class="dropdown-icon fa fa-power-off"></i>&nbsp;&nbsp;Log Out</a></li>
          </ul>
        </li>

</ul>
    </div>
  </nav>

<div class="px-content">
  <ol class="breadcrumb page-breadcrumb" style="display:none">
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Library</a></li>
    <li class="active">Data</li>
  </ol>

<div class="page-header">
    <h1><span class="text-muted font-weight-light"><i class="page-header-icon ion-monitor"></i>UI elements / </span>Misc</h1>
  </div>

<div class="panel">
        <div class="panel-heading">
          <div class="panel-title">Labels, badges & tags</div>
        </div>
        <div class="panel-body">
          <h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">LABELS</h6>

<a href="#" class="label">Default</a>
          <a href="#" class="label label-primary">Primary</a>
          <a href="#" class="label label-success">Success</a>
          <a href="#" class="label label-warning">Warning</a>
          <a href="#" class="label label-danger">Danger</a>
          <a href="#" class="label label-info">Info</a>

<a href="#" class="label label-tag">Default</a>
          <a href="#" class="label label-primary label-tag">Primary</a>
          <a href="#" class="label label-success label-tag">Success</a>
          <a href="#" class="label label-warning label-tag">Warning</a>
          <a href="#" class="label label-danger label-tag">Danger</a>
          <a href="#" class="label label-info label-tag">Info</a>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">PILLS</h6>

<a href="#" class="label label-pill">Default</a>
          <a href="#" class="label label-primary label-pill">Primary</a>
          <a href="#" class="label label-success label-pill">Success</a>
          <a href="#" class="label label-warning label-pill">Warning</a>
          <a href="#" class="label label-danger label-pill">Danger</a>
          <a href="#" class="label label-info label-pill">Info</a>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">WITHIN HEADING</h6>

<h1 class="m-t-0">Example heading <span class="label label-primary">New</span></h1>
          <h2 class="m-t-0">Example heading <span class="label label-success label-tag">New</span></h2>
          <h4 class="m-t-0">Example heading <span class="label label-info label-pill">New</span></h4>
          <h4 class="m-t-0">Example heading <span class="label label-warning">New</span></h4>
          <h5 class="m-t-0">Example heading <span class="label label-danger">New</span></h5>
          <h6 class="m-t-0">Example heading <span class="label">New</span></h6>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">WITH IMAGE</h6>

<a href="#" class="label">
            <img src="assets/demo/avatars/1.jpg" class="label-image left">
            John
          </a>
          <a href="#" class="label label-primary">
            <img src="assets/demo/avatars/2.jpg" class="label-image left">
            Robert
          </a>
          <a href="#" class="label label-success">
            <img src="assets/demo/avatars/3.jpg" class="label-image left">
            Michelle
          </a>
          <a href="#" class="label label-warning">
            <img src="assets/demo/avatars/4.jpg" class="label-image right">
            Timothy
          </a>
          <a href="#" class="label label-danger">
            <img src="assets/demo/avatars/5.jpg" class="label-image right">
            Denise
          </a>
          <a href="#" class="label label-info">
            <img src="assets/demo/avatars/1.jpg" class="label-image right">
            John
          </a>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">OUTLINE</h6>

<a href="#" class="label label-outline">Default</a>
            <a href="#" class="label label-primary label-pill label-outline">Primary</a>
            <a href="#" class="label label-success label-outline">
              <img src="assets/demo/avatars/3.jpg" class="label-image left">
              Michelle
            </a>
            <a href="#" class="label label-warning label-outline">Warning</a>
            <a href="#" class="label label-danger label-pill label-outline">Danger</a>
            <a href="#" class="label label-info label-outline">
              <img src="assets/demo/avatars/1.jpg" class="label-image right">
              John
            </a>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">CORNER</h6>

<div class="row">
            <div class="col-lg-6">
              <div style="position: relative;" class="bg-white b-a-1 p-a-1 m-b-2">
                <a href="#" class="label label-primary label-corner left">
                  <span class="label-corner-content"><i class="fa fa-heart"></i></span>
                </a>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
              </div>
            </div>
            <div class="col-lg-6">
              <div style="position: relative;" class="bg-white b-a-1 p-a-1 m-b-2">
                <span class="label label-warning label-corner right">
                  <span class="label-corner-content"><i class="fa fa-star"></i></span>
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
              </div>
            </div>
          </div>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">RIBBON</h6>

<div class="row">
            <div class="col-lg-6">
              <div style="position: relative;" class="bg-white b-a-1 p-a-1 m-b-2">
                <a href="#" class="label label-primary label-ribbon left">
                  <i class="fa fa-heart"></i> Like!
                </a>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
              </div>
            </div>
            <div class="col-lg-6">
              <div style="position: relative;" class="bg-white b-a-1 p-a-1 m-b-2">
                <span class="label label-warning label-ribbon right label-outline">
                  <i class="fa fa-star"></i> Starred
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
              </div>
            </div>
          </div>
        </div>
      </div>

<div class="panel">
        <div class="panel-heading">
          <div class="panel-title">List groups</div>
        </div>
        <div class="panel-body">
          <ul class="list-group">
            <a href="#" class="list-group-item">Cras justo odio<span class="label label-success">14</span></a>
            <a href="#" class="list-group-item active">Dapibus ac facilisis in<span class="label label-danger label-pill">2</span></a>
            <a href="#" class="list-group-item">Morbi leo risus</a>
            <a href="#" class="list-group-item disabled"><i class="list-group-icon fa fa-bomb"></i>Porta ac consectetur ac<span class="label label-warning label-pill">12</span></a>
            <a href="#" class="list-group-item"><i class="list-group-icon fa fa-comment-o"></i>Vestibulum at eros</a>
          </ul>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">CUSTOM CONTENT</h6>

<div class="list-group">
            <a href="#" class="list-group-item active">
              <h4 class="list-group-item-heading">List group item heading</h4>
              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">List group item heading</h4>
              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">List group item heading</h4>
              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
          </div>
        </div>
      </div>

<div class="panel">
        <div class="panel-heading">
          <div class="panel-title">Dropdowns</div>
        </div>
        <div class="panel-body">
          <div class="clearfix">
            <ul class="dropdown-menu dropdowns-demo" style="display: block; position: relative;">
              <li><a href="#"><span class="label label-success pull-right">34</span>Action</a></li>
              <li><a href="#"><span class="badge badge-info pull-right">16</span>Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Dropdown header</li>
              <li><a href="#"><i class="fa fa-cloud"></i>&nbsp;&nbsp;With icon</a></li>
              <li><a href="#">Last action</a></li>
            </ul>
          </div>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">MULTI-LEVEL</h6>

<div class="dropdown">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              Multi-level dropdown
            </button>
            <div class="dropdown-menu">
              <li><a href="#">First action</a></li>

<li class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <a href="#">Second action</a>
                <ul class="dropdown-menu">
                  <li><a href="#">First action</a></li>
                  <li><a href="#">Second action</a></li>

<li class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <a href="#">Third action</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">First action</a></li>
                      <li><a href="#">Second action</a></li>
                    </ul>
                  </li>

</ul>
              </li>

<li><a href="#">Third action</a></li>

<li class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <a href="#">Fourth action</a>
                <ul class="dropdown-menu">
                  <li><a href="#">First action</a></li>
                  <li><a href="#">Second action</a></li>
                </ul>
              </li>
            </div>
          </div>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">MULTI-COLUMN</h6>

<div class="dropdown">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              Multi-column dropdown
            </button>
            <div class="dropdown-multi-column">
              <div class="dropdown-menu dropdown-column col-md-4">
                <li class="dropdown-header">Business</li>
                <li><a href="#">Design &amp; Urban Ecologies</a></li>
                <li><a href="#">Fine Art</a></li>
                <li><a href="#">Fashion Design</a></li>
                <li><a href="#">Strategic Design</a></li>
              </div>
              <div class="dropdown-menu dropdown-column col-md-4">
                <li class="dropdown-header">Liberal Arts</li>
                <li><a href="#">Anthropology</a></li>
                <li><a href="#">Media Studies</a></li>
                <li><a href="#">Philosophy</a></li>
              </div>
              <div class="dropdown-menu dropdown-column col-md-4">
                <li class="dropdown-header">Social Sciences</li>
                <li><a href="#">Food Studies</a></li>
                <li><a href="#">Journalism</a></li>
                <li><a href="#">Non Profit Management</a></li>
              </div>
            </div>
          </div>
        </div>
      </div>

</div>
    <div class="col-md-6">

<div class="panel">
        <div class="panel-heading">
          <div class="panel-title">Breadcrumbs</div>
        </div>
        <div class="panel-body">
          <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
          </ol>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">INVERTED</h6>

<div style="background: #478e9e;">
            <ol class="breadcrumb breadcrumb-inverted">
              <li><a href="#">Home</a></li>
              <li><a href="#">Library</a></li>
              <li class="active">Data</li>
            </ol>
          </div>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">PAGE BREADCRUMB</h6>

<button id="page-breadcrumb-demo-btn" class="btn btn-small btn-primary">Toggle page breadcrumb</button>
        </div>
      </div>

<div class="panel">
        <div class="panel-heading">
          <div class="panel-title">Progress</div>
        </div>
        <div class="panel-body">
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 40%"></div>
          </div>
          <div class="progress">
            <div class="progress-bar progress-bar-info" style="width: 20%"></div>
          </div>
          <div class="progress">
            <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
          </div>
          <div class="progress">
            <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
          </div>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">STRIPED</h6>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">ANIMATED</h6>

<div class="panel">
        <div class="panel-heading">
          <div class="panel-title">Pagination</div>
        </div>
        <div class="panel-body">
          <nav>
            <ul class="pagination">
              <li class="disabled"><a href="#">«</a></li>
              <li class="active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#">»</a></li>
            </ul>
          </nav>

<nav>
            <ul class="pager">
              <li><a href="#">Previous</a></li>
              <li><a href="#">Next</a></li>
            </ul>
          </nav>

<nav>
            <ul class="pager">
              <li class="previous disabled"><a href="#">← Older</a></li>
              <li class="next"><a href="#">Newer →</a></li>
            </ul>
          </nav>

<h6 class="m-t-0 m-b-2 font-weight-semibold text-muted">SIZES</h6>

<nav>
            <ul class="pager pager-xs">
              <li><a href="#">Previous</a></li>
              <li><a href="#">Next</a></li>
            </ul>
          </nav>

<nav>
            <ul class="pager pager-sm">
              <li><a href="#">Previous</a></li>
              <li><a href="#">Next</a></li>
            </ul>
          </nav>

<nav>
            <ul class="pager pager-lg">
              <li><a href="#">Previous</a></li>
              <li><a href="#">Next</a></li>
            </ul>
          </nav>
        </div>
      </div>

<div class="panel">
        <div class="panel-heading">
          <div class="panel-title">Notes</div>
        </div>
        <div class="panel-body">
          <div class="note note-success">
            <h4 class="note-title">Success note title</h4>
            <p>Success note text here.</p>
          </div>

<div class="note note-danger">
            <h4 class="note-title">Danger note title</h4>
            <p>Danger note text here.</p>
          </div>

<div class="note note-warning">
            <h4 class="note-title">Warning note title</h4>
            <p>Warning note text here.</p>
          </div>

<div class="note note-info">
            <h4 class="note-title">Info note title</h4>
            <p>Info note text here.</p>
          </div>
        </div>
      </div>

</div>
  </div>

<div class="panel">
    <div class="panel-heading">
      <div class="panel-title">Wizard</div>
    </div>
    <div class="panel-body">
      <div class="wizard wizard-bordered" id="wizard-basic">
        <div class="wizard-wrapper">
          <ul class="wizard-steps">
            <li data-target="#wizard-example-step1">
              <span class="wizard-step-number">1</span>
              <span class="wizard-step-complete"><i class="fa fa-check text-success"></i></span>
              <span class="wizard-step-caption">
                Step 1
                <span class="wizard-step-description">First step description</span>
              </span>
            </li>
            <li data-target="#wizard-example-step2">
              <span class="wizard-step-number">2</span>
              <span class="wizard-step-complete"><i class="fa fa-check text-success"></i></span>
              <span class="wizard-step-caption">
                Step 2
                <span class="wizard-step-description">Second step description</span>
              </span>
            </li>
            <li data-target="#wizard-example-step3">
              <span class="wizard-step-number">3</span>
              <span class="wizard-step-complete"><i class="fa fa-check text-success"></i></span>
              <span class="wizard-step-caption">
                Step 3
                <span class="wizard-step-description">Third step description. Lorem ipsum dolor sit amet</span>
              </span>
            </li>
            <li data-target="#wizard-example-step4">
              <span class="wizard-step-number">4</span>
              <span class="wizard-step-complete"><i class="fa fa-check text-success"></i></span>
              <span class="wizard-step-caption">
                Finish
              </span>
            </li>
          </ul>
        </div>
        <div class="wizard-content">
          <div class="wizard-pane" id="wizard-example-step1">
            <h4 class="m-y-2">Step 1</h4>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing 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 ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
              deserunt mollit anim id est laborum.
            </p>
            <div class="pull-right">
              <button type="button" class="btn btn-primary" data-wizard-action="next">Next</button>
            </div>
          </div>
          <div class="wizard-pane" id="wizard-example-step2">
            <h4 class="m-y-2">Step 2</h4>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
              totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
              sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
              modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
              veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
              commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
              nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
            </p>
            <div class="pull-right">
              <button type="button" class="btn" data-wizard-action="prev">Prev</button>
              <button type="button" class="btn btn-primary" data-wizard-action="next">Next</button>
            </div>
          </div>
          <div class="wizard-pane" id="wizard-example-step3">
            <h4 class="m-y-2">Step 3</h4>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
              totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
              sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
            </p>
            <div class="pull-right">
              <button type="button" class="btn" data-wizard-action="prev">Prev</button>
              <button type="button" class="btn btn-primary" data-wizard-action="next">Next</button>
            </div>
          </div>
          <div class="wizard-pane" id="wizard-example-step4">
            <h4 class="m-y-2">Finish</h4>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing 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 ex ea commodo consequat.
            </p>
            <div class="pull-right">
              <button type="button" class="btn" data-wizard-action="prev">Prev</button>
              <button type="button" class="btn btn-primary" data-wizard-action="finish">Finish</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="px-footer px-footer-bottom p-t-0">
    <div class="box m-a-0 bg-transparent">
      <div class="box-cell col-md-3 p-t-3">
        <h5 class="m-t-0 m-b-1 font-size-13">About Us</h5>
        <a href="#">Who we are</a><br>
        <a href="#">Jobs</a><br>
        <a href="#">Newsletters</a><br>
      </div>
      <div class="box-cell col-md-3 p-t-3">
        <h5 class="m-t-0 m-b-1 font-size-13">Help</h5>
        <a href="#">Support Center</a><br>
        <a href="#">Terms of Use</a><br>
        <a href="#">Privacy Policy</a><br>
      </div>
      <div class="box-cell col-md-3 p-t-3">
        <h5 class="m-t-0 m-b-1 font-size-13">Products</h5>
        <a href="#">Popular</a><br>
        <a href="#">Most rated</a><br>
        <a href="#">Recent</a><br>
      </div>
      <div class="box-cell col-md-3 p-t-3 valign-middle">
        <a href="#" class="display-block m-b-1 text-nowrap"><i class="fa fa-twitter"></i>&nbsp;&nbsp;@pixeladmin</a>
        <a href="#" class="display-block m-b-1 text-nowrap"><i class="fa fa-facebook"></i>&nbsp;&nbsp;PixelAdmin</a>
        <a href="#" class="display-block text-nowrap"><i class="fa fa-envelope"></i>&nbsp;&nbsp;support@pixeladmin.com</a>
      </div>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

$(function() {
      pxDemo.initializeDemoSidebar();

$('#px-demo-sidebar').pxSidebar();
      pxDemo.initializeDemo();
    });
  </script>

$(function() {
      var file = String(document.location).split('/').pop();

// Remove unnecessary file parts
      file = file.replace(/(\.html).*/i, '$1');

if (!/.html$/i.test(file)) {
        file = 'index.html';
      }

// Activate current nav item
      $('body > .px-nav')
        .find('.px-nav-item > a[href="' + file + '"]')
        .parent()
        .addClass('active');

$('body > .px-nav').pxNav();
      $('body > .px-footer').pxFooter();

$('#navbar-notifications').perfectScrollbar();
      $('#navbar-messages').perfectScrollbar();
    });
  </script>

$(function() {
      $('#wizard-basic').pxWizard();
    });

// -------------------------------------------------------------------------
    // Initialize breadcrumb switcher

$(function() {
      $('#page-breadcrumb-demo-btn').on('click', function() {
        var $breadcrumb = $('.page-breadcrumb');

$breadcrumb[$breadcrumb.is(':visible') ? 'hide' : 'show']();
      });
    });
  </script>
</body>
</html>