diff --git a/assignment.html b/assignment.html
index 5100ea1..bbdb288 100644
--- a/assignment.html
+++ b/assignment.html
@@ -2,9 +2,38 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>React App</title>
-      </head>
+    <title>Assignment 1</title>
+    <link rel="stylesheet" href="style.css"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
+  </head>
   <body>
-    <div id="app"></div>
+    <div class="mainNav clearfix">
+      <div class="blankDiv"></div>
+      <ul class="clearfix">
+        <li>THE GALLERY</li>
+        <li>HOW IT WORKS</li>
+        <li>HELP</li>
+      </ul>
+    </div>
+    <div class="banner"></div>
+    <div class="bodywrapper">
+      <h1>How It Works</h1>
+      <div class="circle">
+        <ul class="clearfix">
+          <li><div></div><p>Add art to your queue online</p></li>
+          <li><div></div><p>Receive art at your home in the order you specify</p></li>
+          <li><div></div><p>Keep the art for as long as you like. Buy only what you love</p></li>
+          <li><div></div><p>Return the art to receive the next piece in your queue</p></li>
+        </ul>
+      </div>
+    </div>
+      <footer class="footer">
+          <ul class="footerList clearfix">
+            <li><a href="">HOME</a></li>
+            <li><a href="">THE GALLERY</a></li>
+            <li><a href="">HOW IT WORKS</a></li>
+            <li><a href="">HELP</a></li>
+          </ul>
+      </footer>
   </body>
 </html>
diff --git a/bash.exe.stackdump b/bash.exe.stackdump
new file mode 100644
index 0000000..b3bf440
--- /dev/null
+++ b/bash.exe.stackdump
@@ -0,0 +1,3 @@
+Stack trace:
+Frame     Function  Args
+End of stack trace
diff --git a/sh.exe.stackdump b/sh.exe.stackdump
new file mode 100644
index 0000000..b3bf440
--- /dev/null
+++ b/sh.exe.stackdump
@@ -0,0 +1,3 @@
+Stack trace:
+Frame     Function  Args
+End of stack trace
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..66d04af
--- /dev/null
+++ b/style.css
@@ -0,0 +1,106 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.blankDiv {
+  background-color: #ff8000;
+  width: 140px;
+  height: 35px;
+  float: left;
+  margin: 7.5px 50px 7.5px 100px;
+}
+
+.mainNav {
+  font-size: 18px;
+  font-weight: bold;
+  background-color: black;
+  text-align: center;
+}
+
+.mainNav ul {
+  width: 375px;
+  margin: 0 auto;
+}
+
+.mainNav li {
+  color: #aaaaaa;
+  list-style: none;
+  float: left;
+  margin: 12.5px 20px 12.5px 0;
+}
+
+.mainNav li:last-child {
+  margin-right: 0;
+}
+
+.banner {
+  padding: 242px;
+  width: 100%;
+  background-color: #71c4ea;
+}
+
+.circle {
+  text-align: center;
+  width: 793px;
+  margin: 0 auto;
+}
+
+.circle p {
+  text-align: center;
+  width: 142px;
+}
+
+.circle div {
+  height: 140px;
+  width: 140px;
+  border-radius: 50%;
+  background-color: #efefef;
+  margin-top: 70px;
+  float: left;
+}
+
+.circle li {
+  float: left;
+  list-style: none;
+  margin-right: 75px;
+}
+
+.circle li:last-child {
+  margin-right: 0;
+}
+
+.bodywrapper h1 {
+  margin-top: 64px;
+  font-size: 36px;
+  color: #444444;
+  text-align: center;
+}
+
+.footer {
+  background-color: #ECECEC;
+  margin-top: 100px;
+  text-align: center;
+}
+
+.footer li {
+  float: left;
+  list-style: none;
+  font-weight: bold;
+  margin: 13.9px 20px 13.9px 0;
+}
+
+.footer a {
+  color: #FF8000;
+  font-size: 16px;
+  text-decoration: none;
+}
+
+.footer a:hover {
+  color: #444444;
+}
+
+.footerList {
+  width: 420px;
+  margin: 0 auto;
+}
