![]() |
Let's go following |
Example:
HTML
<html lang="en"><head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" sizes="192x192" href="https://horje.com/assets/icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://horje.com/assets/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://horje.com/assets/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://horje.com/assets/icon/favicon-16x16.png">
<title>Responsive Dashboard</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://morrisjs.github.io/morris.js/css/morris.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:500,600|Ubuntu:400,700');
:focus {
outline: none;
}
html{
height:100%;
}
body{
font-family: 'Ubuntu', sans-serif;
min-height: 100%;
}
.absolute-wrapper{
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
}
.wrap{
margin-top: 60px;
}
/*-----Side navigation bar-----*/
.side-menu {
position: fixed;
width: 250px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
transition: all 0.5s ease-in-out;
height: calc(100vh - 60px);
overflow-y: auto;
overflow-x: hidden;
}
.side-menu .navbar {
border: none;
}
.side-menu .navbar-header {
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav .active a {
margin-right: -1px;
transition: all 0.4s ease-in;
color: #337ab7;
}
.side-menu .navbar-nav li {
display: block;
width: 100%;
}
.side-menu .navbar-nav li a {
padding: 10px 25px;
}
.side-menu .navbar-nav li a .glyphicon {
padding-right: 10px;
}
.side-menu #dropdown {
border: 0;
margin-bottom: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.side-menu #dropdown .caret {
float: right;
margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
float: right;
}
.side-menu #dropdown .panel-body {
padding: 0;
background-color: #f3f3f3;
}
.side-menu #dropdown .panel-body .navbar-nav {
width: 100%;
}
.side-menu #dropdown .panel-body .navbar-nav li {
padding-left: 15px;
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body .navbar-nav li:last-child {
border-bottom: none;
}
.side-menu #dropdown .panel-body .panel > a {
margin-left: -20px;
padding-left: 35px;
}
.side-menu #dropdown .panel-body .panel-body {
margin-left: -15px;
}
.side-menu #dropdown .panel-body .panel-body li {
padding-left: 30px;
}
.side-menu #dropdown .panel-body .panel-body li:last-child {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #search-trigger {
background-color: #f3f3f3;
border: 0;
border-radius: 0;
position: absolute;
top: 0;
right: 0;
padding: 15px 18px;
}
.side-menu .brand-name-wrapper {
min-height: 50px;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: block;
}
.side-menu #search {
position: relative;
z-index: 1000;
}
.side-menu #search .panel-body {
padding: 0;
}
.side-menu #search .panel-body .navbar-form {
padding: 0;
padding-right: 50px;
width: 100%;
margin: 0;
position: relative;
border-top: 1px solid #e7e7e7;
}
.side-menu #search .panel-body .navbar-form .form-group {
width: 100%;
position: relative;
}
.side-menu #search .panel-body .navbar-form input {
border: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 50px;
}
.side-menu #search .panel-body .navbar-form .btn {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0;
background-color: #f3f3f3;
padding: 15px 18px;
}
/*-----Side body-----*/
.side-body {
margin-left: 260px;
margin-bottom: 60px;
transition: all 0.5s ease-in-out;
}
.side-footer{
margin-left: 260px;
transition: all 0.5s ease-in-out;
}
/*-----Navbar-----*/
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
background-color: #e7e7e7;
margin-right: -1px;
color: #337ab7;
transition: all 0.2s ease-in
}
.navbar-right .dropdown-menu{
right:0;
left:auto;
}
.navbar-nav{
margin:0;
}
.nav>li{
float:left;
}
.nav>li>a{
padding: 12px;
}
.navbar-right .fa-fw {
border: 1px solid;
width: 35px;
border-radius: 50%;
height: 35px;
line-height: 35px;
color: #fff;
}
.navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts{
width:310px;
}
.dropdown-tasks .progress{
margin-bottom:0;
}
.dropdown-alerts li div{
line-height: 35px;
}
.dropdown-menu>li>a{
white-space: normal;
}
.bell .fa-fw{ background-color: #FF5722;}
.task .fa-fw{ background-color: #337ab7;}
.user .fa-fw{ background-color: #FFC107;}
.envelope .fa-fw{ background-color: #4CAF50;}
/*-----Side navigation bar (extra)-----*/
.panel-heading{
color:#fff;
}
.off{
transform: translate(-300px);
}
.full-width{
margin-left: 10px;
}
.menu{
padding: 6px 12px;
margin: 12px;
}
.img-resize{
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border: 2px solid #000;
}
header{
height: 60px;
background-color: #f8f8f8;
padding: 0;
border-bottom: 1px solid #e7e7e7;
}
.logo{
background-color: #337ab7;
width:250px;
height:60px;
line-height: 60px;
transition: all 0.5s ease-in;
}
.logo span{
color:#fff;
font-size: 18px;
}
.huge{
font-size: 50px;
}
/*-----Dashboard panels-----*/
.panel-primary .panel-footer span{ color: #337ab7 }
.panel-primary .panel-footer:hover { background-color: #337ab7; transition: all 0.2s ease-in }
.panel-primary .panel-footer:hover span { color: #fff }
.panel-green { border:1px solid #4CAF50; }
.panel-green .panel-heading{ border:1px solid #4CAF50; background-color: #4CAF50 }
.panel-green .panel-footer span{ color: #4CAF50 }
.panel-green .panel-footer:hover { background-color: #4CAF50; transition: all 0.2s ease-in }
.panel-green .panel-footer:hover span { color: #fff }
.panel-red { border:1px solid #FF5722; }
.panel-red .panel-heading{ border:1px solid #FF5722; background-color: #FF5722 }
.panel-red .panel-footer span{ color: #FF5722 }
.panel-red .panel-footer:hover { background-color: #FF5722; transition: all 0.2s ease-in }
.panel-red .panel-footer:hover span { color: #fff }
.panel-yellow { border:1px solid #FFC107; }
.panel-yellow .panel-heading{ border:1px solid #FFC107; background-color: #FFC107 }
.panel-yellow .panel-footer span{ color: #FFC107 }
.panel-yellow .panel-footer:hover { background-color: #FFC107; transition: all 0.2s ease-in }
.panel-yellow .panel-footer:hover span { color: #fff }
/*-----Breadcrumbs-----*/
.page-title-box{
border-bottom: 1px solid #337ab7;
margin-bottom: 30px;
}
.breadcrumb{
margin-top: 14px;
margin-bottom: 0;
background-color: transparent;
}
/*-----List Group-----*/
.list-group {
height: 206px;
overflow: auto;
}
/*-----Data Tables-----*/
table th{
white-space: nowrap;
}
/*-----Extra classes-----*/
.marr20{
margin-right: 20px;
}
.padd20{
padding:20px;
}
.footer{
background-color: #ccc;
padding:5px;
}
::-webkit-scrollbar,{
width:5px;
}
::-webkit-scrollbar-track {
background-color: #337ab7;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button {
background-color: #d9edf7;
}
::-webkit-scrollbar-corner {
background-color: black;
}
/*-----Media classes-----*/
@media (max-width: 768px){
.navbar-right li:nth-child(n){
display:none;
}
.navbar-right li:last-child{
display: block;
}
.side-menu{
margin-left:-250px;
z-index: 999;
}
.side-body{
margin-left: 0;
}
.off {
z-index: 999;
transform: translate(250px);
}
.side-footer{
margin-left: 0;
}
.logo{
width:195px;
}
.logo img{
width:90%;
}
.marr20 {
margin-right: 0px;
}
}
@media (max-width: 400px) and (min-width: 290px){
.logo{
width: 150px;
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="">
<header class="navbar-fixed-top">
<div class="row">
<div class="container-fluid">
<div class="pull-left">
<div class="pull-left logo text-center">
<span>LOGO</span>
</div><button class="btn btn-primary menu"><span class="glyphicon glyphicon glyphicon-menu-hamburger"></span></button>
</div>
<div class="pull-right">
<div class="marr20">
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown task">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><i class="fa fa-tasks fa-fw"></i>
<i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p><strong>Task 1</strong> <span class="pull-right text-muted">40% Complete</span></p>
<div class="progress progress-striped active">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p><strong>Task 2</strong> <span class="pull-right text-muted">20% Complete</span></p>
<div class="progress progress-striped active">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" class="progress-bar progress-bar-info" role="progressbar" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p><strong>Task 3</strong> <span class="pull-right text-muted">60% Complete</span></p>
<div class="progress progress-striped active">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" class="progress-bar progress-bar-warning" role="progressbar" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p><strong>Task 4</strong> <span class="pull-right text-muted">80% Complete</span></p>
<div class="progress progress-striped active">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" class="progress-bar progress-bar-danger" role="progressbar" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div></a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#"><strong>See All Tasks</strong> <i class="fa fa-angle-right"></i></a>
</li>
</ul><!-- /.dropdown-tasks -->
</li><!-- /.dropdown -->
<li class="dropdown bell">
<a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment <span class="pull-right text-muted small">4
minutes ago</span>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers <span class="pull-right text-muted small">12 minutes ago</span>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent <span class="pull-right text-muted small">4
minutes ago</span>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task <span class="pull-right text-muted small">4 minutes
ago</span>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted <span class="pull-right text-muted small">4
minutes ago</span>
</div></a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#"><strong>See All Alerts</strong> <i class="fa fa-angle-right"></i></a>
</li>
</ul><!-- /.dropdown-alerts -->
</li><!-- /.dropdown -->
<li class="dropdown user">
<a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu dropdown-user">
<li>
<a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
</li>
<li>
<a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul><!-- /.dropdown-user -->
</li><!-- /.dropdown -->
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="wrap">
<div class="side-menu">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="brand-wrapper">
<div class="brand-name-wrapper">
<a class="navbar-brand" href="#">Navigation Menu</a>
</div><a class="btn btn-default collapsed" data-toggle="collapse" href="#search" id="search-trigger" aria-expanded="false"><span class="glyphicon glyphicon-search"></span></a>
<div class="panel-collapse collapse" id="search" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<form class="navbar-form" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div><button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-ok"></span></button>
</form>
</div>
</div>
</div>
</div><!-- Main Menu -->
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li>
<a href="#"><span class="glyphicon glyphicon-send"></span> Dashboard</a>
</li>
<li class="active">
<a href="#"><span class="glyphicon glyphicon-plane"></span> Active Link</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-cloud"></span> Icon Description</a>
</li><!-- Dropdown-->
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl1"><span class="glyphicon glyphicon-user"></span> Sub
Level <span class="caret"></span></a> <!-- Dropdown level 1 -->
<div class="panel-collapse collapse" id="dropdown-lvl1">
<div class="panel-body">
<ul class="nav navbar-nav">
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li><!-- Dropdown level 2 -->
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl2"><span class="glyphicon glyphicon-off"></span>
Sub Level <span class="caret"></span></a>
<div class="panel-collapse collapse" id="dropdown-lvl2">
<div class="panel-body">
<ul class="nav navbar-nav">
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-signal"></span> Link</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- Main Content -->
<div class="container-fluid">
<div class="side-body">
<div class="page-title-box">
<h3 class="page-title pull-left">Dashboard</h3>
<ol class="breadcrumb pull-right">
<li>
<a href="#">home</a>
</li>
<li class="active">Dashboard</li>
</ol>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="col-lg-8 col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-9">
<div class="huge">
09
</div>
<div>
New Clients!
</div>
</div>
<div class="col-xs-3 text-right">
<i class="fa fa-cogs fa-5x"></i>
</div>
</div>
</div><a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div></a>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-9">
<div class="huge">
612
</div>
<div>
New Deals!
</div>
</div>
<div class="col-xs-3 text-right">
<i class="fa fa-laptop fa-5x"></i>
</div>
</div>
</div><a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div></a>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-9">
<div class="huge">
2148
</div>
<div>
Total Sales!
</div>
</div>
<div class="col-xs-3 text-right">
<i class="fa fa-shopping-cart fa-5x"></i>
</div>
</div>
</div><a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div></a>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-9">
<div class="huge">
$56M
</div>
<div>
Total Income!
</div>
</div>
<div class="col-xs-3 text-right">
<i class="fa fa-dollar fa-5x"></i>
</div>
</div>
</div><a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-12">
<div class="panel panel-info">
<div class="panel-heading">
<i class="fa fa-bell fa-fw"></i> Notifications Panel
</div>
<div class="panel-body">
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-comment fa-fw"></i> New Comment <span class="pull-right text-muted small"><em>14 minutes ago</em></span></a> <a class="list-group-item" href="#"><i class="fa fa-tasks fa-fw"></i> New Task <span class="pull-right text-muted small"><em>55
minutes ago</em></span></a> <a class="list-group-item" href="#"><i class="fa fa-upload fa-fw"></i>
Server Rebooted <span class="pull-right text-muted small"><em>55 minutes ago</em></span></a>
<a class="list-group-item" href="#"><i class="fa fa-bolt fa-fw"></i> Server Crashed! <span class="pull-right text-muted small"><em>3:33 PM</em></span></a> <a class="list-group-item" href="#"><i class="fa fa-warning fa-fw"></i> Server Not Responding <span class="pull-right text-muted small"><em>10:57 AM</em></span></a>
</div><a class="btn btn-info btn-block" href="#">View All Alerts</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="panel panel-info">
<div class="panel-heading">
<i class="fa fa-line-chart fa-fw"></i> Browser Usage (5 Years)
</div>
<p class="padd20">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.</p>
<div id="line-chart" style="height:250px;"></div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading">
<i class="fa fa-pie-chart fa-fw"></i> Project Task Details
</div>
<p class="padd20">Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="donut-chart" style="height:250px"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-warning">
<div class="panel-heading">
<i class="fa fa-bar-chart fa-fw"></i> Browser Usage Details
</div>
<div id="bar-chart" style="height:200px"></div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-success">
<div class="panel-heading">
<i class="fa fa-table fa-fw"></i> Table Details
</div>
<div class="table-responsive">
<table class="table table-striped" id="example">
<tbody><tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
<th>Heading 6</th>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
</div>
<div class="side-footer">
<div class="footer text-center">
Designed By <a target="_blank" href="https://www.linkedin.com/in/peeyush200/"> Peeyush </a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script id="rendered-js">
var data = [
{ year: '2012', a: 24.6, b: 30.9, c: 24.8 },
{ year: '2013', a: 30.0, b: 27.5, c: 20.0 },
{ year: '2014', a: 34.2, b: 20.3, c: 18.3 },
{ year: '2015', a: 43.0, b: 17.2, c: 15.1 },
{ year: '2016', a: 47.3, b: 12.3, c: 11.4 }],
config = {
lineColors: ['#337ab7', '#FF5722', '#4CAF50'],
barColors: ['#337ab7', '#FF5722', '#4CAF50'],
data: data,
xkey: 'year',
ykeys: ['a', 'b', 'c'],
labels: ['Google Chrome', 'Internet explorer', 'Mozilla firefox'] };
config.element = 'line-chart';
Morris.Line(config);
config.element = 'bar-chart';
Morris.Bar(config);
Morris.Donut({
element: 'donut-chart',
colors: ["#337ab7", "#4CAF50", "#FFC107", "#FF5722", "#5bc0de"],
data: [
{ label: "Complete", value: 15 },
{ label: "Active", value: 35 },
{ label: "Pending", value: 25 },
{ label: "Re-open", value: 10 },
{ label: "New", value: 15 }] });
$(function () {
$('button').click(function () {
$('.side-menu').toggleClass('off');
$('.side-body').toggleClass('full-width');
$('.side-footer').toggleClass('full-width');
});
});
//# sourceURL=pen.js
</script>
</body></html>
How to build a HTML Admin Responsive Dashboard | HTML Dashboard Tutorial |
How to create tailwindcss responsive dashboard layout | HTML Dashboard Tutorial |
How to create HTML Responsive Dashboard Bento Style | HTML Dashboard Tutorial |
Full Template Code | HTML Dashboard Tutorial |
Read Full: | HTML Dashboard Tutorial |
Category: | Web Tutorial |
Sub Category: | HTML Dashboard Tutorial |
Uploaded: | 1 year ago |
Uploaded by: | Admin |
Views: | 181 |