[
  {
    "path": "LICENSE.md",
    "content": "Copyright 2020 [Themesberg](https://themesberg.com) (Crafty Dwarf LLC)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE."
  },
  {
    "path": "README.md",
    "content": "# [🔥 Black Friday 2022 - Get Bootstrap 5 Templates for 90% Off](https://themesberg.com/black-friday)\n[![Themesberg Black Friday 2022](https://themesberg.com/img/campaigns/black-friday/og-image.png)](https://themesberg.com/black-friday)\n\n# Project files for the [Simple Bootstrap 5 Dashboard tutorial](https://themesberg.com/blog/bootstrap/simple-bootstrap-5-dashboard-tutorial)\n\n![Simple Bootstrap 5 Admin Dashboard Tutorial on Themesberg](https://themesberg.s3.us-east-2.amazonaws.com/public/posts/simple-bootstrap-5-dashboard-tutorial-preview.jpg)\n\n## Getting started\n\n1. Git clone or download the project files\n2. Have fun developing!\n\n## Related Links\n\n- [Online Demo](https://themesberg.github.io/simple-bootstrap-5-dashboard/)\n- [Tutorial on Themesberg](https://themesberg.com/blog/bootstrap/simple-bootstrap-5-dashboard-tutorial)\n- [Volt - Free Bootstrap 5 Admin Dashboard](https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard)\n- Upgrade to Pro - [Volt Pro Premium Bootstrap 5 Admin Dashboard](https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard)\n\n## Other links\n\n- [Bootstrap Themes, Templates and UI kits](https://themesberg.com/templates/bootstrap) from Themesberg\n- [Affiliate Program](https://themesberg.com/affiliate?ref=tutorial-gulp-4-bootstrap-sass-browsersync)\n\n### Social Media\n\nTwitter: <https://twitter.com/themesberg>\n\nFacebook: <https://www.facebook.com/themesberg/>\n\nDribbble: <https://dribbble.com/themesberg>\n\nInstagram: <https://www.instagram.com/themesberg/>\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Bootstrap 5 Simple Admin Dashboard</title>\n    <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css\">\n    <style>\n        .sidebar {\n            position: fixed;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            z-index: 100;\n            padding: 90px 0 0;\n            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);\n            z-index: 99;\n        }\n\n        @media (max-width: 767.98px) {\n            .sidebar {\n                top: 11.5rem;\n                padding: 0;\n            }\n        }\n            \n        .navbar {\n            box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);\n        }\n\n        @media (min-width: 767.98px) {\n            .navbar {\n                top: 0;\n                position: sticky;\n                z-index: 999;\n            }\n        }\n\n        .sidebar .nav-link {\n            color: #333;\n        }\n\n        .sidebar .nav-link.active {\n            color: #0d6efd;\n        }\n    </style>\n</head>\n<body>\n    <nav class=\"navbar navbar-light bg-light p-3\">\n        <div class=\"d-flex col-12 col-md-3 col-lg-2 mb-2 mb-lg-0 flex-wrap flex-md-nowrap justify-content-between\">\n            <a class=\"navbar-brand\" href=\"#\">\n                Simple Dashboard\n            </a>\n            <button class=\"navbar-toggler d-md-none collapsed mb-3\" type=\"button\" data-toggle=\"collapse\" data-target=\"#sidebar\" aria-controls=\"sidebar\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <div class=\"col-12 col-md-4 col-lg-2\">\n            <input class=\"form-control form-control-dark\" type=\"text\" placeholder=\"Search\" aria-label=\"Search\">\n        </div>\n        <div class=\"col-12 col-md-5 col-lg-8 d-flex align-items-center justify-content-md-end mt-3 mt-md-0\">\n            <div class=\"mr-3 mt-1\">\n                <a class=\"github-button\" href=\"https://github.com/themesberg/simple-bootstrap-5-dashboard\" data-color-scheme=\"no-preference: dark; light: light; dark: light;\" data-icon=\"octicon-star\" data-size=\"large\" data-show-count=\"true\" aria-label=\"Star /themesberg/simple-bootstrap-5-dashboard\">Star</a>\n            </div>\n            <div class=\"dropdown\">\n                <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-expanded=\"false\">\n                  Hello, John Doe\n                </button>\n                <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\">\n                  <li><a class=\"dropdown-item\" href=\"#\">Settings</a></li>\n                  <li><a class=\"dropdown-item\" href=\"#\">Messages</a></li>\n                  <li><a class=\"dropdown-item\" href=\"#\">Sign out</a></li>\n                </ul>\n              </div>\n        </div>\n    </nav>\n    <div class=\"container-fluid\">\n        <div class=\"row\">\n            <nav id=\"sidebar\" class=\"col-md-3 col-lg-2 d-md-block bg-light sidebar collapse\">\n                <div class=\"position-sticky\">\n                    <ul class=\"nav flex-column\">\n                        <li class=\"nav-item\">\n                          <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">\n                            <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=\"feather feather-home\"><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>\n                            <span class=\"ml-2\">Dashboard</span>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a class=\"nav-link\" href=\"#\">\n                            <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=\"feather feather-file\"><path d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z\"></path><polyline points=\"13 2 13 9 20 9\"></polyline></svg>\n                            <span class=\"ml-2\">Orders</span>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a class=\"nav-link\" href=\"#\">\n                            <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=\"feather feather-shopping-cart\"><circle cx=\"9\" cy=\"21\" r=\"1\"></circle><circle cx=\"20\" cy=\"21\" r=\"1\"></circle><path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"></path></svg>\n                            <span class=\"ml-2\">Products</span>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a class=\"nav-link\" href=\"#\">\n                            <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=\"feather feather-users\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"></path><circle cx=\"9\" cy=\"7\" r=\"4\"></circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"></path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path></svg>\n                            <span class=\"ml-2\">Customers</span>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a class=\"nav-link\" href=\"#\">\n                            <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=\"feather feather-bar-chart-2\"><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"></line><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"></line><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"></line></svg>\n                            <span class=\"ml-2\">Reports</span>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a class=\"nav-link\" href=\"#\">\n                            <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=\"feather feather-layers\"><polygon points=\"12 2 2 7 12 12 22 7 12 2\"></polygon><polyline points=\"2 17 12 22 22 17\"></polyline><polyline points=\"2 12 12 17 22 12\"></polyline></svg>\n                            <span class=\"ml-2\">Integrations</span>\n                          </a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a class=\"btn btn-sm btn-secondary ml-3 mt-2\" href=\"https://themesberg.com/blog/bootstrap/simple-bootstrap-5-dashboard-tutorial\">\n                                <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\" class=\"bi bi-book\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path fill-rule=\"evenodd\" d=\"M1 2.828v9.923c.918-.35 2.107-.692 3.287-.81 1.094-.111 2.278-.039 3.213.492V2.687c-.654-.689-1.782-.886-3.112-.752-1.234.124-2.503.523-3.388.893zm7.5-.141v9.746c.935-.53 2.12-.603 3.213-.493 1.18.12 2.37.461 3.287.811V2.828c-.885-.37-2.154-.769-3.388-.893-1.33-.134-2.458.063-3.112.752zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z\"/>\n                                </svg>\n                                <span class=\"ml-2\">Read tutorial</span>\n                            </a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a class=\"btn btn-sm btn-warning ml-3 mt-2\" href=\"https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard\">\n                                ⚡︎ Volt Dashboard\n                            </a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a class=\"btn btn-sm btn-primary ml-3 mt-2\" href=\"https://themesberg.com\">\n                                By Themesberg ❤️\n                            </a>\n                        </li>\n                      </ul>\n                </div>\n            </nav>\n            <main class=\"col-md-9 ml-sm-auto col-lg-10 px-md-4 py-4\">\n                <nav aria-label=\"breadcrumb\">\n                    <ol class=\"breadcrumb\">\n                        <li class=\"breadcrumb-item\"><a href=\"#\">Home</a></li>\n                        <li class=\"breadcrumb-item active\" aria-current=\"page\">Overview</li>\n                    </ol>\n                </nav>\n                <h1 class=\"h2\">Dashboard</h1>\n                <p>This is the homepage of a simple admin interface which is part of a tutorial written on Themesberg</p>\n                <div class=\"row my-4\">\n                    <div class=\"col-12 col-md-6 col-lg-3 mb-4 mb-lg-0\">\n                        <div class=\"card\">\n                            <h5 class=\"card-header\">Customers</h5>\n                            <div class=\"card-body\">\n                              <h5 class=\"card-title\">345k</h5>\n                              <p class=\"card-text\">Feb 1 - Apr 1, United States</p>\n                              <p class=\"card-text text-success\">18.2% increase since last month</p>\n                            </div>\n                          </div>\n                    </div>\n                    <div class=\"col-12 col-md-6 mb-4 mb-lg-0 col-lg-3\">\n                        <div class=\"card\">\n                            <h5 class=\"card-header\">Revenue</h5>\n                            <div class=\"card-body\">\n                              <h5 class=\"card-title\">$2.4k</h5>\n                              <p class=\"card-text\">Feb 1 - Apr 1, United States</p>\n                              <p class=\"card-text text-success\">4.6% increase since last month</p>\n                            </div>\n                          </div>\n                    </div>\n                    <div class=\"col-12 col-md-6 mb-4 mb-lg-0 col-lg-3\">\n                        <div class=\"card\">\n                            <h5 class=\"card-header\">Purchases</h5>\n                            <div class=\"card-body\">\n                              <h5 class=\"card-title\">43</h5>\n                              <p class=\"card-text\">Feb 1 - Apr 1, United States</p>\n                              <p class=\"card-text text-danger\">2.6% decrease since last month</p>\n                            </div>\n                          </div>\n                    </div>\n                    <div class=\"col-12 col-md-6 mb-4 mb-lg-0 col-lg-3\">\n                        <div class=\"card\">\n                            <h5 class=\"card-header\">Traffic</h5>\n                            <div class=\"card-body\">\n                              <h5 class=\"card-title\">64k</h5>\n                              <p class=\"card-text\">Feb 1 - Apr 1, United States</p>\n                              <p class=\"card-text text-success\">2.5% increase since last month</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\">\n                    <div class=\"col-12 col-xl-8 mb-4 mb-lg-0\">\n                        <div class=\"card\">\n                            <h5 class=\"card-header\">Latest transactions</h5>\n                            <div class=\"card-body\">\n                                <div class=\"table-responsive\">\n                                    <table class=\"table\">\n                                        <thead>\n                                          <tr>\n                                            <th scope=\"col\">Order</th>\n                                            <th scope=\"col\">Product</th>\n                                            <th scope=\"col\">Customer</th>\n                                            <th scope=\"col\">Total</th>\n                                            <th scope=\"col\">Date</th>\n                                            <th scope=\"col\"></th>\n                                          </tr>\n                                        </thead>\n                                        <tbody>\n                                          <tr>\n                                            <th scope=\"row\">17371705</th>\n                                            <td>Volt Premium Bootstrap 5 Dashboard</td>\n                                            <td>johndoe@gmail.com</td>\n                                            <td>€61.11</td>\n                                            <td>Aug 31 2020</td>\n                                            <td><a href=\"#\" class=\"btn btn-sm btn-primary\">View</a></td>\n                                          </tr>\n                                          <tr>\n                                            <th scope=\"row\">17370540</th>\n                                            <td>Pixel Pro Premium Bootstrap UI Kit</td>\n                                            <td>jacob.monroe@company.com</td>\n                                            <td>$153.11</td>\n                                            <td>Aug 28 2020</td>\n                                            <td><a href=\"#\" class=\"btn btn-sm btn-primary\">View</a></td>\n                                          </tr>\n                                          <tr>\n                                            <th scope=\"row\">17371705</th>\n                                            <td>Volt Premium Bootstrap 5 Dashboard</td>\n                                            <td>johndoe@gmail.com</td>\n                                            <td>€61.11</td>\n                                            <td>Aug 31 2020</td>\n                                            <td><a href=\"#\" class=\"btn btn-sm btn-primary\">View</a></td>\n                                          </tr>\n                                          <tr>\n                                            <th scope=\"row\">17370540</th>\n                                            <td>Pixel Pro Premium Bootstrap UI Kit</td>\n                                            <td>jacob.monroe@company.com</td>\n                                            <td>$153.11</td>\n                                            <td>Aug 28 2020</td>\n                                            <td><a href=\"#\" class=\"btn btn-sm btn-primary\">View</a></td>\n                                          </tr>\n                                          <tr>\n                                            <th scope=\"row\">17371705</th>\n                                            <td>Volt Premium Bootstrap 5 Dashboard</td>\n                                            <td>johndoe@gmail.com</td>\n                                            <td>€61.11</td>\n                                            <td>Aug 31 2020</td>\n                                            <td><a href=\"#\" class=\"btn btn-sm btn-primary\">View</a></td>\n                                          </tr>\n                                          <tr>\n                                            <th scope=\"row\">17370540</th>\n                                            <td>Pixel Pro Premium Bootstrap UI Kit</td>\n                                            <td>jacob.monroe@company.com</td>\n                                            <td>$153.11</td>\n                                            <td>Aug 28 2020</td>\n                                            <td><a href=\"#\" class=\"btn btn-sm btn-primary\">View</a></td>\n                                          </tr>\n                                        </tbody>\n                                      </table>\n                                </div>\n                                <a href=\"#\" class=\"btn btn-block btn-light\">View all</a>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-xl-4\">\n                        <div class=\"card\">\n                            <h5 class=\"card-header\">Traffic last 6 months</h5>\n                            <div class=\"card-body\">\n                                <div id=\"traffic-chart\"></div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <footer class=\"pt-5 d-flex justify-content-between\">\n                    <span>Copyright © 2019-2020 <a href=\"https://themesberg.com\">Themesberg</a></span>\n                    <ul class=\"nav m-0\">\n                        <li class=\"nav-item\">\n                          <a class=\"nav-link text-secondary\" aria-current=\"page\" href=\"#\">Privacy Policy</a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a class=\"nav-link text-secondary\" href=\"#\">Terms and conditions</a>\n                        </li>\n                        <li class=\"nav-item\">\n                          <a class=\"nav-link text-secondary\" href=\"#\">Contact</a>\n                        </li>\n                      </ul>\n                </footer>\n            </main>\n        </div>\n    </div>\n    <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>\n    <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>\n    <script src=\"https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\"></script>\n    <!-- Github buttons -->\n    <script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n    <script>\n        new Chartist.Line('#traffic-chart', {\n            labels: ['January', 'Februrary', 'March', 'April', 'May', 'June'],\n            series: [\n                [23000, 25000, 19000, 34000, 56000, 64000]\n            ]\n            }, {\n            low: 0,\n            showArea: true\n        });\n    </script>\n</body>\n</html>"
  }
]