eclass.unmer.ac.id

<!DOCTYPE html>

<title>Panels - 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">
    <div class="page-header">
      <h1 class="pull-xs-left"><span class="text-muted font-weight-light"><i class="page-header-icon ion-monitor"></i>UI elements / </span>Panels</h1>
      <div class="m-b-3 visible-xs visible-sm clearfix"></div>
      <div class="pull-md-right text-nowrap">
        Style&nbsp;&nbsp;
        <select id="panel-style" class="form-control custom-select" style="display:inline-block;vertical-align:middle;width:150px;">
          <option value="panel" selected>Default</option>
          <option value="panel panel-success">Light</option>
          <option value="panel panel-success panel-body-colorful">Light colorful</option>
          <option value="panel panel-success panel-dark">Dark</option>
          <option value="panel panel-success panel-dark panel-body-colorful">Dark colorful</option>
        </select>
      </div>
    </div>

<div class="panel">
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-title">Title</div>
          <small class="panel-subtitle text-muted">Support panel subtitle</small>
          <img class="panel-img" data-src="holder.js/100px180?theme=social" alt="Panel image cap">
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">List group</span>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
          <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
          </ul>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Tabs</span>
            <ul class="nav nav-tabs nav-xs">
              <li class="active"><a href="#" data-toggle="tab">Home</a></li>
              <li><a href="#" data-toggle="tab">Profile</a></li>
              <li><a href="#" data-toggle="tab">More</a></li>
            </ul>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Labels</span>
            <div class="panel-heading-controls">
              <span class="label label-tag label-success">Tag</span>
              <span class="label label-danger">Label</span>
              <span class="label label-pill label-info">Badge</span>
            </div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Pagination</span>
            <div class="panel-heading-controls">
              <ul class="pagination pagination-xs">
                <li><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="#">»</a></li>
              </ul>
            </div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">With text</span>
            <div class="panel-heading-controls">
              <span class="panel-heading-text"><em>Just some text with <a href="#">link</a></em>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
              <button class="btn btn-xs">Button</button>
            </div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Icon</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Input group</span>
            <div class="panel-heading-controls col-sm-4">
              <form action="">
                <div class="input-group input-group-sm">
                  <input type="text" class="form-control" placeholder="Search..." name="s">
                  <span class="input-group-btn">
                    <button class="btn" type="submit">
                      <span class="fa fa-search"></span>
                    </button>
                  </span>
                </div>
              </form>
            </div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

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

<div class="panel">
          <div class="panel-title">Title</div>
          <small class="panel-subtitle text-muted">Support panel subtitle</small>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Panel header</span>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
          <div class="panel-footer">Panel footer</div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title"><i class="panel-title-icon fa fa-flask"></i>Title icon</span>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Table</span>
          </div>
          <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Buttons</span>
            <div class="panel-heading-controls">
              <button class="btn btn-xs btn-success btn-outline btn-outline-colorless"><i class="fa fa-check"></i> Apply</button>
              <button class="btn btn-xs btn-danger btn-outline"><i class="fa fa-close"></i></button>
              <div class="btn-group btn-group-xs">
                <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Alerts</span>
          </div>
          <div class="px-block-alerts">
            <div class="alert alert-success alert-dark">
              <button type="button" class="close" data-dismiss="alert">×</button>
              <strong>Well done!</strong> You successfully read this important alert message.
            </div>
            <div class="alert alert-info">
              <button type="button" class="close" data-dismiss="alert">×</button>
              <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
            </div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Pager</span>
            <div class="panel-heading-controls">
              <ul class="pager pager-xs">
                <li class="disabled"><a href="#">← Older</a></li>
                <li><a href="#">Newer →</a></li>
              </ul>
            </div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Progress</span>
            <div class="panel-heading-controls" style="width: 30%; max-width: 140px;">
              <div class="progress progress-striped active" style="width: 100%">
                <div class="progress-bar progress-bar-danger" style="width: 60%;"></div>
              </div>
            </div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Input</span>
            <div class="panel-heading-controls">
              <select class="form-control input-sm custom-select">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
            </div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

<div class="panel">
          <div class="panel-heading">
            <span class="panel-title">Switcher</span>
            <div class="panel-heading-controls">
              <label for="panel-with-switcher" class="switcher switcher-rounded switcher-sm switcher-primary switcher-blank">
                <input type="checkbox" id="panel-with-switcher" checked>
                <div class="switcher-indicator">
                  <div class="switcher-yes">ON</div>
                  <div class="switcher-no">OFF</div>
                </div>
              </label>
            </div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>

</div>
    </div>

<div class="panels-example">
      <div class="panel">
        <div class="panel-heading">
          <span class="panel-title">Wizard</span>
        </div>
        <div class="wizard panel-wizard" id="wizard-panel">
          <div class="wizard-wrapper">
            <ul class="wizard-steps">
              <li data-target="#wizard-panel-step1" class="completed">
                <span class="wizard-step-number">1</span>
                <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
                <span class="wizard-step-caption">
                  Step 1
                  <span class="wizard-step-description">Description</span>
                </span>
              </li>
              <li data-target="#wizard-panel-step2" class="active">
                <span class="wizard-step-number">2</span>
                <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
                <span class="wizard-step-caption">
                  Step 2
                  <span class="wizard-step-description">Description</span>
                </span>
              </li>
              <li data-target="#wizard-panel-step3">
                <span class="wizard-step-number">3</span>
                <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
                <span class="wizard-step-caption">
                  Step 3
                  <span class="wizard-step-description">Description</span>
                </span>
              </li>
              <li data-target="#wizard-panel-step4">
                <span class="wizard-step-number">4</span>
                <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
                <span class="wizard-step-caption">
                  Finish
                  <span class="wizard-step-description">Description</span>
                </span>
              </li>
            </ul>
          </div>
          <div class="wizard-content">
            <div class="wizard-pane" id="wizard-panel-step1"></div>
            <div class="wizard-pane active" id="wizard-panel-step2">
              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.
            </div>
            <div class="wizard-pane" id="wizard-panel-step3"></div>
            <div class="wizard-pane" id="wizard-panel-step4"></div>
          </div>
        </div>
      </div>

<div class="panel">
        <div class="panel-title">Wizard title</div>
        <small class="panel-subtitle text-muted">Support panel subtitle</small>
        <div class="wizard panel-wizard" id="wizard-panel2">
          <div class="wizard-wrapper">
            <ul class="wizard-steps">
              <li data-target="#wizard-panel2-step1" class="completed">
                <span class="wizard-step-number">1</span>
                <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
                <span class="wizard-step-caption">Step 1</span>
              </li>
              <li data-target="#wizard-panel2-step2" class="active">
                <span class="wizard-step-number">2</span>
                <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
                <span class="wizard-step-caption">Step 2</span>
              </li>
              <li data-target="#wizard-panel2-step3">
                <span class="wizard-step-number">3</span>
                <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
                <span class="wizard-step-caption">Step 3</span>
              </li>
              <li data-target="#wizard-panel2-step4">
                <span class="wizard-step-number">4</span>
                <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
                <span class="wizard-step-caption">Finish</span>
              </li>
            </ul>
          </div>
          <div class="wizard-content">
            <div class="wizard-pane" id="wizard-panel2-step1"></div>
            <div class="wizard-pane active" id="wizard-panel2-step2">
              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.
            </div>
            <div class="wizard-pane" id="wizard-panel2-step3"></div>
            <div class="wizard-pane" id="wizard-panel2-step4"></div>
          </div>
        </div>
        <div class="panel-body">
          Some body content.
        </div>
      </div>
    </div>

<h4 class="m-y-4">Colors</h4>

<div class="row">
      <div class="col-md-6">
        <div class="panel panel-danger">
          <div class="panel-heading">
            <span class="panel-title">Danger</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
        <div class="panel panel-danger panel-body-colorful">
          <div class="panel-heading">
            <span class="panel-title">Colorful danger</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-danger panel-dark">
          <div class="panel-heading">
            <span class="panel-title">Dark danger</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
        <div class="panel panel-danger panel-dark panel-body-colorful">
          <div class="panel-heading">
            <span class="panel-title">Dark colorful danger</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
      </div>
    </div>

<div class="row">
      <div class="col-md-6">
        <div class="panel panel-success">
          <div class="panel-heading">
            <span class="panel-title">Success</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
        <div class="panel panel-success panel-body-colorful">
          <div class="panel-heading">
            <span class="panel-title">Colorful success</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-success panel-dark">
          <div class="panel-heading">
            <span class="panel-title">Dark success</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
        <div class="panel panel-success panel-dark panel-body-colorful">
          <div class="panel-heading">
            <span class="panel-title">Dark colorful success</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
      </div>
    </div>

<div class="row">
      <div class="col-md-6">
        <div class="panel panel-warning">
          <div class="panel-heading">
            <span class="panel-title">Warning</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
        <div class="panel panel-warning panel-body-colorful">
          <div class="panel-heading">
            <span class="panel-title">Colorful warning</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-warning panel-dark">
          <div class="panel-heading">
            <span class="panel-title">Dark warning</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
        <div class="panel panel-warning panel-dark panel-body-colorful">
          <div class="panel-heading">
            <span class="panel-title">Dark colorful warning</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
      </div>
    </div>

<div class="row">
      <div class="col-md-6">
        <div class="panel panel-info">
          <div class="panel-heading">
            <span class="panel-title">Info</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
        <div class="panel panel-info panel-body-colorful">
          <div class="panel-heading">
            <span class="panel-title">Colorful info</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-info panel-dark">
          <div class="panel-heading">
            <span class="panel-title">Dark info</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
        <div class="panel panel-info panel-dark panel-body-colorful">
          <div class="panel-heading">
            <span class="panel-title">Dark colorful info</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </div>
        </div>
      </div>
    </div>

<div class="row">
      <div class="col-md-6">
        <div class="panel panel-transparent">
          <div class="panel-heading">
            <span class="panel-title">Panel - Transparent</span>
            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
          </div>
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </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() {
      $('#panel-style').on('change', function() {
        var cl = this.value;

$('.panels-example .panel').each(function() {
          this.className = cl;
        });

if (cl.indexOf('dark') !== -1) {
          $('.panels-example .btn-outline-colorless')
            .removeClass('btn-outline-colorless')
            .addClass('btn-outline-colorless-inverted');
        } else {
          $('.panels-example .btn-outline-colorless-inverted')
            .removeClass('btn-outline-colorless-inverted')
            .addClass('btn-outline-colorless');
        }
      });

$('.wizard').pxWizard();
    });
  </script>
</body>
</html>