quartermoon
Version:
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools
92 lines (82 loc) • 3.73 kB
HTML
<html lang="en" class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars">
<head>
<!-- Meta tags -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<!-- Favicon and title -->
<link rel="icon" href="path/to/fav.png">
<title>Starter template - Quartermoon</title>
<!-- Quartermoon CSS -->
<link href="css/quartermoon-variables.css" rel="stylesheet" />
<!--
Or,
Use the following (no variables, supports IE11):
<link href="css/quartermoon.min.css" rel="stylesheet" />
-->
</head>
<body data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true">
<!-- Modals go here -->
<!-- Reference: https://www.gethalfmoon.com/docs/modal -->
<!-- Page wrapper start -->
<div class="page-wrapper with-navbar with-sidebar with-navbar-fixed-bottom" data-sidebar-type="overlayed-sm-and-down">
<!-- Sticky alerts (toasts), empty container -->
<!-- Reference: https://www.gethalfmoon.com/docs/sticky-alerts-toasts -->
<div class="sticky-alerts"></div>
<!-- Navbar start -->
<nav class="navbar">
<!-- Reference: https://www.gethalfmoon.com/docs/navbar -->
</nav>
<!-- Navbar end -->
<!-- Sidebar overlay -->
<div class="sidebar-overlay" onclick="quartermoon.toggleSidebar()"></div>
<!-- Sidebar start -->
<div class="sidebar">
<!-- Reference: https://www.gethalfmoon.com/docs/sidebar -->
</div>
<!-- Sidebar end -->
<!-- Content wrapper start -->
<div class="content-wrapper">
<!--
Add your page's main content here
Examples:
1. https://www.gethalfmoon.com/docs/content-and-cards/#building-a-page
2. https://www.gethalfmoon.com/docs/grid-system/#building-a-dashboard
-->
<div class="w-full h-full d-flex align-items-center justify-content-center overflow-y-scroll">
<div class="content">
<h1 class="content-title">Quartermoon starter template</h1>
<div>
<a href="https://www.gethalfmoon.com" class="btn btn-link px-0">Quartermoon website</a>
</div>
<div>
<a href="https://www.gethalfmoon.com/docs" class="btn btn-link px-0">Quartermoon docs</a>
</div>
<div>
<a href="https://www.gethalfmoon.com/docs/page-building/#starter-template-generator" class="btn btn-link px-0">Starter template generator</a>
</div>
<div>
<a href="https://www.twitter.com/thaunknown" class="btn btn-link px-0">Follow on Twitter for updates</a>
</div>
<div class="mt-20">
Toggles:
<button class="btn btn-sm" type="button" onclick="quartermoon.toggleDarkMode()">Dark mode</button>
<button class="btn btn-sm" type="button" onclick="quartermoon.toggleSidebar()">Sidebar</button>
</div>
</div>
</div>
</div>
<!-- Content wrapper end -->
<!-- Navbar fixed bottom start -->
<nav class="navbar navbar-fixed-bottom">
<!-- Reference: https://www.gethalfmoon.com/docs/navbar#navbar-fixed-bottom -->
</nav>
<!-- Navbar fixed bottom end -->
</div>
<!-- Page wrapper end -->
<!-- Quartermoon JS -->
<script src="js/quartermoon.min.js"></script>
</body>
</html>