<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SGR Department of Transportation</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/darkly/bulmaswatch.min.css" media="(prefers-color-scheme: dark)">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="has-background-dark has-text-white">

  <!-- Navbar -->
  <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <i class="fas fa-bus"></i> <strong>DOT</strong>
      </a>

      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasic">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarBasic" class="navbar-menu">
      <div class="navbar-start">
        <a href="#" class="navbar-item has-icons-left">
          <i class="fas fa-home"></i> <span class="ml-2">Home</span>
        </a>

        <a href="#" class="navbar-item has-icons-left">
          <i class="fas fa-users"></i> <span class="ml-2">Members</span>
        </a>

        <a href="#" class="navbar-item has-icons-left">
          <i class="fas fa-clipboard-list"></i> <span class="ml-2">Plates</span>
        </a>

        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            <i class="fas fa-cogs"></i> <span class="ml-2">Applications</span>
          </a>

          <div class="navbar-dropdown">
            <a href="#" class="navbar-item">
              <i class="fas fa-plus"></i> <span class="ml-2">New Application</span>
            </a>
            <a href="#" class="navbar-item">
              <i class="fas fa-search"></i> <span class="ml-2">View Applications</span>
            </a>
            <a href="#" class="navbar-item">
              <i class="fas fa-edit"></i> <span class="ml-2">Edit Applications</span>
            </a>
            <hr class="navbar-divider">
            <a href="#" class="navbar-item">
              <i class="fas fa-question-circle"></i> <span class="ml-2">Help</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <div class="hero is-fullheight is-dark">
    <div class="hero-body">
      <div class="container has-text-centered">
        <h1 class="title">SGR Department Of Transportation</h1>
        <p class="subtitle">At the moment, this page is empty and will stay empty for a while</p>
      </div>
    </div>
  </div>

</body>
</html>