code301-nitrogen · heicj · Dec 19, 2017 · Dec 19, 2017 · Dec 19, 2017
diff --git a/index.html b/index.html
@@ -4,6 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy|Roboto" rel="stylesheet">
+    <link rel="stylesheet" href="styles/vendor/normalize.css">
+    <link rel="stylesheet" href="styles/base.css">
+    <link rel="stylesheet" href="styles/layout.css">
+    <link rel="stylesheet" href="styles/module.css">
+    <link rel="stylesheet" href="styles/state.css">
+    <link rel="stylesheet" href="styles/theme.css">
+
     <title>Mars Rover Photo App</title>
 
     <script id = "image-template" type="text/x-handlebars-template">
@@ -17,20 +25,20 @@
 
 </head>
 <body>
-    <nav>
+    <div class="nav">
         <ul>
-            <li><a href = "/client">HOME</a></li>
-            <li><a href = "/client/discover">DISCOVER</a></li>
-            <li><a href = "/client/faves">FAVES</a></li>
-            <li><a href = "/client/learn">LEARN</a></li>
-            <li><a href = "/client/about">ABOUT</a></li>
+            <li class="home"><a href = "/client">HOME</a></li>
+            <li class="discover"><a href = "/client/discover">DISCOVER</a></li>
+            <li class="faves"><a href = "/client/faves">FAVORITES</a></li>
+            <li class="learn"><a href = "/client/learn">LEARN</a></li>
+            <li class="about"><a href = "/client/about">ABOUT</a></li>
         </ul>
 
     </nav>
 
     <main>
         <section id="home">
-            <p>This is a test, this is ONLY a test....</p>
+            <iframe src="https://giphy.com/embed/EA4tMPoqsE6pq" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/mars-EA4tMPoqsE6pq" alt="gif of Mars, via GIPHY"></a></p>
 
         </section>
 
@@ -141,11 +149,13 @@ <h1>"About Team Nitrogen"</h1>
             <div class="bio"></div>
 
         </section>
+
         <footer>
             <p>&copy 2017 Team Nitrogen</p>
         </footer>
 
 
+
     </main>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
     <script src="https://cdn.rawgit.com/visionmedia/page.js/master/page.js"></script>

diff --git a/styles/.DS_Store b/styles/.DS_Store
diff --git a/styles/base.css b/styles/base.css
@@ -1,13 +1,31 @@
-body {
+html, body {
     margin: 0;
     padding: 0;
     background-color: rgb(74, 98, 163);
 }
 
+h1 {
+    font-family: 'Luckiest Guy', cursive;
+    font-size: 2.5em;
+} 
+
 a {
+    text-decoration: none;
     color: rgb(251, 153, 76);
-}
+    display: block;
+  }
+
+ a:hover {
+    color: rgb(228, 53, 9);
+  }
+
+a.active {
+    color: rgb(251, 153, 76);
+    cursor: default;
+  }
 
-a:hover {
-    color: rgb(124, 56, 29);
-}
+
+
+  img {
+
+  }
diff --git a/styles/layout.css b/styles/layout.css
@@ -1,46 +1,12 @@
-
-
-.flex-container {
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: space-between;
-    align-items: flex-start;
-    }
-
-.flex-item:nth-child(1) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
-
-.flex-item:nth-child(2) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
-
-.flex-item:nth-child(3) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
-
-.flex-item:nth-child(4) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
-
-.flex-item:nth-child(5) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
-
-.flex-item:nth-child(6) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
+#header, #footer, #section {
+    width: 100%;
+    margin: 0 auto;
+}
+
+#home {
+    background-color: #000000;
+}
+
+#discover {
+
+}
diff --git a/styles/module.css b/styles/module.css
@@ -0,0 +1,81 @@
+/* Navigation module */
+
+.nav ul {
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    margin: 0px auto;
+    background-color: #000000;
+  }
+
+.nav li {
+    display: inline-block;
+    font-family: 'Luckiest Guy', cursive;
+    font-size: 1em;
+    line-height: 40px;
+    height: 40px;
+    padding: 5px 10px;
+  }
+
+.nav a {
+    text-decoration: none;
+    color: rgb(251, 153, 76);
+    display: block;
+  }
+
+.nav a:hover {
+    color: rgb(228, 53, 9);
+  }
+
+.nav a.active {
+    color: rgb(251, 153, 76);
+    cursor: default;
+  }
+
+
+/* Container module */
+
+.flex-container {
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: space-between;
+    align-items: flex-start;
+    }
+
+.flex-item:nth-child(1) {
+    order: 0;
+    flex: 0 1 auto;
+    align-self: auto;
+    }
+
+.flex-item:nth-child(2) {
+    order: 0;
+    flex: 0 1 auto;
+    align-self: auto;
+    }
+
+.flex-item:nth-child(3) {
+    order: 0;
+    flex: 0 1 auto;
+    align-self: auto;
+    }
+
+.flex-item:nth-child(4) {
+    order: 0;
+    flex: 0 1 auto;
+    align-self: auto;
+    }
+
+.flex-item:nth-child(5) {
+    order: 0;
+    flex: 0 1 auto;
+    align-self: auto;
+    }
+
+.flex-item:nth-child(6) {
+    order: 0;
+    flex: 0 1 auto;
+    align-self: auto;
+    }
diff --git a/styles/theme.css b/styles/theme.css
@@ -0,0 +1,12 @@
+    /* Learn page styling */
+    #learn p#question {
+        font-family: 'Roboto', sans-serif;
+        font-style: bold;
+        font-size: 14px;
+        }
+
+            /* Learn page styling */
+#learn p#answer {
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    }
diff --git a/styles/vendor/.DS_Store b/styles/vendor/.DS_Store