Merge pull request reactathon-orangebox#19 from Derrick83/master

jkajk;asdf
stphnchoe · Mar 25, 2018 · 13c5eb2 · 13c5eb2
2 parents 34995e4 + c1b7360
commit 13c5eb2
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 14 deletions.
diff --git a/public/stylesheet.css b/public/stylesheet.css
@@ -44,7 +44,7 @@
 .shadow-border {
 	z-index: 9;
 	background-color: #fff;
-	position: fixed;
+	/*position: fixed;*/
 	width: 100%;
   border-color: #D3D3D3;
 	border-style: solid;
@@ -238,6 +238,22 @@ h1.title {
   color: #fff;
 }
 
+h1.title {
+	font-family:"Great Vibes";
+	text-shadow: -2px 0 #000, 0 2px 	#000, 2px 0 	#000, 0 -2px 	#000;
+	font-size: 7em;
+	text-align: center;
+	color: orange;
+	z-index: 999;
+	vertical-align: middle;
+	padding-top: 1.5em;
+	-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
+    -moz-animation: fadein 5s; /* Firefox < 16 */
+    -ms-animation: fadein 5s; /* Internet Explorer */
+     -o-animation: fadein 5s; /* Opera < 12.1 */
+        animation: fadein 5s;
+}
+
 @keyframes fadein {
     from { opacity: 0; }
     to   { opacity: .9; }

diff --git a/src/App.js b/src/App.js
@@ -9,7 +9,7 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentView: 'profile',
+      currentView: 'subjects',
       currentUser: 'larrychangg',
     }
     this.onTeacherClick = this.onTeacherClick.bind(this);

diff --git a/src/components/home/Design.js b/src/components/home/Design.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import { Icon } from 'semantic-ui-react'; 
+
+export default class Designs extends Component {
+	render() {
+		return (
+		<div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+						<img src="https://microlancer.lancerassets.com/v2/services/35/645a40996311e68debe37d11b16062/large_Stationery.jpg"/>
+						<a href="#" className="btn btn-warning btn-lg btn-block">LIVE&nbsp;&nbsp;<Icon name='check circle outline'/></a>
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+						<img src="https://microlancer.lancerassets.com/v2/services/09/3c1da0f54611e7ace8af3cb4b366b6/large_brandbusters-custom-logo-design.jpg"/>
+						<a href="#" className="btn btn-default btn-lg btn-block">8:15 PM PST &nbsp;&nbsp;<Icon name='clock outline'/></a>
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+						<img src="https://microlancer.lancerassets.com/v2/services/33/b507a0f54511e7afda372793a91044/large_icon-set-design.jpg"/>
+						<a href="#" className="btn btn-default btn-lg btn-block">9:00 PM PST &nbsp;&nbsp;<Icon name='clock outline'/></a>
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+						<img src="https://microlancer.lancerassets.com/v2/services/ca/35bc70f54411e7b90d2320165a3ed2/large_custom-poster-design.jpg"/>
+						<a href="#" className="btn btn-default btn-lg btn-block">9:15 PM PST&nbsp;&nbsp;<Icon name='clock outline'/></a>
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+						<img src="https://microlancer.lancerassets.com/v2/services/9a/d99de0434b11e6b2ae1be455cdb995/large__original_arabiclogodesign.jpg"/>
+						<a href="#" className="btn btn-default btn-lg btn-block">9:20 PM PST &nbsp;&nbsp;<Icon name='clock outline'/></a>
+				</div>
+			</div>
+
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+						<img src="https://microlancer.lancerassets.com/v2/services/86/ae37f093f311e79da547e3b0b27668/large_design-service01.jpg"/>
+						<a href="#" className="btn btn-default btn-lg btn-block">9:45 PM PST &nbsp;&nbsp;<Icon name='clock outline'/></a>
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+						<img src="http://creativetweaks.co.za/wp-content/uploads/2016/11/stationery-design-creative-tweaks.jpg"/>
+						<a href="#" className="btn btn-default btn-lg btn-block">10:15 PM PST &nbsp;&nbsp;<Icon name='clock outline'/></a>
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+						<img src="http://walldiskpaper.com/wp-content/uploads/2014/10/Design-Wallpaper-Image-Picture.jpg"/>
+						<a href="#" className="btn btn-default btn-lg btn-block">10:30 PM PST &nbsp;&nbsp;<Icon name='clock outline'/></a>
+				</div>
+			</div>
+
+
+
+		</div>
+		);
+	}
+}
+
+
diff --git a/src/components/home/Hero.js b/src/components/home/Hero.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Navbar2 from '../navbar/Navbar2.js'
-import Professional from './Professional.js';
 import ProfessionalsList from './ProfessionalsList.js';
+import SubjectsList from './SubjectsList.js';
 
 export default class Hero extends Component {
 
@@ -16,6 +16,10 @@ export default class Hero extends Component {
 
 				<ProfessionalsList />
 
+				<h1 className="page-header"> Design </h1> 
+
+				<SubjectsList />
+
 			</div>
 		);
 	}

diff --git a/src/components/home/Professional.js b/src/components/home/Professional.js
@@ -4,17 +4,116 @@ import { Icon } from 'semantic-ui-react';
 export default class Professional extends Component {
 	render() {
 		return (
+		<div>
+
+			<div>
 				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
 
-						<img src="https://images.pexels.com/photos/378148/pexels-photo-378148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
+						<img src="https://s-media-cache-ak0.pinimg.com/originals/97/ae/5c/97ae5c39e6f5d293644371ddd3f67481.jpg"/>
 
 						<div className="btn-group btn-group-justified">
 							<a href="#" className="btn btn-warning btn-lg btn-block">Larry Chang</a>
 							<a href="#" className="btn btn-default btn-lg btn-block">Soccer &nbsp;&nbsp;<Icon name='soccer'/></a>
 						</div>
 
 				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+
+						<img className="image-size" src="https://i3.ypcdn.com/blob/a6269d56dc599ddb20b430e714fa2c55b4f3c761" />
+
+						<div className="btn-group btn-group-justified">
+							<a href="#" className="btn btn-warning btn-lg btn-block">Derrick Cross</a>
+							<a href="#" className="btn btn-default btn-lg btn-block">Hacker &nbsp;&nbsp;<Icon name='cogs'/></a>
+						</div>
+
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+
+						<img className="image-size" src="http://www.kchatjjigae.com/wp-content/uploads/2016/10/%E1%84%8B%E1%85%B2%E1%84%8C%E1%85%B5%E1%84%90%E1%85%A2.jpg" />
+
+						<div className="btn-group btn-group-justified">
+							<a href="#" className="btn btn-warning btn-lg btn-block">Andrew Kang</a>
+							<a href="#" className="btn btn-default btn-lg btn-block">Film &nbsp;&nbsp;<Icon name='film'/></a>
+						</div>
+
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+
+						<img className="image-size" src="https://www.marketingtochina.com/wp-content/uploads/2015/05/Zhang-Ziyi.jpg" />
+
+						<div className="btn-group btn-group-justified">
+							<a href="#" className="btn btn-warning btn-lg btn-block">Cherry Xu</a>
+							<a href="#" className="btn btn-default btn-lg btn-block">Poker&nbsp;&nbsp;<Icon name='life ring outline'/></a>
+						</div>
+
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+
+						<img className="image-size" src="https://www.rrdonnelley.com/dsg/img/gallery1/16.jpg" />
+
+						<div className="btn-group btn-group-justified">
+							<a href="#" className="btn btn-warning btn-lg btn-block">Derrick Zhang</a>
+							<a href="#" className="btn btn-default btn-lg btn-block">Yoga &nbsp;&nbsp;<Icon name='heartbeat'/></a>
+						</div>
+
+				</div>
+			</div>
+
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+
+						<img className="image-size" src="https://www.runningoffthereeses.com/wp-content/uploads/2014/09/Daniel-Henney-2.jpg" />
+
+						<div className="btn-group btn-group-justified">
+							<a href="#" className="btn btn-warning btn-lg btn-block">Albert Wong</a>
+							<a href="#" className="btn btn-default btn-lg btn-block">Aerospace &nbsp;&nbsp;<Icon name='rocket'/></a>
+						</div>
+
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+
+						<img className="image-size" src="https://www.dramafever.com/st/news/images/69fa1a1f-4cf4-4cd5-be5e-06ce0c49d007.jpg" />
+
+						<div className="btn-group btn-group-justified">
+							<a href="#" className="btn btn-warning btn-lg btn-block">Stephen Choe</a>
+							<a href="#" className="btn btn-default btn-lg btn-block">Video Games &nbsp;&nbsp;<Icon name='game'/></a>
+						</div>
+
+				</div>
+			</div>
+
+			<div>
+				<div className= "thumbnail col-md-3 col-sm-6 col-xs-12">
+
+						<img className="image-size" src="http://mycoachabbeyg.com/wp-content/uploads/2013/09/Abbeyg2.jpg" />
 
+						<div className="btn-group btn-group-justified">
+							<a href="#" className="btn btn-warning btn-lg btn-block">Jackie Jou</a>
+							<a href="#" className="btn btn-default btn-lg btn-block">Dating Coach &nbsp;&nbsp;<Icon name='user secret'/></a>
+						</div>
+
+				</div>
+			</div>
+
+		</div>
 		);
 	}
 }
+
+
diff --git a/src/components/home/ProfessionalsList.js b/src/components/home/ProfessionalsList.js
@@ -7,13 +7,7 @@ export default class ProfessionalsList extends Component {
 			<div className="container-fluid">
 				<div className="row">
 					<Professional />
-					<Professional />
-					<Professional />
-					<Professional />
-					<Professional />
-					<Professional />
-					<Professional />
-					<Professional />
+
 				</div> 
 			</div>
 		);

diff --git a/src/components/home/SubjectsList.js b/src/components/home/SubjectsList.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import Designs from './Design.js'
+
+export default class SubjectsList extends Component {
+	render() {
+		return (
+			<div className="container-fluid">
+				<div className="row">
+					<Designs />
+				</div> 
+			</div>
+		);
+	}
+}
diff --git a/src/components/subjects/SubjectsView.jsx b/src/components/subjects/SubjectsView.jsx
@@ -2,20 +2,23 @@ import React from 'react';
 import Subject from './Subject';
 import { data } from './lib/exampleData';
 import Navbar from '../navbar/Navbar2';
+import { Icon } from 'semantic-ui-react'
 
 const SubjectsView = ({ onTeacherClick }) => (
   <div>
-    <Navbar />
     <br/>
     <br/>
     <br/>
     <br/>
     <br/>
     <div className="subject-view-header">
-      <h1 className="page-header">Courses</h1>
+      <h1 className="page-header">
+        <Icon name='book' size='large'/>
+        Courses
+      </h1>
     </div>
     {data.map(subject => <Subject topic={subject.topic} teachers={subject.teachers} onTeacherClick={onTeacherClick}/>)}
   </div>
 );
 
-export default SubjectsView;
+export default SubjectsView;