Ada-C9 · kcforsman · Jun 18, 2018 · Jun 18, 2018 · Jun 18, 2018 · Jun 18, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
   },
   "scripts": {
@@ -13,4 +15,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>NW Movies</title>
+    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy|Rufina:400,700" rel="stylesheet">
   </head>
   <body>
     <noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,28 +1,136 @@
-.App {
-  text-align: center;
+body{
+  background-color: #6699FF;
+  font-family: 'Rufina', serif;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+main {
+  height: 750px;
+  background-color: white;
+  width: 95%;
+  max-width: 1500px;
+  min-width: 1000px;
+  margin: 7.5px auto;
+  border: 2px solid #FF6699;
+  box-shadow: 2px 2px 5px #CC3366;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
+header {
+  width: 100%;
+  height: 135px;
+  display: grid;
+  grid-template: 1fr / 30px 2.5fr 1fr 30px;
+  border-bottom: 2.5px solid #FF6699;
+  box-shadow: 2px 2px 3px #CC3366;
+  background-color: #003399;
   color: white;
 }
 
-.App-title {
+.heading-container {
+  grid-column: 2 / span 1;
+  text-align: left;
+  border-right: 2.5px solid #FF6699;
+}
+
+.app-heading {
+  font-family: 'Luckiest Guy', cursive;
+  font-size: 2.7em;
+  text-shadow: 2.5px 2.5px #FF6699;
+  margin: 30px 0 10px;
+}
+
+.app-heading .link {
+  text-decoration: none;
+}
+
+nav{
+  padding: 0;
+  margin: 0;
+  width: 600px;
+}
+
+.link-container {
+  display: flex;
+  justify-content: space-between;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.route-link {
+  color: white;
+  text-decoration: none;
+}
+
+.link-container li .route-link {
+  font-weight: bold;
   font-size: 1.5em;
 }
 
-.App-intro {
-  font-size: large;
+.link-container li .route-link:hover {
+  text-shadow: 1px 2px #FF6699;
+}
+
+header form {
+  grid-column: 3 / span 1;
+  text-align: right;
+}
+
+.button {
+  border: 2px solid #FF6699;
+  box-shadow: 2px 2px 3px #CC3366;
+  background-color: #CC3366;
+  color: white;
+  font-family: 'Rufina', serif;
+  font-weight: bold;
+  font-size: .9em;
+  width: 150px;
+  height: 2.5em;
+}
+
+.button:hover {
+  border: 2px solid #CC3366;
+  box-shadow: 2px 2px 3px #FF6699;
+  background-color: #FF6699;
+}
+
+.main-container {
+  width: 90%;
+  height: 600px;
+  margin: 25px auto;
+  color: #003399;
+}
+
+.results-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.results-container h3 {
+  font-family: 'Luckiest Guy', cursive;
+  font-size: 2em;
+  margin: 0 0 5px;
+}
+
+.results-container ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  height: 525px;
+  border: 3px solid #FF6699;
+  width: 75%;
+  overflow: scroll;
+}
+
+.results-container ul li {
+  border-bottom: 3px solid #CC3366;
+  margin: 0;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.list-item-container {
+  display: grid;
+  align-items: center;
+  grid-template: 1fr / 3fr 1fr;
+  padding: 10px;
 }