diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..05dba0b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+# Notes
+
+## Links
\ No newline at end of file
diff --git a/assets/landing.css b/assets/landing.css
new file mode 100644
index 0000000..bd76d8e
--- /dev/null
+++ b/assets/landing.css
@@ -0,0 +1,80 @@
+:root {
+  --cbar-spacing: 4rem;
+}
+
+.landing-row {
+  margin-left: 4rem;
+  margin-top: 2rem;
+}
+.landing-row ul.simple-lines {
+  margin-top: 1rem;
+  line-height: 1.2;
+}
+
+.landing-row {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+.landing-row .headers {
+  display: flex;
+  flex-direction: column;
+  margin-right: 3rem;
+}
+.landing-row .headers div.header-box {
+  display: flex;
+  flex-direction: row;
+  gap: 3rem;
+}
+.landing-row .headers div.header-box .main-header {
+  font-weight: bold;
+  text-align: right;
+  min-width: 7rem;
+}
+.landing-row .headers div.header-box .main-header.top {
+  margin-top: calc(var(--cbar-spacing) * 1);
+}
+.landing-row .headers div.header-box .main-header.bottom {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.landing-row .headers div.header-box .sub-header {
+  margin-top: calc(var(--cbar-spacing) * 2);
+}
+.landing-row .color-stack {
+  display: flex;
+  flex-direction: column;
+}
+.landing-row .color-stack > div {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: row;
+}
+.landing-row .color-stack div.top {
+  max-height: calc(var(--cbar-spacing) * 2);
+  flex: 1 0;
+}
+.landing-row .color-stack div.bottom {
+  background-color: var(--yellow0);
+}
+.landing-row .color-stack div.bottom div {
+  background-color: var(--white0);
+}
+.landing-row .color-stack div.color-bar {
+  flex: 0 0;
+  min-height: var(--cbar-spacing);
+}
+.landing-row .color-stack div.color-bar div {
+  background-color: var(--white0);
+}
+.landing-row .color-stack div.color-bar.yellow {
+  background-color: var(--yellow0);
+}
+.landing-row .color-stack div.color-bar.pink {
+  background-color: var(--pink0);
+}
+.landing-row .color-stack div.color-bar.tan {
+  background-color: var(--tan0);
+}
+
+/*# sourceMappingURL=landing.css.map */
diff --git a/assets/landing.css.map b/assets/landing.css.map
new file mode 100644
index 0000000..b0fba75
--- /dev/null
+++ b/assets/landing.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/landing.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EAEI;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EAEI;;AAOZ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAIR;EAEI;EAEA;;AAGA;EACI;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI","file":"landing.css"}
\ No newline at end of file
diff --git a/assets/reset.css b/assets/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/assets/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/assets/styles.css b/assets/styles.css
new file mode 100644
index 0000000..b41fb36
--- /dev/null
+++ b/assets/styles.css
@@ -0,0 +1,39 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
+:root {
+  --black0: #404040;
+  --white0: #ffffff;
+  --yellow0: #f8f18d;
+  --tan0: #fee3c5;
+  --pink0: #f8bfd1;
+  font-family: sans-serif;
+}
+
+body,
+html {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+ul.simple-lines {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+ul.simple-lines a {
+  color: var(--black0);
+  text-decoration: none;
+}
+ul.simple-lines a:visited {
+  color: var(--black0);
+}
+ul.simple-lines a:hover {
+  text-decoration: underline;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/assets/styles.css.map b/assets/styles.css.map
new file mode 100644
index 0000000..3ebd6b7
--- /dev/null
+++ b/assets/styles.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/styles.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAIA;EACE;EACA;EACA;;AAEA;EACE;EAIA;;AAHA;EACE;;AAGF;EACE","file":"styles.css"}
\ No newline at end of file
diff --git a/build.sh b/build.sh
new file mode 100755
index 0000000..b194e2d
--- /dev/null
+++ b/build.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+
+sass scss/styles.scss assets/styles.css
+sass scss/landing.scss assets/landing.css
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f8da662
--- /dev/null
+++ b/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="assets/reset.css">
+    <link rel="stylesheet" href="assets/styles.css">
+    <link rel="stylesheet" href="assets/landing.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="main-container">
+        <div class="landing-row">
+            <div class="headers">
+                <div class="header-box">
+                    <div class="main-header top">
+                        <h1>Seeing</h1>
+                    </div>
+                    <div class="sub-header">
+                        <ul class="simple-lines">
+                            <li>Arianna Green</li>
+                            <li>Technology for Design II</li>
+                            <li>Graphic Design</li>
+                            <li>The Design School</li>
+                            <li>Arizona State University</li>
+                        </ul>    
+                    </div>
+    
+                </div>
+                <div></div>
+                <div class="header-box" style="flex: 1 1 auto;">
+                    <div class="main-header bottom">
+                        <h2>Rhythms</h2>
+                    </div>
+                    <div class="sub-header">
+                        <ul class="simple-lines">
+                            <li><a href="#">Teja Spanish Website</a></li>
+                            <li><a href="#">First Code Project</a></li>
+                            <li><a href="#">Motion Graphic</a></li>
+                            <li><a href="#">Phoenix Library Redesign</a></li>
+                            <li><a href="#">Far From App</a></li>
+                            <li><a href="#">PS Aid</a></li>
+                        </ul>
+                        <div style="flex: 1 1 auto"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="color-stack" style="flex: 1 0 auto;">
+
+                <div class="top"></div>
+                <div class="color-bar yellow">
+                    <div style="width: 6rem;"></div>
+                </div>
+                <div class="color-bar pink">
+                    <div style="width: 9rem;"></div>
+                </div>
+                <div class="color-bar tan">
+                </div>
+                <div class="color-bar pink">
+                    <div style="width: 3rem;"></div>
+                </div>
+                <div class="color-bar tan">
+                    <div style="width: 9rem;"></div>
+                </div>
+
+                <div class="bottom">
+                    <div style="width: 3rem"></div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/scss/landing.scss b/scss/landing.scss
new file mode 100644
index 0000000..46f51db
--- /dev/null
+++ b/scss/landing.scss
@@ -0,0 +1,104 @@
+:root {
+    --cbar-spacing: 4rem;
+}
+
+.landing-row {
+
+    margin-left: 4rem;
+    margin-top: 2rem;
+
+    ul.simple-lines {
+        margin-top: 1rem;
+        line-height: 1.2;
+    }
+}
+
+.landing-row {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+
+    .headers {
+        display: flex;
+        flex-direction: column;
+        margin-right: 3rem;
+
+        div.header-box {
+            display: flex;
+            flex-direction: row;
+            gap: 3rem;
+            .main-header {
+                font-weight: bold;
+                text-align: right;
+                min-width: 7rem;
+            }
+
+            .main-header.top {
+                margin-top: calc(var(--cbar-spacing)*1);                
+            }
+
+            .main-header.bottom {
+                display: flex;
+                flex-direction: column-reverse;
+            }
+
+            .sub-header {
+
+                margin-top: calc(var(--cbar-spacing)*2);
+            }
+        }
+
+
+    }
+
+    .color-stack {
+        display: flex;
+        flex-direction: column;
+
+        >div {
+            flex: 1 0 auto;
+            display: flex;
+            flex-direction: row;
+        }
+
+        div.top {
+            max-height: calc(var(--cbar-spacing)*2);
+            flex: 1 0;
+        }
+
+        div.bottom {
+            background-color: var(--yellow0);
+
+            div {
+                background-color: var(--white0);
+            }
+        }
+
+        div.color-bar {
+
+            flex: 0 0;
+
+            min-height: var(--cbar-spacing);
+
+
+            div {
+                background-color: var(--white0);
+            }
+
+
+            &.yellow {
+                background-color: var(--yellow0);
+            }
+
+            &.pink {
+                background-color: var(--pink0);
+            }
+
+            &.tan {
+                background-color: var(--tan0);
+            }
+
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/scss/styles.scss b/scss/styles.scss
new file mode 100644
index 0000000..dffc6c5
--- /dev/null
+++ b/scss/styles.scss
@@ -0,0 +1,42 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
+
+:root {
+  --black0: #404040;
+  --white0: #ffffff;
+  --yellow0: #f8f18d;
+  --tan0: #fee3c5;
+  --pink0: #f8bfd1;
+  font-family: sans-serif;
+}
+
+body,
+html {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+ul {
+  &.simple-lines {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    a {
+      color: var(--black0);
+      &:visited {
+        color: var(--black0);
+      }
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+  }
+}
\ No newline at end of file