Footer and Logo

client/public/index.html

@@ -1,5 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <style>
+
+  body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+  }
+
+  main {
+    flex: 1 0 auto;
+  }
+
+  </style>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

client/src/App.js

@@ -2,13 +2,11 @@ import React, { Component } from 'react';
 import ApolloClient from 'apollo-boost';
 import {ApolloProvider} from 'react-apollo';
 
-import Navbar from './components/Navbar'
 import { Route, BrowserRouter, Switch } from 'react-router-dom'
 
 // Components
 
-
-
+import Navbar from './components/Navbar'
 import Home from './components/Home'
 import Profile from './components/Profile'
 import Browse from './components/Browse'
@@ -16,6 +14,7 @@ import Search from './components/Search'
 import About from './components/About'
 import Contact from './components/Contact'
 import Post from './components/Post'
+import Footer from './components/Footer'
 
 // Apollo Client Setup
 
@@ -40,6 +39,7 @@ class App extends Component {
               <Route path='/contact' component={Contact} />
               <Route path='/:post_id' component={Post} />
             </Switch>
+            <Footer/>
           </div>
 
         </ApolloProvider>

client/src/components/Footer.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <footer>
+      <div className="container">
+        <div className="row">
+          <div className="col l6 s12">
+            <h5 className="white-text">Footer Content</h5>
+            <p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
+          </div>
+          <div className="col l4 offset-l2 s12">
+            <h5 className="white-text">Links</h5>
+            <ul>
+              <li><a className="grey-text text-lighten-3" href="#!">Link 1</a></li>
+              <li><a className="grey-text text-lighten-3" href="#!">Link 2</a></li>
+              <li><a className="grey-text text-lighten-3" href="#!">Link 3</a></li>
+              <li><a className="grey-text text-lighten-3" href="#!">Link 4</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className="footer-copyright">
+        <div className="container">
+        © 2014 Copyright Text
+        <a className="grey-text text-lighten-4 right" href="#!">More Links</a>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

client/src/components/Home.js

@@ -21,7 +21,7 @@ class Home extends Component {
               <img src={PortraitImage} alt="" className="responsive-img materialboxed"></img>
           </div>
           <div className="col s12 l6 offset-l1">
-            <h2 className="indigo-text text-darken-4">Portraits</h2>
+            <h2 className="indigo-text text-darken-4">Title 1</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
           </div>
         </div>
@@ -30,7 +30,7 @@ class Home extends Component {
               <img src={CityImage} alt="" className="responsive-img materialboxed"></img>
           </div>
           <div className="col s12 l6 offset-l1 pull-l5 right-align">
-            <h2 className="indigo-text text-darken-4">Cityscapes</h2>
+            <h2 className="indigo-text text-darken-4">Title 2</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
           </div>
         </div>
@@ -39,7 +39,7 @@ class Home extends Component {
               <img src={NatureImage} alt="" className="responsive-img materialboxed"></img>
           </div>
           <div className="col s12 l6 offset-l1">
-            <h2 className="indigo-text text-darken-4">Nature</h2>
+            <h2 className="indigo-text text-darken-4">Title 3</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
           </div>
         </div>
@@ -71,12 +71,12 @@ class Home extends Component {
               </li>
             </ul>
             <div id="photography" className="col s12">
-                <p className="flow-text indigo-text text-darken-4">Photography</p>
+                <p className="flow-text indigo-text text-darken-4">This</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
                 <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
             </div>
             <div id="editing" className="col s12">
-                <p className="flow-text indigo-text text-darken-4">Editing</p>
+                <p className="flow-text indigo-text text-darken-4">That</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
                 <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
             </div>

client/src/components/Navbar.js

@@ -1,12 +1,27 @@
 import React from 'react';
 import { NavLink, withRouter } from 'react-router-dom'
 
+// Images
+
+import AALogo from '../img/aa-logo-dark-8.png'
+
 const Navbar = (props) => {
   return (
     <header>
       <nav className="nav-wrapper transparent">
-        <div className="container">
-          <a href="http://www.advancedalgos.net" className="brand-logo">Users Module</a>
+        <div >
+
+          <ul className="left hide-on-med-and-down" id="brand-menu">
+            <li>
+              <a href="http://www.advancedalgos.net">
+                <div>
+                  <img src={AALogo} alt="Advanced Algos" width="120" height="24" topmargin="216"></img>
+                </div>
+              </a>
+            </li>
+            <li><a href="http://www.advancedalgos.net" className="module-name">Users Module</a></li>
+          </ul>
+
           <a href="" className="sidenav-trigger" data-target="mobile-menu">
             <i className="material-icons">menu</i>
           </a>

client/src/index.css

@@ -1,12 +1,6 @@
-body {
-  background: #eee;
-  font-family: "Arial";
-}
 
-#main h1{
-  color:#444;
-  text-align: center;
-}
+
+
 
 #main{
   padding: 0px;
@@ -15,6 +9,11 @@ body {
   height: 100%;
 }
 
+#main h1{
+  color:#444;
+  text-align: center;
+}
+
 #user-list{
   color: black;
   padding: 0;
@@ -97,7 +96,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-  background: #eee;
+  background-color:rgb(255, 255, 255);
 }
 
 nav a.active{
@@ -122,12 +121,12 @@ nav a.active{
 }
 
 
-
+.module-name{
+  text-decoration-color: white;
+}
 
 header{
-  background: url(img/nav-bar.jpg);
-  background-size: cover;
-  background-position: center;
+  background-color:rgb(48, 48, 54);
   min-height: 50px;
 }
 @media screen and (max-width: 670px){
@@ -145,3 +144,9 @@ header{
 .tabs .tab a:focus, .tabs .tab a:focus.active{
   background: transparent;
 }
+
+
+footer{
+  background-color:rgb(48, 48, 54);
+  min-height: 50px;
+}