mdbootstrap4-pro

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link rel="stylesheet" href="../../css/bootstrap/bootstrap.css">  <link rel="stylesheet" href="../../css/mdb.css"> <link rel="stylesheet" href="../../css/style.css"> </head> <body class="fixed-sn white-skin">  <header>  <div id="slide-out" class="side-nav sn-bg-4 fixed"> <ul class="custom-scrollbar list-unstyled">  <li class="logo-sn waves-effect"> <div class=" text-center"> <a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a> </div> </li>   <li> <form class="search-form" role="search"> <div class="form-group waves-effect"> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li>   <li> <ul class="collapsible collapsible-accordion"> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a> </li> <li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a> </li> <li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a> </li> <li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a> </li> <li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a> </li> <li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="../pages/login.html" class="waves-effect">Login</a> </li> <li><a href="../pages/register.html" class="waves-effect">Register</a> </li> <li><a href="../pages/pricing.html" class="waves-effect">Pricing</a> </li> <li><a href="../pages/about.html" class="waves-effect">About us</a> </li> <li><a href="../pages/single.html" class="waves-effect">Single post</a> </li> <li><a href="../pages/post.html" class="waves-effect">Post listing</a> </li> <li><a href="../pages/landing.html" class="waves-effect">Landing page</a> </li> <li><a href="../pages/customers.html" class="waves-effect">Cusomers</a> </li> <li><a href="../pages/invoice.html" class="waves-effect">Invoice</a> </li> <li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a> </li> <li><a href="../pages/support.html" class="waves-effect">Support</a> </li> <li><a href="../pages/chat.html" class="waves-effect">Chat</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a> </li> <li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a> </li> <li><a href="../profile/extended.html" class="waves-effect">Extended</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="../css/grid.html" class="waves-effect">Grid system</a> </li> <li><a href="../css/media.html" class="waves-effect">Media object</a> </li> <li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a> </li> <li><a href="../css/code.html" class="waves-effect">Code</a> </li> <li><a href="../css/icons.html" class="waves-effect">Icons</a> </li> <li><a href="../css/images.html" class="waves-effect">Images</a> </li> <li><a href="../css/typography.html" class="waves-effect">Typography</a> </li> <li><a href="../css/animations.html" class="waves-effect">Animations</a> </li> <li><a href="../css/colors.html" class="waves-effect">Colors</a> </li> <li><a href="../css/hover.html" class="waves-effect">Hover effects</a> </li> <li><a href="../css/masks.html" class="waves-effect">Masks</a> </li> <li><a href="../css/shadows.html" class="waves-effect">Shadows</a> </li> <li><a href="../css/skins.html" class="waves-effect">Skins</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="../components/buttons.html" class="waves-effect">Buttons</a> </li> <li><a href="../components/cards.html" class="waves-effect">Cards</a> </li> <li><a href="../components/panels.html" class="waves-effect">Panels</a> </li> <li><a href="../components/list.html" class="waves-effect">List group</a> </li> <li><a href="../components/pagination.html" class="waves-effect">Pagination</a> </li> <li><a href="../components/progress.html" class="waves-effect">Progress bars</a> </li> <li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a> </li> <li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a> </li> <li><a href="../components/collapse.html" class="waves-effect">Collapse</a> </li> <li><a href="../components/date.html" class="waves-effect">Date picker</a> </li> <li><a href="../components/time.html" class="waves-effect">Time picker</a> </li> <li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a> </li> <li><a href="../components/popovers.html" class="waves-effect">Popovers</a> </li> <li><a href="../components/stepper.html" class="waves-effect">Stepper</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="../forms/basic.html" class="waves-effect">Basic</a> </li> <li><a href="../forms/extended.html" class="waves-effect">Extended</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="../tables/basic.html" class="waves-effect">Basic</a> </li> <li><a href="../tables/extended.html" class="waves-effect">Extended</a> </li> <li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="../maps/google.html" class="waves-effect">Google Maps</a> </li> <li><a href="../maps/full.html" class="waves-effect">Full screen map</a> </li> <li><a href="../maps/vector.html" class="waves-effect">Vector world map</a> </li> </ul> </div> </li>  <li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li> <li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li> <li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li> <li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li> <li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li> </ul> </li>  </ul> <div class="sidenav-bg mask-strong"></div> </div>   <nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">  <div class="float-left"> <a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a> </div>  <div class="breadcrumb-dn mr-auto"> <p>Buttons</p> </div>  <ul class="nav navbar-nav nav-flex-icons ml-auto">  <li class="nav-item dropdown notifications-nav"> <a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="badge red">3</span> <i class="fa fa-bell"></i> <span class="d-none d-md-inline-block">Notifications</span> </a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#"> <i class="fa fa-money mr-2" aria-hidden="true"></i> <span>New order received</span> <span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span> </a> <a class="dropdown-item" href="#"> <i class="fa fa-money mr-2" aria-hidden="true"></i> <span>New order received</span> <span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span> </a> <a class="dropdown-item" href="#"> <i class="fa fa-line-chart mr-2" aria-hidden="true"></i> <span>Your campaign is about to end</span> <span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span> </a> </div> </li> <li class="nav-item"> <a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a> </li> <li class="nav-item"> <a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown"> <a class="dropdown-item" href="#">Log Out</a> <a class="dropdown-item" href="#">My account</a> </div> </li> </ul>  </nav>  </header>    <script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="../../js/popper.min.js"></script>  <script type="text/javascript" src="../../js/bootstrap.min.js"></script>  <script type="text/javascript" src="../../js/mdb.js"></script> <script> $(".button-collapse").sideNav(); var el = document.querySelector('.custom-scrollbar'); Ps.initialize(el); </script> </body> </html>