Browse Source

new build

codecalm 5 years ago
parent
commit
ac6dd2bfe8
10 changed files with 675 additions and 428 deletions
  1. 39 16
      demo/400.html
  2. 12 17
      demo/401.html
  3. 12 17
      demo/403.html
  4. 12 17
      demo/404.html
  5. 12 17
      demo/500.html
  6. 12 17
      demo/503.html
  7. 150 79
      demo/all.html
  8. 134 78
      demo/blank.html
  9. 149 93
      demo/blog.html
  10. 143 77
      demo/buttons.html

+ 39 - 16
demo/400.html

@@ -25,19 +25,17 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 400 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <link href="./dist/css/tabler-flags.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1578237242" rel="stylesheet" />
   </head>
   <body class="antialiased border-top-wide border-primary">
     <div class="d-flex align-items-center justify-content-center min-vh-100">
@@ -58,17 +56,20 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
-    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1576885231"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578237242"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578237242"></script>
+    <script src="./dist/libs/autosize/dist/autosize.min.js?1578237242"></script>
+    <script src="./dist/libs/imask/dist/imask.min.js?1578237242"></script>
+    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1578237242"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1576885231"></script>
+    <script src="./dist/js/tabler.min.js?1578237242"></script>
     <script>
       // @formatter:off
       document.addEventListener("DOMContentLoaded", function () {
       	window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
       		chart: {
       			type: "area",
+      			fontFamily: 'inherit',
       			height: 40.0,
       			sparkline: {
       				enabled: true
@@ -103,7 +104,29 @@
       // @formatter:on
     </script>
     <script>
-      document.body.style.display = 'block';
+      if (window.autosize) {
+      	(function () {
+      		const elements = document.querySelectorAll('[data-toggle="autosize"]');
+      		if (elements.length) {
+      			elements.forEach(function (element) {
+      				autosize(element);
+      			});
+      		}
+      	})();
+      }
+    </script>
+    <script>
+      (function () {
+      	const $elem = $('[data-mask]');
+      	if ($elem) {
+      		$elem.each(function () {
+      			IMask($(this).get(0), {
+      				mask: $(this).attr('data-mask'),
+      				lazy: $(this).attr('data-mask-visible') === 'true',
+      			});
+      		});
+      	}
+      })();
     </script>
   </body>
 </html>

+ 12 - 17
demo/401.html

@@ -25,19 +25,17 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 401 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <link href="./dist/css/tabler-flags.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1578237242" rel="stylesheet" />
   </head>
   <body class="antialiased border-top-wide border-primary">
     <div class="d-flex align-items-center justify-content-center min-vh-100">
@@ -58,12 +56,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578237242"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578237242"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1576885231"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js?1578237242"></script>
   </body>
 </html>

+ 12 - 17
demo/403.html

@@ -25,19 +25,17 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 403 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <link href="./dist/css/tabler-flags.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1578237242" rel="stylesheet" />
   </head>
   <body class="antialiased border-top-wide border-primary">
     <div class="d-flex align-items-center justify-content-center min-vh-100">
@@ -58,12 +56,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578237242"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578237242"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1576885231"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js?1578237242"></script>
   </body>
 </html>

+ 12 - 17
demo/404.html

@@ -25,19 +25,17 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 404 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <link href="./dist/css/tabler-flags.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1578237242" rel="stylesheet" />
   </head>
   <body class="antialiased border-top-wide border-primary">
     <div class="d-flex align-items-center justify-content-center min-vh-100">
@@ -58,12 +56,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578237242"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578237242"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1576885231"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js?1578237242"></script>
   </body>
 </html>

+ 12 - 17
demo/500.html

@@ -25,19 +25,17 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 500 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <link href="./dist/css/tabler-flags.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1578237242" rel="stylesheet" />
   </head>
   <body class="antialiased border-top-wide border-primary">
     <div class="d-flex align-items-center justify-content-center min-vh-100">
@@ -58,12 +56,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578237242"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578237242"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1576885231"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js?1578237242"></script>
   </body>
 </html>

+ 12 - 17
demo/503.html

@@ -25,19 +25,17 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 503 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <link href="./dist/css/tabler-flags.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1578237242" rel="stylesheet" />
   </head>
   <body class="antialiased border-top-wide border-primary">
     <div class="d-flex align-items-center justify-content-center min-vh-100">
@@ -58,12 +56,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578237242"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578237242"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1576885231"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js?1578237242"></script>
   </body>
 </html>

+ 150 - 79
demo/all.html

@@ -25,27 +25,25 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Index - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <link href="./dist/css/tabler-flags.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1578237242" rel="stylesheet" />
   </head>
   <body class="antialiased">
     <div class="wrapper">
       <aside class="sidebar sidebar-dark">
         <!-- Sidebar logo -->
-        <a href=".." class="sidebar-brand">
-          <img src="../img/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
-          <img src="../img/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
+        <a href="." class="sidebar-brand">
+          <img src="./static/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
+          <img src="./static/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
         </a>
         <div class="sidebar-content">
           <div>
@@ -53,265 +51,326 @@
             <ul class="sidebar-nav">
               <li class="sidebar-nav-title">Navigation</li>
               <li class="sidebar-nav-item">
-                <a href="./index.html" class="sidebar-nav-link">
+                <a href="./index.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                   <span class="nav-text">Dashboard</span>
                   <span class="badge bg-blue"></span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./form-elements.html" class="sidebar-nav-link">
+                <a href="./form-elements.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                   <span class="nav-text">Form elements</span>
                   <span class="badge bg-red">New</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-error">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
                   <span class="nav-text">Error pages</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-error">
                   <li class="sidebar-nav-item">
-                    <a href="./400.html" class="sidebar-nav-link">
+                    <a  href="./400.html" class="sidebar-nav-link" >
                       <span>400 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./401.html" class="sidebar-nav-link">
+                    <a  href="./401.html" class="sidebar-nav-link" >
                       <span>401 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./403.html" class="sidebar-nav-link">
+                    <a  href="./403.html" class="sidebar-nav-link" >
                       <span>403 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./404.html" class="sidebar-nav-link">
+                    <a  href="./404.html" class="sidebar-nav-link" >
                       <span>404 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./500.html" class="sidebar-nav-link">
+                    <a  href="./500.html" class="sidebar-nav-link" >
                       <span>500 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./503.html" class="sidebar-nav-link">
+                    <a  href="./503.html" class="sidebar-nav-link" >
                       <span>503 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./maintenance.html" class="sidebar-nav-link">
+                    <a  href="./maintenance.html" class="sidebar-nav-link" >
                       <span>Maintenance page</span>
                     </a>
                   </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-base">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                   <span class="nav-text">Base</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-base">
                   <li class="sidebar-nav-item">
-                    <a href="./buttons.html" class="sidebar-nav-link">
+                    <a  href="./blank.html" class="sidebar-nav-link" >
+                      <span>Starter page</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./buttons.html" class="sidebar-nav-link" >
                       <span>Buttons</span>
                       <span class="badge bg-green">New</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./cards.html" class="sidebar-nav-link">
+                    <a  href="./cards.html" class="sidebar-nav-link" >
                       <span>Cards</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./calendar.html" class="sidebar-nav-link">
+                    <a  href="./datatables.html" class="sidebar-nav-link" >
+                      <span>Data Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./calendar.html" class="sidebar-nav-link" >
                       <span>Calendar</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./users.html" class="sidebar-nav-link">
+                    <a  href="./carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./users.html" class="sidebar-nav-link" >
                       <span>Users</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./gallery.html" class="sidebar-nav-link">
+                    <a  href="./gallery.html" class="sidebar-nav-link" >
                       <span>Gallery</span>
                     </a>
                   </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./profile.html" class="sidebar-nav-link" >
+                      <span>Profile</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./music.html" class="sidebar-nav-link" >
+                      <span>Music</span>
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./charts.html" class="sidebar-nav-link">
+                <a href="./charts.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
                   <span class="nav-text">Charts</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./layouts.html" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-a">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                  <span class="nav-text">A</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-a">
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-b">
+                      <span>B</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-b">
+                      <li class="sidebar-nav-item">
+                        <a href="./tmp.html" class="sidebar-nav-link">
+                          <span>C</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./layouts.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                   <span class="nav-text">Layouts</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-extra">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                   <span class="nav-text">Extra</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-extra">
                   <li class="sidebar-nav-item">
-                    <a href="./invoice.html" class="sidebar-nav-link">
+                    <a  href="./invoice.html" class="sidebar-nav-link" >
                       <span>Invoice</span>
                     </a>
                   </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./blog.html" class="sidebar-nav-link" >
+                      <span>Blog cards</span>
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./docs/index.html" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-docs">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                   <span class="nav-text">Documentation</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-docs">
                   <li class="sidebar-nav-item">
-                    <a href="./docs/index.html" class="sidebar-nav-link">
-                      <span>index</span>
+                    <a  href="./docs/index.html" class="sidebar-nav-link" >
+                      <span>Introduction</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/alerts.html" class="sidebar-nav-link">
+                    <a  href="./docs/alerts.html" class="sidebar-nav-link" >
                       <span>Alerts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/autosize.html" class="sidebar-nav-link">
+                    <a  href="./docs/autosize.html" class="sidebar-nav-link" >
                       <span>Autosize</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/avatars.html" class="sidebar-nav-link">
+                    <a  href="./docs/avatars.html" class="sidebar-nav-link" >
                       <span>Avatars</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/badges.html" class="sidebar-nav-link">
+                    <a  href="./docs/badges.html" class="sidebar-nav-link" >
                       <span>Badges</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/breadcrumb.html" class="sidebar-nav-link">
+                    <a  href="./docs/breadcrumb.html" class="sidebar-nav-link" >
                       <span>Breadcrumb</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/buttons.html" class="sidebar-nav-link">
+                    <a  href="./docs/buttons.html" class="sidebar-nav-link" >
                       <span>Buttons</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/cards.html" class="sidebar-nav-link">
+                    <a  href="./docs/cards.html" class="sidebar-nav-link" >
                       <span>Cards</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/carousel.html" class="sidebar-nav-link">
+                    <a  href="./docs/carousel.html" class="sidebar-nav-link" >
                       <span>Carousel</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/colors.html" class="sidebar-nav-link">
+                    <a  href="./docs/colors.html" class="sidebar-nav-link" >
                       <span>Colors</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/cursors.html" class="sidebar-nav-link">
+                    <a  href="./docs/countup.html" class="sidebar-nav-link" >
+                      <span>Countup</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cursors.html" class="sidebar-nav-link" >
                       <span>Cursors</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/charts.html" class="sidebar-nav-link">
+                    <a  href="./docs/charts.html" class="sidebar-nav-link" >
                       <span>Charts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/divider.html" class="sidebar-nav-link">
+                    <a  href="./docs/divider.html" class="sidebar-nav-link" >
                       <span>Divider</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/empty.html" class="sidebar-nav-link">
+                    <a  href="./docs/empty.html" class="sidebar-nav-link" >
                       <span>Empty states</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/flags.html" class="sidebar-nav-link">
+                    <a  href="./docs/flags.html" class="sidebar-nav-link" >
                       <span>Flags</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/form-elements.html" class="sidebar-nav-link">
+                    <a  href="./docs/form-elements.html" class="sidebar-nav-link" >
                       <span>Form elements</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/form-helpers.html" class="sidebar-nav-link">
+                    <a  href="./docs/form-helpers.html" class="sidebar-nav-link" >
                       <span>Form helpers</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/input-mask.html" class="sidebar-nav-link">
+                    <a  href="./docs/input-mask.html" class="sidebar-nav-link" >
                       <span>Form input mask</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/progress.html" class="sidebar-nav-link">
+                    <a  href="./docs/progress.html" class="sidebar-nav-link" >
                       <span>Progress</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/ribbons.html" class="sidebar-nav-link">
+                    <a  href="./docs/ribbons.html" class="sidebar-nav-link" >
                       <span>Ribbons</span>
                       <span class="badge bg-green">New</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/spinners.html" class="sidebar-nav-link">
+                    <a  href="./docs/spinners.html" class="sidebar-nav-link" >
                       <span>Spinners</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/steps.html" class="sidebar-nav-link">
+                    <a  href="./docs/steps.html" class="sidebar-nav-link" >
                       <span>Steps</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tables.html" class="sidebar-nav-link">
+                    <a  href="./docs/tables.html" class="sidebar-nav-link" >
                       <span>Tables</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tabs.html" class="sidebar-nav-link">
+                    <a  href="./docs/tabs.html" class="sidebar-nav-link" >
                       <span>Tabs</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/timelines.html" class="sidebar-nav-link">
+                    <a  href="./docs/timelines.html" class="sidebar-nav-link" >
                       <span>Timelines</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/toasts.html" class="sidebar-nav-link">
+                    <a  href="./docs/toasts.html" class="sidebar-nav-link" >
                       <span>Toasts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tooltips.html" class="sidebar-nav-link">
+                    <a  href="./docs/tooltips.html" class="sidebar-nav-link" >
                       <span>Tooltips</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/typography.html" class="sidebar-nav-link">
+                    <a  href="./docs/typography.html" class="sidebar-nav-link" >
                       <span>Typography</span>
                     </a>
                   </li>
@@ -337,7 +396,7 @@
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control form-control-light" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search&hellip;">
                   </div>
                 </form>
               </div>
@@ -348,8 +407,8 @@
                 <li class="nav-item dropdown">
                   <a href="#" data-toggle="dropdown"
          class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                    <span class="avatar avatar-sm" style="background-image: url(../img/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block leading-none">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
@@ -409,6 +468,11 @@
                   </div>
                   <div class="card-body">
                     <ul>
+                      <li>
+                        <a href="/layouts.html">
+                          layouts.html
+                        </a>
+                      </li>
                       <li>
                         <a href="/redirects.json">
                           redirects.json
@@ -420,8 +484,8 @@
                         </a>
                       </li>
                       <li>
-                        <a href="/layouts.html">
-                          layouts.html
+                        <a href="/sitemap.xml">
+                          sitemap.xml
                         </a>
                       </li>
                       <li>
@@ -474,6 +538,11 @@
                           Crypto currencies
                         </a>
                       </li>
+                      <li>
+                        <a href="/datatables.html">
+                          Data Tables
+                        </a>
+                      </li>
                       <li>
                         <a href="/docs.html">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
@@ -575,6 +644,11 @@
                           Markdown
                         </a>
                       </li>
+                      <li>
+                        <a href="/music.html">
+                          Music components
+                        </a>
+                      </li>
                       <li>
                         <a href="/400.html">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
@@ -692,12 +766,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578237242"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578237242"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1576885231"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js?1578237242"></script>
   </body>
 </html>

+ 134 - 78
demo/blank.html

@@ -25,27 +25,25 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <link href="./dist/css/tabler-flags.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1578237242" rel="stylesheet" />
   </head>
   <body class="antialiased">
     <div class="wrapper">
       <aside class="sidebar sidebar-dark">
         <!-- Sidebar logo -->
-        <a href=".." class="sidebar-brand">
-          <img src="../img/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
-          <img src="../img/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
+        <a href="." class="sidebar-brand">
+          <img src="./static/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
+          <img src="./static/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
         </a>
         <div class="sidebar-content">
           <div>
@@ -53,265 +51,326 @@
             <ul class="sidebar-nav">
               <li class="sidebar-nav-title">Navigation</li>
               <li class="sidebar-nav-item">
-                <a href="./index.html" class="sidebar-nav-link">
+                <a href="./index.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                   <span class="nav-text">Dashboard</span>
                   <span class="badge bg-blue"></span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./form-elements.html" class="sidebar-nav-link">
+                <a href="./form-elements.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                   <span class="nav-text">Form elements</span>
                   <span class="badge bg-red">New</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-error">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
                   <span class="nav-text">Error pages</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-error">
                   <li class="sidebar-nav-item">
-                    <a href="./400.html" class="sidebar-nav-link">
+                    <a  href="./400.html" class="sidebar-nav-link" >
                       <span>400 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./401.html" class="sidebar-nav-link">
+                    <a  href="./401.html" class="sidebar-nav-link" >
                       <span>401 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./403.html" class="sidebar-nav-link">
+                    <a  href="./403.html" class="sidebar-nav-link" >
                       <span>403 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./404.html" class="sidebar-nav-link">
+                    <a  href="./404.html" class="sidebar-nav-link" >
                       <span>404 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./500.html" class="sidebar-nav-link">
+                    <a  href="./500.html" class="sidebar-nav-link" >
                       <span>500 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./503.html" class="sidebar-nav-link">
+                    <a  href="./503.html" class="sidebar-nav-link" >
                       <span>503 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./maintenance.html" class="sidebar-nav-link">
+                    <a  href="./maintenance.html" class="sidebar-nav-link" >
                       <span>Maintenance page</span>
                     </a>
                   </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-base" aria-expanded="true">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                   <span class="nav-text">Base</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse show" id="sidebar-menu-base">
                   <li class="sidebar-nav-item">
-                    <a href="./buttons.html" class="sidebar-nav-link">
+                    <a  href="./blank.html" class="sidebar-nav-link active" >
+                      <span>Starter page</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./buttons.html" class="sidebar-nav-link" >
                       <span>Buttons</span>
                       <span class="badge bg-green">New</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./cards.html" class="sidebar-nav-link">
+                    <a  href="./cards.html" class="sidebar-nav-link" >
                       <span>Cards</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./calendar.html" class="sidebar-nav-link">
+                    <a  href="./datatables.html" class="sidebar-nav-link" >
+                      <span>Data Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./calendar.html" class="sidebar-nav-link" >
                       <span>Calendar</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./users.html" class="sidebar-nav-link">
+                    <a  href="./carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./users.html" class="sidebar-nav-link" >
                       <span>Users</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./gallery.html" class="sidebar-nav-link">
+                    <a  href="./gallery.html" class="sidebar-nav-link" >
                       <span>Gallery</span>
                     </a>
                   </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./profile.html" class="sidebar-nav-link" >
+                      <span>Profile</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./music.html" class="sidebar-nav-link" >
+                      <span>Music</span>
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./charts.html" class="sidebar-nav-link">
+                <a href="./charts.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
                   <span class="nav-text">Charts</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./layouts.html" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-a">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                  <span class="nav-text">A</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-a">
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-b">
+                      <span>B</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-b">
+                      <li class="sidebar-nav-item">
+                        <a href="./tmp.html" class="sidebar-nav-link">
+                          <span>C</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./layouts.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                   <span class="nav-text">Layouts</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-extra">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                   <span class="nav-text">Extra</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-extra">
                   <li class="sidebar-nav-item">
-                    <a href="./invoice.html" class="sidebar-nav-link">
+                    <a  href="./invoice.html" class="sidebar-nav-link" >
                       <span>Invoice</span>
                     </a>
                   </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./blog.html" class="sidebar-nav-link" >
+                      <span>Blog cards</span>
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./docs/index.html" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-docs">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                   <span class="nav-text">Documentation</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-docs">
                   <li class="sidebar-nav-item">
-                    <a href="./docs/index.html" class="sidebar-nav-link">
-                      <span>index</span>
+                    <a  href="./docs/index.html" class="sidebar-nav-link" >
+                      <span>Introduction</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/alerts.html" class="sidebar-nav-link">
+                    <a  href="./docs/alerts.html" class="sidebar-nav-link" >
                       <span>Alerts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/autosize.html" class="sidebar-nav-link">
+                    <a  href="./docs/autosize.html" class="sidebar-nav-link" >
                       <span>Autosize</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/avatars.html" class="sidebar-nav-link">
+                    <a  href="./docs/avatars.html" class="sidebar-nav-link" >
                       <span>Avatars</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/badges.html" class="sidebar-nav-link">
+                    <a  href="./docs/badges.html" class="sidebar-nav-link" >
                       <span>Badges</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/breadcrumb.html" class="sidebar-nav-link">
+                    <a  href="./docs/breadcrumb.html" class="sidebar-nav-link" >
                       <span>Breadcrumb</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/buttons.html" class="sidebar-nav-link">
+                    <a  href="./docs/buttons.html" class="sidebar-nav-link" >
                       <span>Buttons</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/cards.html" class="sidebar-nav-link">
+                    <a  href="./docs/cards.html" class="sidebar-nav-link" >
                       <span>Cards</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/carousel.html" class="sidebar-nav-link">
+                    <a  href="./docs/carousel.html" class="sidebar-nav-link" >
                       <span>Carousel</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/colors.html" class="sidebar-nav-link">
+                    <a  href="./docs/colors.html" class="sidebar-nav-link" >
                       <span>Colors</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/cursors.html" class="sidebar-nav-link">
+                    <a  href="./docs/countup.html" class="sidebar-nav-link" >
+                      <span>Countup</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cursors.html" class="sidebar-nav-link" >
                       <span>Cursors</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/charts.html" class="sidebar-nav-link">
+                    <a  href="./docs/charts.html" class="sidebar-nav-link" >
                       <span>Charts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/divider.html" class="sidebar-nav-link">
+                    <a  href="./docs/divider.html" class="sidebar-nav-link" >
                       <span>Divider</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/empty.html" class="sidebar-nav-link">
+                    <a  href="./docs/empty.html" class="sidebar-nav-link" >
                       <span>Empty states</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/flags.html" class="sidebar-nav-link">
+                    <a  href="./docs/flags.html" class="sidebar-nav-link" >
                       <span>Flags</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/form-elements.html" class="sidebar-nav-link">
+                    <a  href="./docs/form-elements.html" class="sidebar-nav-link" >
                       <span>Form elements</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/form-helpers.html" class="sidebar-nav-link">
+                    <a  href="./docs/form-helpers.html" class="sidebar-nav-link" >
                       <span>Form helpers</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/input-mask.html" class="sidebar-nav-link">
+                    <a  href="./docs/input-mask.html" class="sidebar-nav-link" >
                       <span>Form input mask</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/progress.html" class="sidebar-nav-link">
+                    <a  href="./docs/progress.html" class="sidebar-nav-link" >
                       <span>Progress</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/ribbons.html" class="sidebar-nav-link">
+                    <a  href="./docs/ribbons.html" class="sidebar-nav-link" >
                       <span>Ribbons</span>
                       <span class="badge bg-green">New</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/spinners.html" class="sidebar-nav-link">
+                    <a  href="./docs/spinners.html" class="sidebar-nav-link" >
                       <span>Spinners</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/steps.html" class="sidebar-nav-link">
+                    <a  href="./docs/steps.html" class="sidebar-nav-link" >
                       <span>Steps</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tables.html" class="sidebar-nav-link">
+                    <a  href="./docs/tables.html" class="sidebar-nav-link" >
                       <span>Tables</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tabs.html" class="sidebar-nav-link">
+                    <a  href="./docs/tabs.html" class="sidebar-nav-link" >
                       <span>Tabs</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/timelines.html" class="sidebar-nav-link">
+                    <a  href="./docs/timelines.html" class="sidebar-nav-link" >
                       <span>Timelines</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/toasts.html" class="sidebar-nav-link">
+                    <a  href="./docs/toasts.html" class="sidebar-nav-link" >
                       <span>Toasts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tooltips.html" class="sidebar-nav-link">
+                    <a  href="./docs/tooltips.html" class="sidebar-nav-link" >
                       <span>Tooltips</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/typography.html" class="sidebar-nav-link">
+                    <a  href="./docs/typography.html" class="sidebar-nav-link" >
                       <span>Typography</span>
                     </a>
                   </li>
@@ -337,7 +396,7 @@
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control form-control-light" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search&hellip;">
                   </div>
                 </form>
               </div>
@@ -348,8 +407,8 @@
                 <li class="nav-item dropdown">
                   <a href="#" data-toggle="dropdown"
          class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                    <span class="avatar avatar-sm" style="background-image: url(../img/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block leading-none">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
@@ -391,7 +450,7 @@
           <main class="container my-4 flex-fill">
             <div class="empty">
               <div class="empty-icon">
-                <img src="./img/illustrations/undraw_printing_invoices_5r4r.svg" class="h-8 mb-4" alt="">
+                <img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" class="h-8 mb-4" alt="">
               </div>
               <p class="empty-title h3">No results found</p>
               <p class="empty-subtitle text-muted">
@@ -409,12 +468,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578237242"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578237242"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1576885231"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js?1578237242"></script>
   </body>
 </html>

+ 149 - 93
demo/blog.html

@@ -25,27 +25,25 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Blog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <link href="./dist/css/tabler-flags.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1578237242" rel="stylesheet" />
   </head>
   <body class="antialiased">
     <div class="wrapper">
       <aside class="sidebar sidebar-dark">
         <!-- Sidebar logo -->
-        <a href=".." class="sidebar-brand">
-          <img src="../img/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
-          <img src="../img/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
+        <a href="." class="sidebar-brand">
+          <img src="./static/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
+          <img src="./static/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
         </a>
         <div class="sidebar-content">
           <div>
@@ -53,265 +51,326 @@
             <ul class="sidebar-nav">
               <li class="sidebar-nav-title">Navigation</li>
               <li class="sidebar-nav-item">
-                <a href="./index.html" class="sidebar-nav-link">
+                <a href="./index.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                   <span class="nav-text">Dashboard</span>
                   <span class="badge bg-blue"></span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./form-elements.html" class="sidebar-nav-link">
+                <a href="./form-elements.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                   <span class="nav-text">Form elements</span>
                   <span class="badge bg-red">New</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-error">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
                   <span class="nav-text">Error pages</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-error">
                   <li class="sidebar-nav-item">
-                    <a href="./400.html" class="sidebar-nav-link">
+                    <a  href="./400.html" class="sidebar-nav-link" >
                       <span>400 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./401.html" class="sidebar-nav-link">
+                    <a  href="./401.html" class="sidebar-nav-link" >
                       <span>401 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./403.html" class="sidebar-nav-link">
+                    <a  href="./403.html" class="sidebar-nav-link" >
                       <span>403 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./404.html" class="sidebar-nav-link">
+                    <a  href="./404.html" class="sidebar-nav-link" >
                       <span>404 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./500.html" class="sidebar-nav-link">
+                    <a  href="./500.html" class="sidebar-nav-link" >
                       <span>500 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./503.html" class="sidebar-nav-link">
+                    <a  href="./503.html" class="sidebar-nav-link" >
                       <span>503 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./maintenance.html" class="sidebar-nav-link">
+                    <a  href="./maintenance.html" class="sidebar-nav-link" >
                       <span>Maintenance page</span>
                     </a>
                   </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-base">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                   <span class="nav-text">Base</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-base">
                   <li class="sidebar-nav-item">
-                    <a href="./buttons.html" class="sidebar-nav-link">
+                    <a  href="./blank.html" class="sidebar-nav-link" >
+                      <span>Starter page</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./buttons.html" class="sidebar-nav-link" >
                       <span>Buttons</span>
                       <span class="badge bg-green">New</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./cards.html" class="sidebar-nav-link">
+                    <a  href="./cards.html" class="sidebar-nav-link" >
                       <span>Cards</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./calendar.html" class="sidebar-nav-link">
+                    <a  href="./datatables.html" class="sidebar-nav-link" >
+                      <span>Data Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./calendar.html" class="sidebar-nav-link" >
                       <span>Calendar</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./users.html" class="sidebar-nav-link">
+                    <a  href="./carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./users.html" class="sidebar-nav-link" >
                       <span>Users</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./gallery.html" class="sidebar-nav-link">
+                    <a  href="./gallery.html" class="sidebar-nav-link" >
                       <span>Gallery</span>
                     </a>
                   </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./profile.html" class="sidebar-nav-link" >
+                      <span>Profile</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./music.html" class="sidebar-nav-link" >
+                      <span>Music</span>
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./charts.html" class="sidebar-nav-link">
+                <a href="./charts.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
                   <span class="nav-text">Charts</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./layouts.html" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-a">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                  <span class="nav-text">A</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-a">
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-b">
+                      <span>B</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-b">
+                      <li class="sidebar-nav-item">
+                        <a href="./tmp.html" class="sidebar-nav-link">
+                          <span>C</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./layouts.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                   <span class="nav-text">Layouts</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-extra" aria-expanded="true">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                   <span class="nav-text">Extra</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse show" id="sidebar-menu-extra">
                   <li class="sidebar-nav-item">
-                    <a href="./invoice.html" class="sidebar-nav-link">
+                    <a  href="./invoice.html" class="sidebar-nav-link" >
                       <span>Invoice</span>
                     </a>
                   </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./blog.html" class="sidebar-nav-link active" >
+                      <span>Blog cards</span>
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./docs/index.html" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-docs">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                   <span class="nav-text">Documentation</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-docs">
                   <li class="sidebar-nav-item">
-                    <a href="./docs/index.html" class="sidebar-nav-link">
-                      <span>index</span>
+                    <a  href="./docs/index.html" class="sidebar-nav-link" >
+                      <span>Introduction</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/alerts.html" class="sidebar-nav-link">
+                    <a  href="./docs/alerts.html" class="sidebar-nav-link" >
                       <span>Alerts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/autosize.html" class="sidebar-nav-link">
+                    <a  href="./docs/autosize.html" class="sidebar-nav-link" >
                       <span>Autosize</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/avatars.html" class="sidebar-nav-link">
+                    <a  href="./docs/avatars.html" class="sidebar-nav-link" >
                       <span>Avatars</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/badges.html" class="sidebar-nav-link">
+                    <a  href="./docs/badges.html" class="sidebar-nav-link" >
                       <span>Badges</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/breadcrumb.html" class="sidebar-nav-link">
+                    <a  href="./docs/breadcrumb.html" class="sidebar-nav-link" >
                       <span>Breadcrumb</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/buttons.html" class="sidebar-nav-link">
+                    <a  href="./docs/buttons.html" class="sidebar-nav-link" >
                       <span>Buttons</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/cards.html" class="sidebar-nav-link">
+                    <a  href="./docs/cards.html" class="sidebar-nav-link" >
                       <span>Cards</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/carousel.html" class="sidebar-nav-link">
+                    <a  href="./docs/carousel.html" class="sidebar-nav-link" >
                       <span>Carousel</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/colors.html" class="sidebar-nav-link">
+                    <a  href="./docs/colors.html" class="sidebar-nav-link" >
                       <span>Colors</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/cursors.html" class="sidebar-nav-link">
+                    <a  href="./docs/countup.html" class="sidebar-nav-link" >
+                      <span>Countup</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cursors.html" class="sidebar-nav-link" >
                       <span>Cursors</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/charts.html" class="sidebar-nav-link">
+                    <a  href="./docs/charts.html" class="sidebar-nav-link" >
                       <span>Charts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/divider.html" class="sidebar-nav-link">
+                    <a  href="./docs/divider.html" class="sidebar-nav-link" >
                       <span>Divider</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/empty.html" class="sidebar-nav-link">
+                    <a  href="./docs/empty.html" class="sidebar-nav-link" >
                       <span>Empty states</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/flags.html" class="sidebar-nav-link">
+                    <a  href="./docs/flags.html" class="sidebar-nav-link" >
                       <span>Flags</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/form-elements.html" class="sidebar-nav-link">
+                    <a  href="./docs/form-elements.html" class="sidebar-nav-link" >
                       <span>Form elements</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/form-helpers.html" class="sidebar-nav-link">
+                    <a  href="./docs/form-helpers.html" class="sidebar-nav-link" >
                       <span>Form helpers</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/input-mask.html" class="sidebar-nav-link">
+                    <a  href="./docs/input-mask.html" class="sidebar-nav-link" >
                       <span>Form input mask</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/progress.html" class="sidebar-nav-link">
+                    <a  href="./docs/progress.html" class="sidebar-nav-link" >
                       <span>Progress</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/ribbons.html" class="sidebar-nav-link">
+                    <a  href="./docs/ribbons.html" class="sidebar-nav-link" >
                       <span>Ribbons</span>
                       <span class="badge bg-green">New</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/spinners.html" class="sidebar-nav-link">
+                    <a  href="./docs/spinners.html" class="sidebar-nav-link" >
                       <span>Spinners</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/steps.html" class="sidebar-nav-link">
+                    <a  href="./docs/steps.html" class="sidebar-nav-link" >
                       <span>Steps</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tables.html" class="sidebar-nav-link">
+                    <a  href="./docs/tables.html" class="sidebar-nav-link" >
                       <span>Tables</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tabs.html" class="sidebar-nav-link">
+                    <a  href="./docs/tabs.html" class="sidebar-nav-link" >
                       <span>Tabs</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/timelines.html" class="sidebar-nav-link">
+                    <a  href="./docs/timelines.html" class="sidebar-nav-link" >
                       <span>Timelines</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/toasts.html" class="sidebar-nav-link">
+                    <a  href="./docs/toasts.html" class="sidebar-nav-link" >
                       <span>Toasts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tooltips.html" class="sidebar-nav-link">
+                    <a  href="./docs/tooltips.html" class="sidebar-nav-link" >
                       <span>Tooltips</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/typography.html" class="sidebar-nav-link">
+                    <a  href="./docs/typography.html" class="sidebar-nav-link" >
                       <span>Typography</span>
                     </a>
                   </li>
@@ -337,7 +396,7 @@
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control form-control-light" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search&hellip;">
                   </div>
                 </form>
               </div>
@@ -348,8 +407,8 @@
                 <li class="nav-item dropdown">
                   <a href="#" data-toggle="dropdown"
          class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                    <span class="avatar avatar-sm" style="background-image: url(../img/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block leading-none">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
@@ -403,13 +462,13 @@
               <div class="col-sm-6 col-xl-4">
                 <div class="card d-flex flex-column">
                   <a href="#">
-                    <img class="card-img-top" src="./img/photos//9f36332564ca271d.jpg" alt="And this isn&#39;t my nose. This is a false one.">
+                    <img class="card-img-top" src="./static/photos//9f36332564ca271d.jpg" alt="And this isn&#39;t my nose. This is a false one.">
                   </a>
                   <div class="card-body d-flex flex-column">
                     <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
                     <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
                     <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md" style="background-image: url(./img/avatars/002m.jpg)"></span>
+                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
                       <div class="ml-3">
                         <a href="./profile.html" class="text-body">Dunn Slane</a>
                         <small class="d-block text-muted">3 days ago</small>
@@ -426,13 +485,13 @@
               <div class="col-sm-6 col-xl-4">
                 <div class="card d-flex flex-column">
                   <a href="#">
-                    <img class="card-img-top" src="./img/photos//35b88fc04a518c1b.jpg" alt="Well, I didn&#39;t vote for you.">
+                    <img class="card-img-top" src="./static/photos//35b88fc04a518c1b.jpg" alt="Well, I didn&#39;t vote for you.">
                   </a>
                   <div class="card-body d-flex flex-column">
                     <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
                     <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
                     <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md" style="background-image: url(./img/avatars/003m.jpg)"></span>
+                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
                       <div class="ml-3">
                         <a href="./profile.html" class="text-body">Emmy Levet</a>
                         <small class="d-block text-muted">3 days ago</small>
@@ -449,13 +508,13 @@
               <div class="col-sm-6 col-xl-4">
                 <div class="card d-flex flex-column">
                   <a href="#">
-                    <img class="card-img-top" src="./img/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?">
+                    <img class="card-img-top" src="./static/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?">
                   </a>
                   <div class="card-body d-flex flex-column">
                     <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
                     <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
                     <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md" style="background-image: url(./img/avatars/000f.jpg)"></span>
+                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/000f.jpg)"></span>
                       <div class="ml-3">
                         <a href="./profile.html" class="text-body">Maryjo Lebarree</a>
                         <small class="d-block text-muted">3 days ago</small>
@@ -475,7 +534,7 @@
                     <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
                     <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children beli...</div>
                     <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md" style="background-image: url(./img/avatars/004f.jpg)"></span>
+                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
                       <div class="ml-3">
                         <a href="./profile.html" class="text-body">Perren Keemar</a>
                         <small class="d-block text-muted">3 days ago</small>
@@ -495,7 +554,7 @@
                     <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
                     <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've ...</div>
                     <div class="d-flex align-items-center pt-5 mt-auto">
-                      <span class="avatar avatar-md" style="background-image: url(./img/avatars/007m.jpg)"></span>
+                      <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
                       <div class="ml-3">
                         <a href="./profile.html" class="text-body">Sunny Airey</a>
                         <small class="d-block text-muted">3 days ago</small>
@@ -534,7 +593,7 @@
                   <div class="row row-0 flex-fill">
                     <div class="col-md-3">
                       <a href="#">
-                        <img src="./img/photos//9f36332564ca271d.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                        <img src="./static/photos//9f36332564ca271d.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                       </a>
                     </div>
                     <div class="col">
@@ -542,7 +601,7 @@
                         <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
                         <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
                         <div class="d-flex align-items-center pt-5 mt-auto">
-                          <span class="avatar avatar-md" style="background-image: url(./img/avatars/002m.jpg)"></span>
+                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
                           <div class="ml-3">
                             <a href="./profile.html" class="text-body">Dunn Slane</a>
                             <small class="d-block text-muted">3 days ago</small>
@@ -563,7 +622,7 @@
                   <div class="row row-0 flex-fill">
                     <div class="col-md-3">
                       <a href="#">
-                        <img src="./img/photos//35b88fc04a518c1b.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                        <img src="./static/photos//35b88fc04a518c1b.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                       </a>
                     </div>
                     <div class="col">
@@ -571,7 +630,7 @@
                         <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
                         <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
                         <div class="d-flex align-items-center pt-5 mt-auto">
-                          <span class="avatar avatar-md" style="background-image: url(./img/avatars/003m.jpg)"></span>
+                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
                           <div class="ml-3">
                             <a href="./profile.html" class="text-body">Emmy Levet</a>
                             <small class="d-block text-muted">3 days ago</small>
@@ -592,7 +651,7 @@
                   <div class="row row-0 flex-fill">
                     <div class="col-md-3">
                       <a href="#">
-                        <img src="./img/photos//802a16cdf5ce3551.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                        <img src="./static/photos//802a16cdf5ce3551.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                       </a>
                     </div>
                     <div class="col">
@@ -600,7 +659,7 @@
                         <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
                         <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secr...</div>
                         <div class="d-flex align-items-center pt-5 mt-auto">
-                          <span class="avatar avatar-md" style="background-image: url(./img/avatars/004f.jpg)"></span>
+                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
                           <div class="ml-3">
                             <a href="./profile.html" class="text-body">Perren Keemar</a>
                             <small class="d-block text-muted">3 days ago</small>
@@ -621,7 +680,7 @@
                   <div class="row row-0 flex-fill">
                     <div class="col-md-3">
                       <a href="#">
-                        <img src="./img/photos//0986f97be719fb9a.jpg" class="w-100 h-100 object-cover" alt="Card side image">
+                        <img src="./static/photos//0986f97be719fb9a.jpg" class="w-100 h-100 object-cover" alt="Card side image">
                       </a>
                     </div>
                     <div class="col">
@@ -629,7 +688,7 @@
                         <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
                         <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's...</div>
                         <div class="d-flex align-items-center pt-5 mt-auto">
-                          <span class="avatar avatar-md" style="background-image: url(./img/avatars/007m.jpg)"></span>
+                          <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
                           <div class="ml-3">
                             <a href="./profile.html" class="text-body">Sunny Airey</a>
                             <small class="d-block text-muted">3 days ago</small>
@@ -651,12 +710,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578237242"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578237242"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1576885231"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js?1578237242"></script>
   </body>
 </html>

+ 143 - 77
demo/buttons.html

@@ -25,27 +25,25 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css?1576885231" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="../dist/css/tabler.min.css?1576885231" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1578237242" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="../dist/css/tabler-flags.min.css?1576885231" rel="stylesheet"/>
-    <style>
-      body { display: none; }
-    </style>
+    <link href="./dist/css/tabler-flags.min.css?1578237242" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1578237242" rel="stylesheet" />
   </head>
   <body class="antialiased">
     <div class="wrapper">
       <aside class="sidebar sidebar-dark">
         <!-- Sidebar logo -->
-        <a href=".." class="sidebar-brand">
-          <img src="../img/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
-          <img src="../img/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
+        <a href="." class="sidebar-brand">
+          <img src="./static/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
+          <img src="./static/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
         </a>
         <div class="sidebar-content">
           <div>
@@ -53,265 +51,326 @@
             <ul class="sidebar-nav">
               <li class="sidebar-nav-title">Navigation</li>
               <li class="sidebar-nav-item">
-                <a href="./index.html" class="sidebar-nav-link">
+                <a href="./index.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                   <span class="nav-text">Dashboard</span>
                   <span class="badge bg-blue"></span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./form-elements.html" class="sidebar-nav-link">
+                <a href="./form-elements.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                   <span class="nav-text">Form elements</span>
                   <span class="badge bg-red">New</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-error">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
                   <span class="nav-text">Error pages</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-error">
                   <li class="sidebar-nav-item">
-                    <a href="./400.html" class="sidebar-nav-link">
+                    <a  href="./400.html" class="sidebar-nav-link" >
                       <span>400 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./401.html" class="sidebar-nav-link">
+                    <a  href="./401.html" class="sidebar-nav-link" >
                       <span>401 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./403.html" class="sidebar-nav-link">
+                    <a  href="./403.html" class="sidebar-nav-link" >
                       <span>403 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./404.html" class="sidebar-nav-link">
+                    <a  href="./404.html" class="sidebar-nav-link" >
                       <span>404 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./500.html" class="sidebar-nav-link">
+                    <a  href="./500.html" class="sidebar-nav-link" >
                       <span>500 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./503.html" class="sidebar-nav-link">
+                    <a  href="./503.html" class="sidebar-nav-link" >
                       <span>503 page</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./maintenance.html" class="sidebar-nav-link">
+                    <a  href="./maintenance.html" class="sidebar-nav-link" >
                       <span>Maintenance page</span>
                     </a>
                   </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-base" aria-expanded="true">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                   <span class="nav-text">Base</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse show" id="sidebar-menu-base">
                   <li class="sidebar-nav-item">
-                    <a href="./buttons.html" class="sidebar-nav-link">
+                    <a  href="./blank.html" class="sidebar-nav-link" >
+                      <span>Starter page</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./buttons.html" class="sidebar-nav-link active" >
                       <span>Buttons</span>
                       <span class="badge bg-green">New</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./cards.html" class="sidebar-nav-link">
+                    <a  href="./cards.html" class="sidebar-nav-link" >
                       <span>Cards</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./calendar.html" class="sidebar-nav-link">
+                    <a  href="./datatables.html" class="sidebar-nav-link" >
+                      <span>Data Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./calendar.html" class="sidebar-nav-link" >
                       <span>Calendar</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./users.html" class="sidebar-nav-link">
+                    <a  href="./carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./users.html" class="sidebar-nav-link" >
                       <span>Users</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./gallery.html" class="sidebar-nav-link">
+                    <a  href="./gallery.html" class="sidebar-nav-link" >
                       <span>Gallery</span>
                     </a>
                   </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./profile.html" class="sidebar-nav-link" >
+                      <span>Profile</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./music.html" class="sidebar-nav-link" >
+                      <span>Music</span>
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./charts.html" class="sidebar-nav-link">
+                <a href="./charts.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
                   <span class="nav-text">Charts</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./layouts.html" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-a">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                  <span class="nav-text">A</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-a">
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-b">
+                      <span>B</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-b">
+                      <li class="sidebar-nav-item">
+                        <a href="./tmp.html" class="sidebar-nav-link">
+                          <span>C</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./layouts.html" class="sidebar-nav-link" >
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                   <span class="nav-text">Layouts</span>
                 </a>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-extra">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                   <span class="nav-text">Extra</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-extra">
                   <li class="sidebar-nav-item">
-                    <a href="./invoice.html" class="sidebar-nav-link">
+                    <a  href="./invoice.html" class="sidebar-nav-link" >
                       <span>Invoice</span>
                     </a>
                   </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./blog.html" class="sidebar-nav-link" >
+                      <span>Blog cards</span>
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li class="sidebar-nav-item">
-                <a href="./docs/index.html" class="sidebar-nav-link">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-docs">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                   <span class="nav-text">Documentation</span>
+                  <span class="sidebar-nav-arrow"></span>
                 </a>
-                <ul class="sidebar-subnav">
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-docs">
                   <li class="sidebar-nav-item">
-                    <a href="./docs/index.html" class="sidebar-nav-link">
-                      <span>index</span>
+                    <a  href="./docs/index.html" class="sidebar-nav-link" >
+                      <span>Introduction</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/alerts.html" class="sidebar-nav-link">
+                    <a  href="./docs/alerts.html" class="sidebar-nav-link" >
                       <span>Alerts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/autosize.html" class="sidebar-nav-link">
+                    <a  href="./docs/autosize.html" class="sidebar-nav-link" >
                       <span>Autosize</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/avatars.html" class="sidebar-nav-link">
+                    <a  href="./docs/avatars.html" class="sidebar-nav-link" >
                       <span>Avatars</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/badges.html" class="sidebar-nav-link">
+                    <a  href="./docs/badges.html" class="sidebar-nav-link" >
                       <span>Badges</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/breadcrumb.html" class="sidebar-nav-link">
+                    <a  href="./docs/breadcrumb.html" class="sidebar-nav-link" >
                       <span>Breadcrumb</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/buttons.html" class="sidebar-nav-link">
+                    <a  href="./docs/buttons.html" class="sidebar-nav-link" >
                       <span>Buttons</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/cards.html" class="sidebar-nav-link">
+                    <a  href="./docs/cards.html" class="sidebar-nav-link" >
                       <span>Cards</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/carousel.html" class="sidebar-nav-link">
+                    <a  href="./docs/carousel.html" class="sidebar-nav-link" >
                       <span>Carousel</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/colors.html" class="sidebar-nav-link">
+                    <a  href="./docs/colors.html" class="sidebar-nav-link" >
                       <span>Colors</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/cursors.html" class="sidebar-nav-link">
+                    <a  href="./docs/countup.html" class="sidebar-nav-link" >
+                      <span>Countup</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cursors.html" class="sidebar-nav-link" >
                       <span>Cursors</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/charts.html" class="sidebar-nav-link">
+                    <a  href="./docs/charts.html" class="sidebar-nav-link" >
                       <span>Charts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/divider.html" class="sidebar-nav-link">
+                    <a  href="./docs/divider.html" class="sidebar-nav-link" >
                       <span>Divider</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/empty.html" class="sidebar-nav-link">
+                    <a  href="./docs/empty.html" class="sidebar-nav-link" >
                       <span>Empty states</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/flags.html" class="sidebar-nav-link">
+                    <a  href="./docs/flags.html" class="sidebar-nav-link" >
                       <span>Flags</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/form-elements.html" class="sidebar-nav-link">
+                    <a  href="./docs/form-elements.html" class="sidebar-nav-link" >
                       <span>Form elements</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/form-helpers.html" class="sidebar-nav-link">
+                    <a  href="./docs/form-helpers.html" class="sidebar-nav-link" >
                       <span>Form helpers</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/input-mask.html" class="sidebar-nav-link">
+                    <a  href="./docs/input-mask.html" class="sidebar-nav-link" >
                       <span>Form input mask</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/progress.html" class="sidebar-nav-link">
+                    <a  href="./docs/progress.html" class="sidebar-nav-link" >
                       <span>Progress</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/ribbons.html" class="sidebar-nav-link">
+                    <a  href="./docs/ribbons.html" class="sidebar-nav-link" >
                       <span>Ribbons</span>
                       <span class="badge bg-green">New</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/spinners.html" class="sidebar-nav-link">
+                    <a  href="./docs/spinners.html" class="sidebar-nav-link" >
                       <span>Spinners</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/steps.html" class="sidebar-nav-link">
+                    <a  href="./docs/steps.html" class="sidebar-nav-link" >
                       <span>Steps</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tables.html" class="sidebar-nav-link">
+                    <a  href="./docs/tables.html" class="sidebar-nav-link" >
                       <span>Tables</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tabs.html" class="sidebar-nav-link">
+                    <a  href="./docs/tabs.html" class="sidebar-nav-link" >
                       <span>Tabs</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/timelines.html" class="sidebar-nav-link">
+                    <a  href="./docs/timelines.html" class="sidebar-nav-link" >
                       <span>Timelines</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/toasts.html" class="sidebar-nav-link">
+                    <a  href="./docs/toasts.html" class="sidebar-nav-link" >
                       <span>Toasts</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/tooltips.html" class="sidebar-nav-link">
+                    <a  href="./docs/tooltips.html" class="sidebar-nav-link" >
                       <span>Tooltips</span>
                     </a>
                   </li>
                   <li class="sidebar-nav-item">
-                    <a href="./docs/typography.html" class="sidebar-nav-link">
+                    <a  href="./docs/typography.html" class="sidebar-nav-link" >
                       <span>Typography</span>
                     </a>
                   </li>
@@ -337,7 +396,7 @@
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control form-control-light" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search&hellip;">
                   </div>
                 </form>
               </div>
@@ -348,8 +407,8 @@
                 <li class="nav-item dropdown">
                   <a href="#" data-toggle="dropdown"
          class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-                    <span class="avatar avatar-sm" style="background-image: url(../img/avatars/004f.jpg)"></span>
-                    <span class="ml-2 d-none d-lg-block leading-none">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
                       <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                     </span>
@@ -389,6 +448,16 @@
         </header>
         <div class="content-page">
           <main class="container my-4 flex-fill">
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Buttons
+                  </h2>
+                </div>
+              </div>
+            </div>
             <div class="row">
               <div class="col-12">
                 <div class="card">
@@ -1124,12 +1193,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1576885231"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1576885231"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578237242"></script>
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578237242"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1576885231"></script>
-    <script>
-      document.body.style.display = 'block';
-    </script>
+    <script src="./dist/js/tabler.min.js?1578237242"></script>
   </body>
 </html>

Some files were not shown because too many files changed in this diff