dustin.wells.atx.advanced2

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^3.3.7",
     "react": "^15.5.4",
     "react-dom": "^15.5.4"
   },
@@ -15,4 +16,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

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">
+    <script src="https://use.fontawesome.com/a6bc283128.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/FollowWho.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+
+function FollowWho(){
+   return (
+    <div id="followwho">
+      <div className="twitter-account">
+        <div className="twitter-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="twitter-username">
+          <p>@Bacon4Life</p>
+          <p className ="twitter-username-discription">Casual Bacon Eater</p>
+        </div>
+      </div>
+      <div className="twitter-account">
+        <div className="twitter-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="twitter-username">
+          <p>@Bacon4Life</p>
+          <p className ="twitter-username-discription">Casual Bacon Eater</p>
+        </div>
+      </div>
+      <div className="twitter-account">
+        <div className="twitter-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="twitter-username">
+          <p>@Bacon4Life</p>
+          <p className ="twitter-username-discription">Casual Bacon Eater</p>
+        </div>
+      </div>
+    </div>);
+}
+
+export default FollowWho;

src/components/Header.js

@@ -1,10 +1,15 @@
 import React from 'react';
+import HeaderIcons from './HeaderIcons.js';
+import HeaderLogo from './HeaderLogo.js';
+import HeaderSearch from './HeaderSearch.js';
 
 function Header(){
    return (
     <div id="header">
-    I am the header
+    <HeaderIcons />
+    <HeaderLogo />
+    <HeaderSearch />
   </div>);
 }
 
-export default Header;
+export default Header;

src/components/HeaderIcons.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function HeaderIcons(){
+   return (
+    <div id="headericons">
+      <a href='#'><i className="fa fa-twitter">Home</i></a>
+      <a href='#'><i className="fa fa-bolt">Moments</i></a>
+      <a href='#'><i className="fa fa-bell">Notifications</i></a>
+      <a href='#'><i className="fa fa-envelope">Messages</i></a>
+    </div>);
+}
+
+export default HeaderIcons;

src/components/HeaderLogo.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+function HeaderLogo(){
+   return (
+    <div id="headerlogo">
+      <i className="fa fa-twitter fa-lg blue-text"></i>
+    </div>);
+}
+
+export default HeaderLogo;

src/components/HeaderSearch.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function HeaderSearch(){
+   return (
+     <div id="headersearch">
+         <span className="icon"><i className="fa fa-search"></i></span>
+         <input type="search" id="searchBar" placeholder="Search" />
+       </div>);
+}
+
+export default HeaderSearch;

src/components/LeftColumn.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import UserInfo from './UserInfo.js';
+import Trends from './Trends.js';
+function LeftColumn(){
+   return (
+    <div id="leftcolumn">
+
+      <UserInfo />
+      <Trends />
+    </div>);
+}
+
+export default LeftColumn;

src/components/LiveVideo.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+
+function LiveVideo(){
+   return (
+    <div id="livevideo">
+      There is a really awesome video right here.
+    </div>);
+}
+
+export default LiveVideo;

src/components/Main.js

@@ -1,10 +1,16 @@
 import React from 'react';
+import LeftColumn from './LeftColumn.js';
+import MidColumn from './MidColumn.js';
+import RightColumn from './RightColumn.js';
 
 function Main(){
   return (
     <div id="main">
-    main
+    <LeftColumn />
+    <MidColumn />
+    <RightColumn />
+
     </div>
     );
 }
-export default Main;
+export default Main;

src/components/MidColumn.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import NewTweet from './NewTweet.js';
+import Timeline from './Timeline.js';
+function MidColumn(){
+   return (
+    <div id="midcolumn">
+      <NewTweet />
+      <Timeline />
+    </div>);
+}
+
+export default MidColumn;

src/components/NewTweet.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+function NewTweet(){
+   return (
+    <div id="newtweet">
+      <div id="newtweet-avatar">
+        <img src='https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg' className='mini-photo'></img>
+      </div>
+      <div id='newtweet-textarea'>
+        <textarea className='newtweet-textarea' placeholder="What's on your mind?"></textarea>
+      </div>
+      <div>
+        <button className='blue-text newtweet-submit'>Submit Tweet </button>
+      </div>
+    </div>);
+}
+
+export default NewTweet;

src/components/RightColumn.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import FollowWho from './FollowWho.js';
+import LiveVideo from './LiveVideo.js';
+
+function RightColumn(){
+   return (
+    <div id="rightcolumn">
+      <FollowWho />
+      <LiveVideo />
+    </div>);
+}
+
+export default RightColumn;

src/components/Timeline.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function Timeline(){
+   return (
+    <div id="timeline">
+      <div className="tweet">
+        <div className="tweet-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="tweet-content">
+          Bacon ipsum dolor amet drumstick tri-tip venison t-bone, pig pancetta tongue bacon tail jerky fatback. Frankfurter chicken sausage, landjaeger rump turducken strip steak. Beef andouille bresaola, turducken tri-tip meatball frankfurter shankle tongue ham cupim. Ham sausage beef ribs jerky pork loin pastrami. Chuck tenderloin ribeye frankfurter prosciutto pancetta.
+        </div>
+      </div>
+      <div className="tweet">
+        <div className="tweet-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="tweet-content">
+          Shoulder ribeye chuck rump shank. Frankfurter t-bone turkey, sausage brisket tri-tip hamburger boudin biltong. T-bone beef ham venison alcatra rump. Bresaola tenderloin chicken andouille shankle porchetta tri-tip short loin ground round cupim venison shoulder t-bone boudin. Alcatra salami t-bone pig, biltong pork loin spare ribs corned beef venison tenderloin shoulder. Frankfurter pancetta shankle drumstick.
+        </div>
+      </div>
+      <div className="tweet">
+        <div className="tweet-avatar">
+          <img className="mini-photo" src="https://assemblive.com/assets/home_logo_avatar-32c73656536a26f3d0cb07a3a91ba524.png"></img>
+        </div>
+        <div className="tweet-content">
+          Kevin kielbasa pork belly, shankle bresaola hamburger turkey tongue short loin sirloin sausage prosciutto. Fatback pancetta turducken prosciutto beef ribs turkey flank, ham bresaola ball tip landjaeger picanha spare ribs drumstick short loin. Picanha rump boudin shank, shankle pork bacon pork loin fatback alcatra tongue cupim salami.
+        </div>
+      </div>
+    </div>);
+}
+
+export default Timeline;

src/components/Trends.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function Trends(){
+   return (
+    <div id="trends">
+      <div className = "trends-header">
+        <h3> Trends </h3>
+      </div>
+      <div className = "trends">
+        <h3 className='blue-text'>#Bucks</h3>
+        <p className = 'trends-tweets'> 3620 Tweets </p>
+      </div>
+      <div className = "trends">
+        <h3 className='blue-text'>#UFC</h3>
+        <p className = 'trends-tweets'> 1320 Tweets </p>
+      </div>
+      <div className = "trends">
+        <h3 className='blue-text'>Berkely</h3>
+        <p className = 'trends-tweets'>Sounds like Broccoli </p>
+      </div>
+      <div className = "trends">
+        <h3 className='blue-text'>Paul George</h3>
+        <p className = 'trends-tweets'>48.7 k Tweets</p>
+      </div>
+      <div className = "trends">
+        <h3 className='blue-text'>#ACA</h3>
+        <p className = 'trends-tweets'>Coding is Awesome!</p>
+      </div>
+
+    </div>);
+}
+
+export default Trends;

src/components/UserInfo.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+
+function UserInfo(){
+   return (
+    <div id="userinfo">
+      <div id="userinfo-user">
+        <div id="photo">
+          <img src='https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg' id='user-photo'></img>
+
+        </div>
+        <div id="username">
+          <p> <strong>John Doe</strong> </p>
+          <p> @JDoe50 </p>
+        </div>
+    </div>
+
+      <div id="tweetinfo">
+          <div className = "tweetinfo">
+            <h3> Tweets </h3>
+            <p className = "blue-text"> 128</p>
+          </div>
+          <div className = "tweetinfo">
+            <h3> Following </h3>
+            <p className = "blue-text"> 193</p>
+          </div>
+          <div className = "tweetinfo">
+            <h3> Followers </h3>
+            <p className = "blue-text"> 26</p>
+          </div>
+      </div>
+
+      <div id="gain-text">
+        <h1> Gain more followers! </h1>
+        <p> Promote your account and discovered by more people on twitter! </p>
+        <a href='#'>Preview it first below</a>
+      </div>
+    </div>);
+}
+
+export default UserInfo;