1 files changed, 117 insertions, 0 deletions
diff --git a/artifacts/ui-demo.html b/artifacts/ui-demo.html
new file mode 100644
index 0000000..1f85f8f
--- /dev/null
+++ b/artifacts/ui-demo.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      nav {
+        background-color: cadetblue;
+        margin: 0;
+        padding: 0;
+        height: 3em;
+      }
+      nav ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        overflow: hidden;
+      }
+      .navItem {
+        float: left;
+        display: block;
+        padding: 14px 14px;
+      }
+      .navItem a {
+        color: white;
+      }
+      nav input {
+        right: 100%;
+      }
+
+      .sidebar {
+        background-color: cadetblue;
+        position: fixed;
+        top: 3em;
+        left: -250px;
+        width: 250px;
+        height: 100%;
+        transition: 0.25s;
+      }
+      #menu:target .sidebar {
+        left: 0;
+      }
+
+      .menuTogglePrimary a.closeMenu {
+        display: none;
+      }
+      #menu:target .menuTogglePrimary a.closeMenu {
+        display: block;
+      }
+
+      #menu:target .menuTogglePrimary a.openMenu {
+        display: none;
+      }
+
+      .content {
+        transition: margin-left 0.25s;
+      }
+      #menu:target .content {
+        margin-left: 250px;
+      }
+    </style>
+  </head>
+  <body id="menu">
+    <nav>
+      <div class="menuContainer">
+        <ul>
+          <li class="navItem">
+            <div class="menuTogglePrimary">
+              <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>
+
+            <div 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>
+            </div>
+          </li>
+          <li class="navItem"><a href="#">Catalog</a></li>
+          <li class="navItem"><a href="#">Parts List</a></li>
+          <li class="navItem"><a href="#">Cars List</a></li>
+          <li class="navItem"><a href="#">Suggestions</a></li>
+          <li class="navItem"><a href="#">About</a></li>
+          <li class="navItem"><a href="#">Login</a></li>
+        </ul>
+      </div>
+    </nav>
+
+    <div class="content">
+      <input type="search" placeholder="search" />
+      <p>this is the datas</p>
+    </div>
+  </body>
+</html>