path: root/artifacts/ui-demo.html



<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --balboa: #195970;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .topbar {
        background-color: var(--balboa);
        box-shadow: 0 0 0.5em black;
        position: relative;
        height: 3em;
        z-index: 1;
      }

      .topbar ul {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .topbar li {
        float: left;
        display: block;
        padding: 14px 14px;
      }

      .topbar li a {
        color: white;
        text-decoration: none;
      }

      .sidebar {
        background-color: var(--balboa);
        box-shadow: inset -0.5em 0 0.5em -0.5em black;
        z-index: -1;
        position: fixed;
        top: 3em;
        left: -20%;
        width: 20%;
        height: 100%;
        transition: 0.25s;
      }

      .sidebar ul {
        list-style-type: none;
      }

      .sidebar a {
        color: white;
        text-decoration: none;
      }

      #menu:target .sidebar {
        left: 0;
      }

      .menuToggle a.closeMenu {
        display: none;
      }
      #menu:target .menuToggle a.closeMenu {
        display: block;
      }

      #menu:target .menuToggle a.openMenu {
        display: none;
      }

      #menu:target section {
        margin-left: 20%;
      }

      .catalogTable {
        width: 100%;
        border-collapse: collapse;
      }
      .catalogTable td,
      .catalogTable th {
        padding: 0.5em;
      }

      .catalogTable tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      .catalogTable tr:hover {
        background-color: #ddd;
      }
      .catalogTable th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: var(--balboa);
        color: white;
      }

      input[type="search"] {
        text-align: center;
        width: 100%;
      }

      section {
        transition: margin-left 0.25s;
        padding-top: 2em;
        padding-left: 2em;
        padding-right: 2em;
      }
    </style>
  </head>
  <body id="menu">
    <nav class="topbar">
      <ul>
        <li>
          <div class="menuToggle">
            <a class="openMenu" href="#menu"
              ><span
                ><svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
                  <path
                    fill="currentColor"
                    d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
                  /></svg></span
            ></a>
            <a class="closeMenu" href="#"
              ><span
                ><svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
                  <path
                    fill="currentColor"
                    d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z"
                  /></svg></span
            ></a>
          </div>
        </li>
        <li><a href="#menu">Catalog</a></li>
        <li><a href="#">Parts List</a></li>
        <li><a href="#">Cars List</a></li>
        <li><a href="#">Suggestions</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </nav>

    <nav class="sidebar">
      <ul>
        <li>
          <a href="#menu">Hudson</a>
          <ul>
            <li><a href="#menu">Hornet</a></li>
          </ul>
        </li>
        <li><a href="#menu">Essex</a></li>
        <li><a href="#menu">Terraplane</a></li>
      </ul>
    </nav>

    <section>
      <input type="search" placeholder="hit enter to search!" />
    </section>

    <section>
      <table class="catalogTable">
        <thead>
          <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Engine CID</th>
            <th>Year</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Hudson</td>
            <td>Wasp</td>
            <td>262ci</td>
            <td>1952</td>
          </tr>
          <tr>
            <td>Hudson</td>
            <td>Hornet</td>
            <td>308ci</td>
            <td>1953</td>
          </tr>
        </tbody>
      </table>
    </section>
  </body>
</html>