AustinCodingAcademy · Jesse-Paulk · Oct 7, 2017 · Oct 7, 2017
diff --git a/public/Header.js b/public/Header.js
@@ -0,0 +1,9 @@
+function Header () {
+  return (
+    <div className = 'headermain'>
+      <NavBar />
+      <Logo />
+      <SearchBar />
+    </div>
+ );
+}
diff --git a/public/Left.js b/public/Left.js
@@ -0,0 +1,8 @@
+function Left () {
+  return (
+    <div className='bodydiv1'>
+      <User />
+      <Trends />
+   </div>
+ );
+}
diff --git a/public/LiveVideo.js b/public/LiveVideo.js
@@ -0,0 +1,7 @@
+function LiveVideo () {
+  return (
+    <div className = 'livevid'>
+      <div className = 'liveVidinside'>Live Video</div>
+   </div>
+ );
+}
diff --git a/public/Logo.js b/public/Logo.js
@@ -0,0 +1,6 @@
+function Logo () {
+  return (
+    <div className='header2'>
+   </div>
+ );
+}
diff --git a/public/Main.js b/public/Main.js
@@ -1,3 +1,9 @@
-function Main(){
-  return <div>Hello</div>
-}
+function Main (){
+  return (
+     <div>
+       <Header />
+       <Left /> <Middle /> <Right />
+   </div>
+
+   );
+}
diff --git a/public/Middle.js b/public/Middle.js
@@ -0,0 +1,8 @@
+function Middle () {
+  return (
+    <div className='bodydiv2'>
+      <NewTweet />
+      <Tweets />
+   </div>
+ );
+}
diff --git a/public/NavBar.js b/public/NavBar.js
@@ -0,0 +1,10 @@
+function NavBar () {
+  return (
+    <div className='header1'>
+    <button>Home</button> 
+    <button>Moments</button>
+    <button>Notifications</button>
+    <button>Messages</button>
+   </div>
+  );
+}
diff --git a/public/NewTweet.js b/public/NewTweet.js
@@ -0,0 +1,7 @@
+function NewTweet () {
+  return (
+    <div>
+      What's happening? ________________
+   </div>
+ );
+}
diff --git a/public/Right.js b/public/Right.js
@@ -0,0 +1,8 @@
+function Right () {
+  return (
+    <div className='bodydiv3'>
+      <WhoToFollow />
+      <LiveVideo />
+   </div>
+ );
+}
diff --git a/public/SearchBar.js b/public/SearchBar.js
@@ -0,0 +1,8 @@
+function SearchBar () {
+  return (
+    <div className='header3'>
+      Search
+      <input type='text' className='searcher'/>
+   </div>
+ );
+}
diff --git a/public/Trends.js b/public/Trends.js
@@ -0,0 +1,11 @@
+function Trends () {
+  return (
+    <div>
+      <h3> Trending topic 1</h3>
+      <h3> Trending topic 2</h3>
+      <h3> Trending topic 3</h3>
+      <h3> Trending topic 4</h3>
+      <h3> Trending topic 5</h3>
+   </div>
+ );
+}
diff --git a/public/Tweets.js b/public/Tweets.js
@@ -0,0 +1,19 @@
+function Tweets () {
+  var tweets = [
+    "ACA class was so awesome today.",
+    "I just checked out that new restaurant, it was okay",
+    "I just saw a movie that changed my life",
+    "shirts are 50% of at Macy's today"
+  ];
+  return (
+    <div>
+      {tweets.map((item) => {
+        return (
+          <div key={item}>
+            <h2>{item}</h2>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/public/User.js b/public/User.js
@@ -0,0 +1,9 @@
+function User () {
+  return (
+    <div>
+      <div className= 'pic'></div>
+      <h1>Jesse Paulk</h1>
+      <h2> Tweets: 1 </h2><h2> Following: 300  </h2><h2> Followers: 0 </h2>
+   </div>
+ );
+}
diff --git a/public/WhoToFollow.js b/public/WhoToFollow.js
@@ -0,0 +1,11 @@
+function WhoToFollow () {
+  return (
+    <div>
+      <h2> Follow Jim </h2>
+      <h2> Follow Jack </h2>
+      <h2> Follow Jill </h2>
+      <h2> Follow John </h2>
+
+   </div>
+ );
+}
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="style.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -20,18 +21,9 @@
   </head>
   <body>
     <div id="root"></div>
-    <script>
-      var tweets = [
-        "ACA class was so awesome today.",
-        "I just checked out that new restaurant, it was okay",
-        "I just saw a movie that changed my life",
-        "shirts are 50% of at Macy's today"
-      ];
-
-    </script>
 
     <script>
-    
+
       var h1 = document.createElement("h1");
       h1.innerHTML = tweets[0];
       document.body.appendChild(h1);
@@ -41,7 +33,7 @@
     <script type="text/jsx">
     var tweet = React.createElement("h1",null,tweets[1])
     ReactDOM.render(
-      tweet, 
+      tweet,
       document.getElementById('root')
     );
     </script>
@@ -55,6 +47,25 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
-
+   <script src="SearchBar.js" type="text/jsx"></script>
+   <script src="Logo.js" type="text/jsx"></script>
+   <script src="NavBar.js" type="text/jsx"></script>
+   <script src="Header.js" type="text/jsx"></script>
+
+   <script src="Trends.js" type="text/jsx"></script>
+   <script src="User.js" type="text/jsx"></script>
+   <script src="Left.js" type="text/jsx"></script>
+
+   <script src="NewTweet.js" type="text/jsx"></script>
+   <script src="Tweets.js" type="text/jsx"></script>
+   <script src="Middle.js" type="text/jsx"></script>
+
+   <script src="WhoToFollow.js" type="text/jsx"></script>
+   <script src="LiveVideo.js" type="text/jsx"></script>
+   <script src="Right.js" type="text/jsx"></script>
+
+   <script src="Main.js" type="text/jsx"></script>
+   <script src="App.js" type="text/jsx"></script>
+   <script src="Index.js" type="text/jsx"></script>
   </body>
 </html>
diff --git a/public/public/App.js b/public/public/App.js
@@ -0,0 +1,3 @@
+function App(){
+  return <div><Main /></div>
+}
diff --git a/public/public/Header.js b/public/public/Header.js
@@ -0,0 +1,9 @@
+function Header () {
+  return (
+    <div className = 'headermain'>
+      <NavBar />
+      <Logo />
+      <SearchBar />
+    </div>
+ );
+}
diff --git a/public/public/Left.js b/public/public/Left.js
@@ -0,0 +1,8 @@
+function Left () {
+  return (
+    <div className='bodydiv1'>
+      <User />
+      <Trends />
+   </div>
+ );
+}
diff --git a/public/public/LiveVideo.js b/public/public/LiveVideo.js
@@ -0,0 +1,7 @@
+function LiveVideo () {
+  return (
+    <div className = 'livevid'>
+      <div className = 'liveVidinside'>Live Video</div>
+   </div>
+ );
+}
diff --git a/public/public/Logo.js b/public/public/Logo.js
@@ -0,0 +1,6 @@
+function Logo () {
+  return (
+    <div className='header2'>
+   </div>
+ );
+}
diff --git a/public/public/Main.js b/public/public/Main.js
@@ -0,0 +1,9 @@
+function Main (){
+  return (
+     <div>
+       <Header />
+       <Left /> <Middle /> <Right />
+   </div>
+
+   );
+}
diff --git a/public/public/Middle.js b/public/public/Middle.js
@@ -0,0 +1,8 @@
+function Middle () {
+  return (
+    <div className='bodydiv2'>
+      <NewTweet />
+      <Tweets />
+   </div>
+ );
+}
diff --git a/public/public/NavBar.js b/public/public/NavBar.js
@@ -0,0 +1,10 @@
+function NavBar () {
+  return (
+    <div className='header1'>
+    <button>Home</button> 
+    <button>Moments</button>
+    <button>Notifications</button>
+    <button>Messages</button>
+   </div>
+  );
+}
diff --git a/public/public/NewTweet.js b/public/public/NewTweet.js
@@ -0,0 +1,7 @@
+function NewTweet () {
+  return (
+    <div>
+      What's happening? ________________
+   </div>
+ );
+}
diff --git a/public/public/Right.js b/public/public/Right.js
@@ -0,0 +1,8 @@
+function Right () {
+  return (
+    <div className='bodydiv3'>
+      <WhoToFollow />
+      <LiveVideo />
+   </div>
+ );
+}
diff --git a/public/public/SearchBar.js b/public/public/SearchBar.js
@@ -0,0 +1,8 @@
+function SearchBar () {
+  return (
+    <div className='header3'>
+      Search
+      <input type='text' className='searcher'/>
+   </div>
+ );
+}
diff --git a/public/public/Trends.js b/public/public/Trends.js
@@ -0,0 +1,11 @@
+function Trends () {
+  return (
+    <div>
+      <h3> Trending topic 1</h3>
+      <h3> Trending topic 2</h3>
+      <h3> Trending topic 3</h3>
+      <h3> Trending topic 4</h3>
+      <h3> Trending topic 5</h3>
+   </div>
+ );
+}
diff --git a/public/public/Tweets.js b/public/public/Tweets.js
@@ -0,0 +1,19 @@
+function Tweets () {
+  var tweets = [
+    "ACA class was so awesome today.",
+    "I just checked out that new restaurant, it was okay",
+    "I just saw a movie that changed my life",
+    "shirts are 50% of at Macy's today"
+  ];
+  return (
+    <div>
+      {tweets.map((item) => {
+        return (
+          <div key={item}>
+            <h2>{item}</h2>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/public/public/User.js b/public/public/User.js
@@ -0,0 +1,9 @@
+function User () {
+  return (
+    <div>
+      <div className= 'pic'></div>
+      <h1>Jesse Paulk</h1>
+      <h2> Tweets: 1 </h2><h2> Following: 300  </h2><h2> Followers: 0 </h2>
+   </div>
+ );
+}
diff --git a/public/public/WhoToFollow.js b/public/public/WhoToFollow.js
@@ -0,0 +1,11 @@
+function WhoToFollow () {
+  return (
+    <div>
+      <h2> Follow Jim </h2>
+      <h2> Follow Jack </h2>
+      <h2> Follow Jill </h2>
+      <h2> Follow John </h2>
+
+   </div>
+ );
+}
diff --git a/public/public/babel.js b/public/public/babel.js
diff --git a/public/public/favicon.ico b/public/public/favicon.ico