dashboard-template
Version:
Dashboard Is The Beautiful and Responsive Admin Template for Bootstrap 4.
322 lines (313 loc) • 15.6 kB
HTML
<html lang="en">
<head>
<title>Dashboard - Beautiful Admin Template</title>
<!-- Required meta tags always come first -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Dashboard - Admin Template , Responsive Bootstrap 4 template , bootstrap 4 admin template, bootstrap4 template, Dashboard template">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" lang="en" content="Simple Bootstrap 4 admin template , Responsive and Modern HTML5 Template made from bootstrap 4.">
<meta name="keywords" lang="en" content="admin template, bootstrap 4 template,bootstrap 4 Dashboard template, responsive bootstrap 4 template, bootstrap 4, bootstraping, bootstrap4, oribitthemes, othemes">
<meta name="robots" content="index, follow">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<!--Font Awesome-->
<link rel="stylesheet" href="dist/font-awesome/css/font-awesome.min.css" />
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/main.min.css">
<!--[if IE]>
<link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie9.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/g/html5shiv@3.7.3"></script>
<![endif]-->
<!--[if lt IE 9]>
<link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie8.min.css" rel="stylesheet">
<![endif]-->
</head>
<body>
<div class="loader"></div>
<header id="header" class="fixed-top">
<nav class="navbar navbar-dark bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0 text-center" href="#">
<i class="fa fa-dashboard"></i>
</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
</header>
<main id="main" role="main">
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="fa fa-dashboard"></i>
Dashboard
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-file-o"></i>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-shopping-cart"></i>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-users"></i>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-bar-chart"></i>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-cube"></i>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<i class="fa fa-plus-circle"></i>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-file-text-o"></i>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-file-text-o"></i>
Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-file-text-o"></i>
Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-file-text-o"></i>
Year-end sale
</a>
</li>
</ul>
</div>
</nav>
<div class="col-md-9 ml-sm-auto col-lg-10 pt-5 mt-5 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<canvas class="my-4" id="myChart" width="900" height="380"></canvas>
<h2>Section title</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
<a href="#" class="btn btn-primary scrollUp">
<i class="fa fa-arrow-circle-o-up"></i>
</a>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer id="footer">
<p class="copyright">Made with
<i class="fa fa-heart"></i> By
<a target="_blank" title="Orbit Themes" href="http://www.orbitthemes.com">Orbit Themes</a> ©
<span id="currentYear"></span> All Rights Reserved.
</p>
<div class="social">
<a traget="_blank" href="https://facebook.com/orbitthemes" title="facebook">
<i class="fa fa-facebook"></i>
</a>
<a traget="_blank" href="https://twitter.com/orbitthemes" title="twitter">
<i class="fa fa-twitter"></i>
</a>
<a traget="_blank" href="https://plus.google.com/+orbitthemes" title="Google+" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<a traget="_blank" href="https://github.com/orbitthemes" title="github" target="_blank">
<i class="fa fa-github"></i>
</a>
<a traget="_blank" href="https://www.behance.net/orbitthemes" title="Behance" target="_blank">
<i class="fa fa-behance"></i>
</a>
<a traget="_blank" href="https://dribbble.com/orbitthemes" title="Dribbble" target="_blank">
<i class="fa fa-dribbble"></i>
</a>
<a traget="_blank" href="https://www.pinterest.com/orbitThemes/" title="Pinterest" target="_blank">
<i class="fa fa-pinterest"></i>
</a>
<a traget="_blank" href="https://www.reddit.com/user/orbitthemes" title="Reddit" target="_blank">
<i class="fa fa-reddit"></i>
</a>
<a traget="_blank" href="https://orbitthemes.com/blog/" title="RSS" target="_blank">
<i class="fa fa-rss"></i>
</a>
</div>
</footer>
<!-- jQuery first, then Bootstrap JS. -->
<script src="dist/jquery/jquery.min.js"></script>
<script src="dist/popper/popper.min.js" integrity=""></script>
<script src="dist/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="js/main.min.js"></script>
</body>
</html>