Feature- about page

src/App.css

@@ -3,6 +3,7 @@
   height: 5rem;
   background-color: #044599;
   padding: 0 10%;
+  text-align: center;
 }
 
 .header nav {

src/App.js

@@ -5,6 +5,7 @@ import './App.css';
 import { fetchCat, fetchYe } from './service';
 import Cats from './pages/cats';
 import Quote from './pages/quote';
+import About from './pages/About';
 
 class App extends React.Component {
   constructor() {
@@ -23,11 +24,12 @@ class App extends React.Component {
     });
  }
 
- getQuote = () => {
+getQuote = () => {
   return fetchYe().then(data => {
     let quote = data.quote;
     this.setState({quote: quote, picUrl: 'https://picsum.photos/600/600?grayscale'});
   });
+
 }
 
   render() {
@@ -42,6 +44,9 @@ class App extends React.Component {
               <li>
                 <Link to="/quotes">The only direction</Link>
               </li>
+              <li>
+                <Link to="/about">About this thing</Link>
+              </li>
             </ul>
           </nav>
         </header>
@@ -52,6 +57,9 @@ class App extends React.Component {
           <Route path="/cats">
             <Cats getCat={this.getCat} cat={this.state.cat} />
           </Route>
+          <Route path="/about">
+            <About />
+          </Route>
         </main>
 
       </div>

src/pages/About.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const About = () => {
+    return(
+        <div>This is new</div>
+    );
+}
+
+export default About;

src/service.js

@@ -10,5 +10,11 @@ export function fetchYe() {
    }).then(response => response.json());
   }
 
+//   export function fetchNasa() {
+//       return fetch('https://api.nasa.gov/planetary/apod?api_key=fLyqTkOiS1CYt44RynV69I0bhbx43Kcicjp43jhf', {
+//           method: 'GET'
+//       }).then(response => response.json());
+//   }
+