<body class="fixed-sn grey-skin">
<!-- Start your project here-->
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color double-nav fixed-top scrolling-navbar">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse">
<i class="fas fa-bars"></i>
</a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>Rainy Day Inc.</p>
</div>
<!-- Links -->
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link">
<i class="fas fa-envelope"></i>
<span class="clearfix d-none d-sm-inline-block">Contact</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fas fa-cog"></i>
<span class="clearfix d-none d-sm-inline-block">Settings</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user"></i>
<span class="clearfix d-none d-sm-inline-block">Account</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">My profile</a>
<a class="dropdown-item" href="#">Change password</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</nav>
<!--/.Navbar-->
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav fixed sn-bg-3">
<ul class="custom-scrollbar">
<!-- Logo -->
<li class="logo-sn waves-effect">
<div class=" text-center">
<a href="#" class="pl-0">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="">
</a>
</div>
</li>
<!--/. Logo -->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group md-form mt-0 pt-1 waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-circle-right"></i>
Products<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Physical</a>
</li>
<li><a href="#" class="waves-effect">Online products</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chalkboard-teacher"></i>
Instruction<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Let's start</a>
</li>
<li><a href="#" class="waves-effect">Terms of use</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-comment-dots"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Company history</a>
</li>
<li><a href="#" class="waves-effect">Our staff</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-headset"></i> Contact
<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Secretary's Office</a>
</li>
<li><a href="#" class="waves-effect">Fax</a>
</li>
<li><a href="#" class="waves-effect">Phone Numbers</a>
</li>
<li><a href="#" class="waves-effect">Meeting</a>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<div class="sidenav-bg rgba-blue-strong"></div>
</div>
<!--/. Sidebar navigation -->
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="container-fluid">
<!--Section: Modals-->
<section>
</section>
<!--Section: Modals-->
<!--Section: Main panel-->
<section class="card card-cascade narrower mb-5">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-5">
<!--Panel Header-->
<div class="view view-cascade py-3 gradient-card-header elegant-color-dark">
<h5 class="mb-0">Sales</h5>
</div>
<!--/Panel Header-->
<!--Panel content-->
<div class="card-body">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<!--Date select-->
<p class="lead">
<span class="badge info-color-dark p-2 elegant-color">Date range</span>
</p>
<select class="mdb-select colorful-select dropdown-info">
<option value="" disabled>Choose time period</option>
<option value="1">Today</option>
<option value="2">Yesterday</option>
<option value="3">Last 7 days</option>
<option value="3">Last 30 days</option>
<option value="3">Last week</option>
<option value="3">Last month</option>
</select>
<!--Date pickers-->
<p class="lead my-4">
<span class="badge info-color-dark p-2 elegant-color">Custom date</span>
</p>
<div class="md-form">
<input placeholder="Selected date" type="text" id="from" class="form-control datepicker">
<label for="date-picker-example">From</label>
</div>
<div class="md-form">
<input placeholder="Selected date" type="text" id="to" class="form-control datepicker">
<label for="date-picker-example">To</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4 text-center">
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--Panel content-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-7">
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Main panel-->
<!--Section: Table-->
<section class="mb-5">
</section>
<!--Section: Table-->
<!--Section: Accordion-->
<section class="mb-5">
</section>
<!--Section: Accordion-->
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="page-footer font-small">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/profile/?id=53320"> Krzysztof Wilk</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- /Start your project here-->
</body>
.side-nav .logo-sn {
padding-bottom: 1rem;
padding-top: 1rem;
}
.side-nav .logo-sn img {
height: 38px;
}
.side-nav .search-form input[type=text] {
margin-top: 0;
padding-top: 12px;
padding-bottom: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
body {
background-color: #A9A9A9;
}
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
// Data Picker Initialization
$('.datepicker').pickadate();