5 files changed, 149 insertions, 0 deletions
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
new file mode 100644
index 0000000..b6bd538
--- /dev/null
+++ b/src/assets/css/main.css
@@ -0,0 +1,109 @@
+html, body {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background-color: black;
+}
+
+
+
+@media screen and (max-width: 500px) {
+  #nav, #space {
+    display: none;
+  }
+  #mobile-nav {
+    display: grid;
+    height: 70px;
+    grid-template-columns: 20% 20% 20% 20% 20%;
+  }
+}
+@media screen and (min-width: 501px) and (max-width: 1099px) {
+  .floatwrapper > center > :nth-child(1) {
+    display: none;
+  }
+  .floatwrapper > center > :nth-child(2) {
+    display: unset;
+  }
+  #nav {
+    display: grid;
+    width: 50px;
+  }
+  #space {
+    display: none;
+  }
+  #mobile-nav {
+    display: none;
+  }
+}
+@media screen and (min-width: 1100px) {
+  .floatwrapper > center > :nth-child(1) {
+    display: unset;
+  }
+  .floatwrapper > center > :nth-child(2) {
+    display: none;
+  }
+  #nav {
+    display: grid;
+  }
+  #space {
+    display: unset;
+  }
+  #mobile-nav {
+    display: none;
+  }
+}
+
+
+
+body {
+  display: flex;
+  flex-flow: row nowrap;
+  max-width: 100vw;
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url("/assets/image/background.jpg");
+  background-size: cover;
+}
+
+/* TESTING */
+#nav {
+  background-color: #fffa;
+}
+#content {
+  background-color: #ddda;
+}
+#mobile-nav {
+  background-color: #fffa;
+}
+/* END TESTING */
+
+
+#nav {
+  align-content: space-between;
+}
+#body {
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 7;
+}
+#space {
+  flex-grow: 2;
+}
+
+#content {
+  flex-grow: 1;
+}
+
+.noaa {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -o-crisp-edges;
+  image-rendering: pixelated;
+}
+.floatwrapper {
+  position: sticky
+}
+
+.mobile-nav-button {
+  display: block;
+  margin: auto;
+}
+\ No newline at end of file
diff --git a/src/assets/image/background.jpg b/src/assets/image/background.jpg
new file mode 100644
index 0000000..1bc4421
--- /dev/null
+++ b/src/assets/image/background.jpg
diff --git a/src/assets/image/header.png b/src/assets/image/header.png
new file mode 100644
index 0000000..85c482d
--- /dev/null
+++ b/src/assets/image/header.png
diff --git a/src/assets/image/icon.png b/src/assets/image/icon.png
new file mode 100644
index 0000000..4379547
--- /dev/null
+++ b/src/assets/image/icon.png
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..c291abd
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE lang="en" html>
+<head>
+  <title>Infernal * Garden</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style defer>@import url("/assets/css/main.css");</style>
+  <link rel="icon" type="image/png" href="/assets/image/icon.png">
+</head>
+<body>
+  <div id="nav">
+    <div class="floatwrapper">
+      <center>
+        <div>
+          <img class="noaa" src="/assets/image/header.png">
+        </div>
+        <div>
+          <img class="noaa" src="/assets/image/icon.png">
+        </div>
+      </center>
+      <div id="nav-pin">pin</div>
+    </div>
+  </div>
+  <div id="body">
+    <div id="content">
+      dd
+    </div>
+    <div id="mobile-nav">
+        <div class="mobile-nav-button"></div>
+        <div class="mobile-nav-button"></div>
+        <div class="mobile-nav-button">
+          <img class="noaa" src="/assets/image/icon.png">
+        </div>
+        <div class="mobile-nav-button"></div>
+        <div class="mobile-nav-button"></div>
+    </div>
+  </div>
+  <div id="space"></div>
+  <footer></footer>
+</body>
+</html>
+\ No newline at end of file