<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Simple Sidebar - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<!-- Custom CSS -->
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a href="#menu-toggle" style="color:#00d4ce;" id="menu-toggle">
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
</a>
<a class="navbar-brand" style="font-size:26px" href="/">O<spm style="color:#00d4ce; ">n</spm>L<spm style="color:#00d4ce; ">i</spm>N<spm style="color:#00d4ce; ">e</spm>-<span style="font-size:18px">A<spm style="color:#00d4ce; ">p</spm>P<spm style="color:#00d4ce; ">l</spm>I<spm style="color:#00d4ce; ">c</spm>A<spm style="color:#00d4ce; ">t</spm>I<spm style="color:#00d4ce; ">o</spm>N</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="/">Home </a>
</li>
<li>
<a href="pageRecruitmentApproval.html">About Us</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- wrapper -->
<div id="wrapper" class="toggled">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a>Mune Title</a> </li>
<li><a href="#">Category</a></li>
<li><a href="#">Tag</a></li>
<li><a href="#">No Category</a></li>
<li><a href="#">Show All Images</a></li>
<li><a href="#">Show Untagged Images </a></li>
<li><a href="#">All Submitted</a></li>
<li><a href="#">All Rejected</a></li>
<li><a href="#">All Cancelled</a></li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header" data-background-color="orange">
<h4 class="title">Simple Sidebar</h4>
<p class="category">New employees on 15th September, 2016</p>
</div>
<div class="card-content table-responsive">
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header" data-background-color="orange">
<h4 class="title">Simple Sidebar</h4>
<p class="category">New employees on 15th September, 2016</p>
</div>
<div class="card-content table-responsive">
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header" data-background-color="orange">
<h4 class="title">Employees Stats</h4>
<p class="category">New employees on 15th September, 2016</p>
</div>
<div class="card-content table-responsive">
<table class="table table-hover">
<thead class="text-warning">
<tr>
<th>ID</th>
<th>Name</th>
<th>Salary</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dakota Rice</td>
<td>$36,738</td>
<td>Niger</td>
</tr>
<tr>
<td>2</td>
<td>Minerva Hooper</td>
<td>$23,789</td>
<td>Curaçao</td>
</tr>
<tr>
<td>3</td>
<td>Sage Rodriguez</td>
<td>$56,142</td>
<td>Netherlands</td>
</tr>
<tr>
<td>4</td>
<td>Philip Chaney</td>
<td>$38,735</td>
<td>Korea, South</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
/*!
* Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
overflow-x: hidden;
}
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #00d4ce;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #000;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #000;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
.navbar-default {
background-color: #eeeeee;
border-bottom:6px solid #00cdc0;
}
.navbar {
min-height: 66px;
}
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 25px;
}
}
.navbar {
margin-bottom: 2px;
}
.card {
display: inline-block;
position: relative;
width: 100%;
margin: 25px 0;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 3px;
color: rgba(0,0,0, 0.87);
background: #fff;
}
.card .card-height-indicator {
margin-top: 100%;
}
.card .title {
margin-top: 0;
margin-bottom: 5px;
}
.card .card-image {
height: 60%;
position: relative;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
margin-top: -30px;
border-radius: 6px;
}
.card .card-image img {
width: 100%;
height: 100%;
border-radius: 6px;
pointer-events: none;
}
.card .card-image .card-title {
position: absolute;
bottom: 15px;
left: 15px;
color: #fff;
font-size: 1.3em;
text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
}
.card .category:not([class*="text-"]) {
color: #999999;
}
.card .card-content {
padding: 15px 20px;
}
.card .card-content .category {
margin-bottom: 0;
}
.card .card-header {
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
margin: -20px 15px 0;
border-radius: 3px;
padding: 15px;
background-color: #999999;
}
.card .card-header .title {
color: #FFFFFF;
}
.card .card-header .category {
margin-bottom: 0;
color: rgba(255, 255, 255, 0.62);
}
.card .card-header.card-chart {
padding: 0;
min-height: 160px;
}
.card .card-header.card-chart + .content h4 {
margin-top: 0;
}
.card .card-header .ct-label {
color: rgba(255, 255, 255, 0.7);
}
.card .card-header .ct-grid {
stroke: rgba(255, 255, 255, 0.2);
}
.card .card-header .ct-series-a .ct-point,
.card .card-header .ct-series-a .ct-line,
.card .card-header .ct-series-a .ct-bar,
.card .card-header .ct-series-a .ct-slice-donut {
stroke: rgba(255, 255, 255, 0.8);
}
.card .card-header .ct-series-a .ct-slice-pie,
.card .card-header .ct-series-a .ct-area {
fill: rgba(255, 255, 255, 0.4);
}
.card .chart-title {
position: absolute;
top: 25px;
width: 100%;
text-align: center;
}
.card .chart-title h3 {
margin: 0;
color: #FFFFFF;
}
.card .chart-title h6 {
margin: 0;
color: rgba(255, 255, 255, 0.4);
}
.card .card-footer {
margin: 0 20px 10px;
padding-top: 10px;
border-top: 1px solid #eeeeee;
}
.card .card-footer .content {
display: block;
}
.card .card-footer div {
display: inline-block;
}
.card .card-footer .author {
color: #999999;
}
.card .card-footer .stats {
line-height: 22px;
color: #999999;
font-size: 12px;
}
.card .card-footer .stats .material-icons {
position: relative;
top: 4px;
font-size: 16px;
}
.card .card-footer h6 {
color: #999999;
}
.card img {
width: 100%;
height: auto;
}
.card .category .material-icons {
position: relative;
top: 6px;
line-height: 0;
}
.card .category-social .fa {
font-size: 24px;
position: relative;
margin-top: -4px;
top: 2px;
margin-right: 5px;
}
.card .author .avatar {
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;
}
.card .author a {
color: #3C4858;
text-decoration: none;
}
.card .author a .ripple-container {
display: none;
}
.card .table {
margin-bottom: 0;
}
.card .table tr:first-child td {
border-top: none;
}
.card [data-background-color="orange"] {
background: linear-gradient(60deg, #00d4ce, #00d4ce);
box-shadow: 0 12px 20px -10px #d1fdfb, 0 4px 20px 0px #d1fdfb, 0 7px 8px -5px #def3f2;
}
.card [data-background-color] {
color: #FFFFFF;
}
.card [data-background-color] a {
color: #FFFFFF;
}
.card-stats .title {
margin: 0;
}
.card-stats .card-header {
float: left;
text-align: center;
}
.card-stats .card-header i {
font-size: 36px;
line-height: 56px;
width: 56px;
height: 56px;
}
.card-stats .card-content {
text-align: right;
padding-top: 10px;
}
.card-nav-tabs .header-raised {
margin-top: -30px;
}
.card-nav-tabs .nav-tabs {
background: transparent;
padding: 0;
}
.card-nav-tabs .nav-tabs-title {
float: left;
padding: 10px 10px 10px 0;
line-height: 24px;
}
.card-plain {
background: transparent;
box-shadow: none;
}
.card-plain .card-header {
margin-left: 0;
margin-right: 0;
}
.card-plain .content {
padding-left: 5px;
padding-right: 5px;
}
.card-plain .card-image {
margin: 0;
border-radius: 3px;
}
.card-plain .card-image img {
border-radius: 3px;
}
