From 8dd598d7e004c3211a063ac541523324f78ea350 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Wed, 24 Mar 2021 16:40:23 -0400
Subject: added sitel layout and basic UI demo for mockup
---
artifacts/ui-demo.html | 117 +++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 117 insertions(+)
create mode 100644 artifacts/ui-demo.html
(limited to 'artifacts/ui-demo.html')
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>
--
cgit v1.2.3