eclass.unmer.ac.id

<!DOCTYPE html>

<title>Profile v1 - Pages - 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>

<style>
    .page-profile-v1-avatar {
      max-width: 160px;
      border: 4px solid #fff;
    }
  </style>
  
</head>
<body>
  <nav class="px-nav px-nav-left">
    <button type="button" class="px-nav-toggle" data-toggle="px-nav">
      <span class="px-nav-toggle-arrow"></span>
      <span class="navbar-toggle-icon"></span>
      <span class="px-nav-toggle-label font-size-11">HIDE MENU</span>
    </button>

<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="row m-t-1">
      <div class="col-md-4 col-lg-3">
        <div class="text-xs-center"><img src="assets/demo/avatars/5.jpg" alt="" class="page-profile-v1-avatar border-round"></div>
        <div class="m-y-3 text-xs-center">
          <a href="#" class="btn btn-success"><i class="fa fa-check"></i>&nbsp;&nbsp;Following</a>&nbsp;&nbsp;
          <a href="#" class="btn"><i class="fa fa-envelope"></i></a>
        </div>
        <div class="panel panel-transparent">
          <div class="panel-heading p-x-1">
            <span class="panel-title">About me</span>
          </div>
          <div class="panel-body p-a-1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <a href="#">dolore magna</a> aliqua.
          </div>
        </div>
        <div class="panel panel-transparent">
          <div class="panel-heading p-x-1">
            <span class="panel-title">Statistics</span>
          </div>
          <div class="list-group m-y-1">
            <a href="#" class="list-group-item p-x-1 b-a-0"><strong>126</strong> Likes</a>
            <a href="#" class="list-group-item p-x-1 b-a-0"><strong>579</strong> Followers</a>
            <a href="#" class="list-group-item p-x-1 b-a-0"><strong>100</strong> Following</a>
          </div>
        </div>
        <div class="panel panel-transparent">
          <div class="panel-heading p-x-1">
            <span class="panel-title">Skills</span>
          </div>
          <div class="panel-body p-a-1">
            <span class="label label-primary">UI/UX</span>
            <span class="label label-primary">Web design</span>
            <span class="label label-primary">Photoshop</span>
            <span class="label label-primary">HTML</span>
            <span class="label label-primary">CSS</span>
          </div>
        </div>
        <div class="panel panel-transparent">
          <div class="panel-heading p-x-1">
            <span class="panel-title">Social</span>
          </div>
          <div class="list-group m-t-1">
            <a href="#" class="list-group-item p-x-1 b-a-0"><i class="fa fa-twitter" style="color: #4ab6d5"></i>&nbsp;&nbsp;&nbsp;@dsteiner</a>
            <a href="#" class="list-group-item p-x-1 b-a-0"><i class="fa fa-facebook-square" style="color: #1a7ab9"></i>&nbsp;&nbsp;&nbsp;Denise Steiner</a>
            <a href="#" class="list-group-item p-x-1 b-a-0"><i class="fa fa-envelope" style="color: #888"></i>&nbsp;&nbsp;&nbsp;dsteiner@example.com</a>
          </div>
        </div>
      </div>

<div class="col-md-8 col-lg-9">
        <h1 class="font-size-20 m-y-4">Denise Steiner<span class="font-weight-normal">'s profile</span></h1>

<ul class="nav nav-tabs" id="profile-tabs">
          <li class="active">
            <a href="#profile-board" data-toggle="tab">
              Board
            </a>
          </li>
          <li>
            <a href="#profile-timeline" data-toggle="tab">
              Timeline
            </a>
          </li>
          <li>
            <a href="#profile-followers" data-toggle="tab">
              Followers
            </a>
          </li>
          <li>
            <a href="#profile-following" data-toggle="tab">
              Following
            </a>
          </li>
        </ul>

<form action="" class="widget-tree-comments-item p-y-2">
              <img src="assets/demo/avatars/1.jpg" alt="" class="widget-tree-comments-avatar">
              <div class="expanding-input" id="write-comment">
                <textarea rows="1" class="form-control widget-tree-comments-input expanding-input-control" placeholder="Write your comment..."></textarea>
                <div class="expanding-input-content">
                  <label class="custom-control custom-checkbox checkbox-inline" for="custom-checkbox-1">
                    <input type="checkbox" id="custom-checkbox-1" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    Private message
                  </label>
                  <div class="pull-right">
                    <button type="button" class="btn btn-primary">Leave message</button>
                  </div>
                </div>
              </div>
            </form>

<div class="widget-tree-comments-item">
              <img src="assets/demo/avatars/2.jpg" alt="" class="widget-tree-comments-avatar">
              <div class="widget-tree-comments-header">
                <a href="#" title="">Robert Jang</a><span>&nbsp;&nbsp;14 hours ago</span>
              </div>
              <div class="widget-tree-comments-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
              </div>
              <div class="widget-tree-comments-footer">
                <a href="#"><i class="fa fa-thumbs-o-up"></i></a>&nbsp;&nbsp;
                <a href="#"><i class="fa fa-thumbs-o-down"></i></a>
                &nbsp;&nbsp;·&nbsp;&nbsp;
                <a href="#">Reply</a>
              </div>

<div class="widget-tree-comments-item">
                <img src="assets/demo/avatars/4.jpg" alt="" class="widget-tree-comments-avatar">
                <div class="widget-tree-comments-header">
                  <a href="#" title="">Timothy Owens</a><span>&nbsp;&nbsp;14 hours ago</span>
                </div>
                <div class="widget-tree-comments-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                </div>
                <div class="widget-tree-comments-footer">
                  <a href="#"><i class="fa fa-thumbs-o-up"></i></a>&nbsp;&nbsp;
                  <a href="#"><i class="fa fa-thumbs-o-down"></i></a>
                  &nbsp;&nbsp;·&nbsp;&nbsp;
                  <a href="#">Reply</a>
                </div>
              </div>

<div class="widget-tree-comments-item">
                <img src="assets/demo/avatars/5.jpg" alt="" class="widget-tree-comments-avatar">
                <div class="widget-tree-comments-header">
                  <a href="#" title="">Denise Steiner</a><span>&nbsp;&nbsp;14 hours ago</span>
                </div>
                <div class="widget-tree-comments-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                </div>
                <div class="widget-tree-comments-footer">
                  <a href="#"><i class="fa fa-thumbs-o-up"></i></a>&nbsp;&nbsp;
                  <a href="#"><i class="fa fa-thumbs-o-down"></i></a>
                  &nbsp;&nbsp;·&nbsp;&nbsp;
                  <a href="#">Reply</a>
                </div>

<div class="widget-tree-comments-item">
                  <img src="assets/demo/avatars/1.jpg" alt="" class="widget-tree-comments-avatar">
                  <div class="widget-tree-comments-header">
                    <a href="#" title="">John Doe</a><span>&nbsp;&nbsp;14 hours ago</span>
                  </div>
                  <div class="widget-tree-comments-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  </div>
                  <div class="widget-tree-comments-footer">
                    <a href="#"><i class="fa fa-thumbs-o-up"></i></a>&nbsp;&nbsp;
                    <a href="#"><i class="fa fa-thumbs-o-down"></i></a>
                    &nbsp;&nbsp;·&nbsp;&nbsp;
                    <a href="#">Reply</a>
                  </div>
                </div>
              </div>
            </div>

<div class="widget-tree-comments-item">
              <img src="assets/demo/avatars/3.jpg" alt="" class="widget-tree-comments-avatar">
              <div class="widget-tree-comments-header">
                <a href="#" title="">Michelle Bortz</a><span>&nbsp;&nbsp;14 hours ago</span>
              </div>
              <div class="widget-tree-comments-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
              </div>
              <div class="widget-tree-comments-footer">
                <a href="#"><i class="fa fa-thumbs-o-up"></i></a>&nbsp;&nbsp;
                <a href="#"><i class="fa fa-thumbs-o-down"></i></a>
                &nbsp;&nbsp;·&nbsp;&nbsp;
                <a href="#">Reply</a>
              </div>
            </div>

</div>
          <div class="tab-pane p-a-3 fade" id="profile-timeline">
            <div class="widget-timeline">
              <div class="widget-timeline-section font-weight-semibold">NOW</div>

<div class="widget-timeline-item">
                <div class="widget-timeline-info">
                  <div class="widget-timeline-bullet"></div>
                  <div class="widget-timeline-time">9:09 PM</div>
                </div>
                <div class="panel">
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 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.
                  </div>
                </div>
              </div>

<div class="widget-timeline-item">
                <div class="widget-timeline-info">
                  <div class="widget-timeline-bullet bg-primary"></div>
                  <div class="widget-timeline-time bg-primary">10:00 AM</div>
                </div>
                <div class="panel">
                  <div class="panel-title text-danger">Lorem ipsum dolor sit amet</div>
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </div>
                </div>
              </div>

<div class="widget-timeline-item">
                <div class="widget-timeline-info">
                  <div class="widget-timeline-icon"><i class="fa fa-envelope"></i></div>
                  <div class="widget-timeline-time">9:35 PM</div>
                </div>
                <div class="panel panel-warning panel-body-colorful">
                  <div class="panel-title">Lorem ipsum dolor sit amet</div>
                  <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </div>
                </div>
              </div>

<div class="widget-timeline-item">
                <div class="widget-timeline-info">
                  <div class="widget-timeline-icon bg-success"><i class="fa fa-picture-o"></i></div>
                  <div class="widget-timeline-time">6:12 PM</div>
                </div>
                <div class="panel">
                  <div class="panel-body">
                    <a href="#">John Doe</a> shared an image on <a href="#">The Gallery</a>
                  </div>
                  <hr class="m-a-0">
                  <div class="panel-img p-a-1">
                    <img src="assets/demo/thumbs/3.jpg">
                  </div>
                  <div class="panel-footer text-muted">
                    <em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em>
                  </div>
                </div>
              </div>

<div class="widget-timeline-item">
                <div class="widget-timeline-info">
                  <div class="widget-timeline-image"><img src="assets/demo/avatars/2.jpg" alt=""></div>
                  <div class="widget-timeline-time">2:22 PM</div>
                </div>
                <div class="panel">
                  <div class="panel-body">
                    <div class="widget-comments-item p-a-0">
                      <div class="widget-comments-header">
                        <a href="#" title="">Robert Jang</a> commented on <a href="#" title="">Article Name</a>
                      </div>
                      <div class="widget-comments-text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                      </div>
                    </div>
                  </div>
                </div>
              </div>

<div class="widget-timeline-item">
                <div class="widget-timeline-info">
                  <div class="widget-timeline-icon bg-black"><i class="fa fa-check"></i></div>
                  <div class="widget-timeline-time">11:47 AM</div>
                </div>
                <div class="panel">
                  <div class="panel-body">
                    <a href="#" title=""><img src="assets/demo/avatars/4.jpg" alt="" class="image-inline border-rounded">&nbsp;&nbsp;Timothy Owens</a> followed <a href="#" title="">John Doe</a>
                  </div>
                </div>
              </div>

<div class="widget-timeline-section font-weight-semibold">Yesterday</div>

<div class="widget-timeline-item">
                <div class="widget-timeline-info">
                  <div class="widget-timeline-icon bg-info"><i class="fa fa-comment"></i></div>
                  <div class="widget-timeline-time">11:49 PM</div>
                </div>
                <div class="panel">
                  <div class="panel-body">
                    <a href="#"><img src="assets/demo/avatars/1.jpg" alt="" class="image-inline border-rounded">&nbsp;&nbsp;John Doe</a> liked a comment on <a href="#">Some Article</a>
                  </div>
                  <hr class="m-a-0">
                  <div class="widget-comments-item bg-white darken">
                    <img src="assets/demo/avatars/3.jpg" alt="" class="widget-comments-avatar">
                    <div class="widget-comments-header">
                      <a href="#" title="">Michelle Bortz</a> commented on <a href="#" title="">Article Name</a>
                    </div>
                    <div class="widget-comments-text">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                    </div>
                  </div>
                </div>
              </div>

<div class="widget-timeline-item">
                <div class="widget-timeline-info">
                  <div class="widget-timeline-image"><img src="assets/demo/avatars/1.jpg" alt=""></div>
                  <div class="widget-timeline-time">5:17 PM</div>
                </div>
                <div class="panel">
                  <div class="panel-body">
                    <a href="#">John Doe</a> liked <a href="#">Shop Item</a>
                  </div>
                </div>
              </div>

</div>
          </div>
          <div class="tab-pane fade" id="profile-followers">

<div class="widget-followers-item">
              <img src="assets/demo/avatars/2.jpg" alt="" class="widget-followers-avatar">
              <div class="widget-followers-controls"><a href="#" class="btn btn-sm btn-success"><i class="fa fa-check"></i>&nbsp;&nbsp;Following</a></div>
              <a href="#" class="widget-followers-name">Robert Jang</a>
              <a href="#" class="widget-followers-username">@rjang</a>
            </div>

<div class="widget-followers-item">
              <img src="assets/demo/avatars/3.jpg" alt="" class="widget-followers-avatar">
              <div class="widget-followers-controls"><a href="#" class="btn btn-sm btn-outline">Follow</a></div>
              <a href="#" class="widget-followers-name">Michelle Bortz</a>
              <a href="#" class="widget-followers-username">@mbortz</a>
            </div>

<div class="widget-followers-item">
              <img src="assets/demo/avatars/4.jpg" alt="" class="widget-followers-avatar">
              <div class="widget-followers-controls"><a href="#" class="btn btn-sm btn-outline">Follow</a></div>
              <a href="#" class="widget-followers-name">Timothy Owens</a>
              <a href="#" class="widget-followers-username">@towens</a>
            </div>

<div class="widget-followers-item">
              <img src="assets/demo/avatars/5.jpg" alt="" class="widget-followers-avatar">
              <div class="widget-followers-controls"><a href="#" class="btn btn-sm btn-outline">Follow</a> </div>
              <a href="#" class="widget-followers-name">Denise Steiner</a>
              <a href="#" class="widget-followers-username">@dsteiner</a>
            </div>

</div>
          <div class="tab-pane fade" id="profile-following">
            <div class="widget-followers-item">
              <img src="assets/demo/avatars/2.jpg" alt="" class="widget-followers-avatar">
              <div class="widget-followers-controls"><a href="#" class="btn btn-sm btn-success"><i class="fa fa-check"></i>&nbsp;&nbsp;Following</a></div>
              <a href="#" class="widget-followers-name">Robert Jang</a>
              <a href="#" class="widget-followers-username">@rjang</a>
            </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() {
      $('#write-comment')
        .pxExpandingInput()
        .on('expand.px.expanding-input', function(e) {
          $(e.target).find('.expanding-input-control').attr('rows', '3').autosize();
        });

$('#profile-tabs').pxTabResize();
    });
  </script>
</body>
</html>