updated header and home structure, layout, styles - wip home content

src/App.css

@@ -17,60 +17,13 @@ html, body, #root {
   flex: 1 0 auto;
 }
 
-/**************** HEADER STYLES ***************/
-
-
-.header-styles, footer {
-  background-color: rgb(0,123,77);
-  color: #FFFFFF;
-  padding: 1% 0;
-}
-
-#title {
-  font-family: 'Rajdhani', sans-serif;
-}
-
-.link-styles, .footer-styles, .headline {
-  font-family: 'Roboto', sans-serif;
-}
-
-#title {
-  font-size: 3rem;
-}
-
-.headline {
-  font-size: 1.25rem;
-}
-
-/************* NAV STYLES ********************/
-.ul-styles{
-  display: flex;
-  list-style: none;
-  justify-content: space-between;
-  margin: 3% 10%;
-}
-
-.link-styles {
-  color: #FFFFFF;
+a {
   text-decoration: none;
-  font-size: 2rem;
-}
-
-.hamburger {
-  opacity: 0%;
-}
-
-.link-styles:hover {
-  text-decoration: underline;
-}
-
-.close {
-  display: none;
+  cursor: pointer;
 }
 
-
 /**************** ABOUT STYLES ********************/
-.about {
+/* .about {
   display: flex;
   justify-content: center;
 }
@@ -80,7 +33,7 @@ html, body, #root {
   line-height: 1.9rem;
   font-size: 1.1rem;
   padding-top: 5%;
-}
+} */
 
 /****************** RESOURCES STYLES ****************/
 .resources-list {
@@ -152,7 +105,7 @@ html, body, #root {
   height: 60px;
   display: flex;
   justify-content: center;
-  margin-top: 3%;
+  /* margin-top: 3%; */
   flex-shrink: 0;
 }
 
@@ -167,63 +120,7 @@ html, body, #root {
   cursor: pointer;
 }
 
-@media (max-width: 740px) {
-  .header-styles {
-    display: flex;
-    justify-content: space-between;
-    padding: 2%;
-    /* min-height: 200px; */
-  }
-
-  .headline {
-    display: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .hamburger {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    width: 70px;
-    height: 70px;
-    border: 1px solid white;
-    border-radius: 10%;
-    margin: auto 0;
-  }
-
-  .hamburger-slice {
-    border-bottom: 3px solid #FFFFFF;
-    width: 90%;
-    margin-bottom: 3px;
-    align-self: center;
-    border-radius: 50%;
-  }
-
-  .hamburger-slice:last-child {
-    margin-bottom: 0;
-  }
-
-  .sidebar {
-    display: none;
-    flex-direction: column;
-    margin: 0;
-    padding: 0;
-    transform: translateX(120%);
-    transition: all .2s ease-in-out 0s;
-  }
-
-  .sidebar-active {
-    transform: translateX(0%);
-    transition: all .2s ease-in-out 0s;
-    display: flex;
-    min-height: 250px;
-  }
-
-  .hideburger {
-    display: none;
-  }
-
+@media screen and (max-width: 740px) {
   li {
     margin-bottom: 13px;
   }
@@ -239,4 +136,4 @@ html, body, #root {
   .borough-data-styles {
     min-width: 200px;
   }
-}
+}

src/components/ByBorough.js

@@ -1,5 +1,5 @@
-import React from 'react'
-import '../App.css'
+import React from 'react';
+import '../App.css';
 
 const ByBorough = (props) => {
   const [borough, setBorough] = React.useState(null);

src/components/Header.css

@@ -0,0 +1,45 @@
+/**************** HEADER STYLES ***************/
+
+.header-styles, footer {
+  background-color: rgb(0,123,77);
+  color: #FFFFFF;
+  padding: 1% 0;
+}
+
+#title {
+  font-family: 'Rajdhani', sans-serif;
+  font-size: 2rem;
+  color: #FFFFFF;
+}
+
+#title h1 {
+  margin: 4% 0;
+}
+
+.headline {
+  font-size: 1.25rem;
+  margin-bottom: 6%;
+}
+
+.link-styles, .footer-styles, .headline {
+  font-family: 'Roboto', sans-serif;
+}
+
+/************* NAV STYLES ********************/
+.ul-styles{
+  display: flex;
+  list-style: none;
+  justify-content: space-between;
+  margin: 3% 10%;
+  padding: 0;
+}
+
+.link-styles {
+  color: #FFFFFF;
+  text-decoration: none;
+  font-size: 1.25rem;
+}
+
+.link-styles:hover {
+  text-decoration: underline;
+}

src/components/Header.js

@@ -1,32 +1,21 @@
-import React, { useState } from 'react'
-import '../App.css'
-import { Link } from 'react-router-dom'
+import React from 'react';
+import '../App.css';
+import { Link } from 'react-router-dom';
+import './Header.css';
 
 const Header = () => {
-  const [sidebarVisible, setSidebarVisible] = useState(false)
-
   return (
-
     <header className='header-styles'>
-      <h1 id="title">Recycle NYC</h1>
-      <div
-      className={`${!sidebarVisible ? 'hamburger' : 'hideburger'}`}
-      onClick={() => setSidebarVisible(true)}
-      >
-        <div className="hamburger-slice"></div>
-        <div className="hamburger-slice"></div>
-        <div className="hamburger-slice"></div>
-      </div>
-      <ul className={`ul-styles sidebar ${sidebarVisible ? 'sidebar-active' : ''}`}>
-        <li><Link onClick={() => setSidebarVisible(false)} className='link-styles' to="/">home</Link></li>
-        {/* <li><Link onClick={() => setSidebarVisible(false)} className='link-styles' to="/about">about</Link></li> */}
-        {/* <li><Link onClick={() => setSidebarVisible(false)} className='link-styles' to="/resources">resources</Link></li> */}
-        <li><Link onClick={() => setSidebarVisible(false)} className='link-styles' to="/by-borough">by borough</Link></li>
-        <li><Link onClick={() => setSidebarVisible(false)} className='link-styles' to="/near-you">near you</Link></li>
-      </ul>
+      <Link to="/" id="title"><h1>Recycle NYC</h1></Link>
+
       <h3 className='headline'>Waste not, want not: find a public recycling bin near you!</h3>
+
+      <ul className="ul-styles">
+        <li><Link className='link-styles' to="/by-borough">by borough</Link></li>
+        <li><Link className='link-styles' to="/near-you">near you</Link></li>
+      </ul>
     </header>
   )
 }
 
-export default Header
+export default Header;

src/components/Home.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Reduce from './Reduce';
+import Reuse from './Reuse';
+import Recycle from './Recycle';
+import './Home.css';
+
+export default function Home() {
+  return (
+    <div className="home-container">
+      <Reduce />
+      <Reuse />
+      <Recycle />
+    </div>
+  )
+}

src/components/Main.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import '../App.css';
 import axios from 'axios';
-import About from './About';
 import ByBorough from './ByBorough';
 import NearYou from './NearYou';
-import Resources from './Resources';
-import Reduce from './Reduce';
-import Reuse from './Reuse';
-import Recycle from './Recycle';
+import Home from './Home';
+
 import { Route, Switch } from 'react-router-dom';
 
 class Main extends React.Component {
@@ -30,17 +27,11 @@ class Main extends React.Component {
   render() {
     return (
       <div className="main-div-styles">
-        <Reduce />
-        <Reuse />
-        <Recycle />
-
         <Switch>
-          {/* <Route path="/about" render={() => <About />}></Route> */}
-          <Route path="/resources" render={() => <Resources />}></Route>
           <Route path="/by-borough" render={() => <ByBorough apiData={this.state.data}
           borough={'Staten Island'} />}></Route>
           <Route path="/near-you" render={() => <NearYou apiData={this.state.data} />}></Route>
-          <Route exact path="/"></Route>
+          <Route exact path="/" render={() => <Home />}></Route>
         </Switch>
       </div>
     )

src/components/Recycle.css

@@ -9,6 +9,6 @@
   height: 300px;
 }
 
-.recycle-content {
-  text-align: left;
+.recycle-img, .recycle-content {
+  width: 50%;
 }

src/components/Recycle.js

@@ -8,7 +8,7 @@ export default function Recycle() {
 
       </div>
 
-      <div>
+      <div className="recycle-content">
         <h2>Recycle</h2>
         <li className="resurces-list-item"><a href="https://www.terracycle.com/en-US" target="_blank" rel="noopener noreferrer" alt="Terracycle">Terracycle</a> - Learn how to recycle hard-to-recycle items + larger-scale recycling.</li>
       </div>

src/components/Reduce.css

@@ -9,6 +9,6 @@
   height: 250px;
 }
 
-.reduce-content {
-  text-align: left;
-}
+.reduce-img, .reduce-content {
+  width: 50%;
+}

src/components/Reuse.css

@@ -10,6 +10,6 @@
   height: 300px;
 }
 
-.reuse-content {
-  text-align: left;
+.reuse-img, .reuse-content {
+  width: 50%;
 }

src/components/Reuse.js

@@ -8,7 +8,7 @@ export default function Reuse() {
 
       </div>
 
-      <div>
+      <div className="reuse-content">
         <h2>Reuse</h2>
         <li className="resurces-list-item"><a href="https://lifewithoutplastic.com/store/eating/bentos-and-boxes.html?p=2" target="_blank" rel="noopener noreferrer" alt="Life Without Plastic">Life Without Plastic</a> - Tools to practice reusing.</li>
       </div>