Feature/outreach section

package.json

@@ -39,6 +39,7 @@
     "express": "4.15.4",
     "fastly": "2.2.0",
     "file-loader": "1.0.0",
+    "html-loader": "0.5.1",
     "html-webpack-plugin": "2.30.1",
     "json-loader": "0.5.7",
     "lodash.defaults": "4.2.0",

src/components/navbar/navbar.jsx

@@ -48,6 +48,13 @@ export default class NavBar extends React.Component {
                             </div>
                         </a>
                     </div>
+                    <div className="header-nav-item-wrapper">
+                        <a href="/outreach">
+                            <div className={this.generateHeaderClasses('outreach')}>
+                                Outreach
+                            </div>
+                        </a>
+                    </div>
                     <div className="header-nav-item-wrapper">
                         <a href="/donate">
                             <div className={this.generateHeaderClasses('donate')}>

src/routes.json

@@ -33,6 +33,16 @@
 		"pattern": "^/teach(/.+)*/?",
 		"name": "teach",
 		"title": "Teach"
+	},	
+	{
+		"pattern": "^/outreach\\.html",
+		"name": "outreach-redirect",
+		"redirect": "/outreach"
+	},
+	{
+		"pattern": "^/outreach(/.+)*/?",
+		"name": "outreach",
+		"title": "Outreach"
 	},
 	{
 		"pattern": "^/donate\\.html",

src/views/outreach/about.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const AboutSection = () => (
+    <div
+        className="content-section"
+        id="about-fd-section"
+    >
+        <div className="content-section-title">
+            About ScratchJr Family Days
+        </div>
+        <div id="content-description">
+            <div className="content-description-section">
+                <div className="content-description-answer">
+                    ScratchJr Family Day is a community event where parents, grandparents, siblings,
+                    extended family members, and children can work together to create projects
+                    in ScratchJr!
+                    The goal of Family Day is not only to help adults and children feel more
+                    comfortable using ScratchJr, but also to encourage collaboration between
+                    adults and children while
+                    creating ScratchJr projects.
+                </div>
+                <div className="content-description-question">Who are Family Days intended for?</div>
+                <div className="content-description-answer">
+                    This event is for anyone who wants to create a ScratchJr community!
+                    It can be done through schools, museum, after-school programs,
+                    community centers, or anywhere else where
+                    families can come together. Children between the ages of 5-7 as well
+                    as their family members (including siblings or family members who
+                    are older or younger) are encouraged to participate!
+                </div>
+            </div>
+        </div>
+    </div>
+);
+export default AboutSection;

src/views/outreach/host.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {Route, Switch} from 'react-router-dom';
+import ReactRouterPropTypes from 'react-router-prop-types';
+
+import FamilyDays from './host/familydays.jsx';
+import HostHome from './host/home.jsx';
+
+const HostSection = ({match}) => (
+    <div>
+        <Switch>
+            <Route
+                path={`${match.url}/family-days`}
+                component={FamilyDays}
+            />
+            <Route component={HostHome} />
+        </Switch>
+    </div>
+);
+HostSection.propTypes = {
+    match: ReactRouterPropTypes.match.isRequired
+};
+
+export default HostSection;

src/views/outreach/host/family-days.css

@@ -0,0 +1,145 @@
+/* CSS Document */
+
+h2{
+	/* bold, underline, font-size a little bit bigger*/
+	font-weight: bold;
+	font-size: 200%;
+	text-align: left;
+}
+
+h3{
+	/* bold, underline, font-size a little bit bigger*/
+	font-weight: bold;
+	font-size: 110%;
+}
+
+h3.tip-sheet-title{
+	font-weight: bold;
+	margin:0;
+	padding:0;
+	text-align: left;
+}
+
+div.family-coding-activity-prompts-content{
+	font-size: 130%;
+
+}
+
+div.suggested-questions-content{
+	font-size: 130%;
+
+}
+
+.inline{
+	display:inline;
+}
+
+.inline-block{
+	display:inline-block;
+}
+
+.center{
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.left-align{
+	text-align:left;
+}
+
+html div.full-extend{
+	width:100%;
+}
+
+ul.bullet-list {
+	list-style-type: disc;
+
+}
+
+html img.description-img{
+	width: 60%;
+	margin-left:auto;
+	margin-right:auto;
+}
+
+div.print-br{
+	display: none;
+}
+
+/*Footer*/
+footer#footer-print{
+	display: none;
+	flex-direction: row;
+	flex-basis: auto;
+  	align-items: center;
+	justify-content: center;
+	height: 4%;
+  	width: 100%;
+}
+
+div.footer-text-print{
+	margin-left: 1%;
+	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
+	font-size: 10pt;
+	color: #333333;
+}
+
+img.cc-logo{
+	height:90%;
+	width: auto;
+	object-fit: contain;
+	margin: 1%;
+}
+
+img.devtech-logo{
+	height: 90%;
+	width: auto;
+	margin: 1%;
+	object-fit: contain;
+
+}
+
+/*
+$title-color: #2898cd;
+$description-color: #808080;
+*/
+
+.fd-section-title {
+    display: inline-block;
+    padding-bottom: 10px;
+    width: 60%;
+    line-height: 18px;
+    color: #2898cd;
+    font-size: 16px;
+    font-weight: 900;
+}
+@media print{
+	div#footer, div#header, div#content-nav{
+		display: none;
+	}
+	html body div#content div.page-break{
+		page-break-after: always;
+	}
+
+	html div.print-br{
+		display: inline-block;
+	}
+
+	div.no-print{
+		display:none;
+	}
+	.print-credit {
+		display: flex;
+		position: fixed;
+		bottom: 0;
+	}
+	html footer#footer-print{
+		display:flex;
+		position: fixed;
+		bottom: 0;
+	} 
+	.txlive-langselector {
+		display:none;
+	}
+
+}