Merge pull request #24 from codefordenver/dh-general-info

Dh general info

frontend/src/App/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.scss';
 import Header from '../Header/Header.js';
+import GeneralInfo from '../GeneralInfo/GeneralInfo.js'; 
 import Main from '../Main/Main.js';
 import Footer from '../Footer/Footer.js';
 
@@ -9,6 +10,7 @@ const App = () => {
   return (
     <main className="app-wrapper">
       <Header />
+      <GeneralInfo />
       <Main />
       <Footer />
     </main>

frontend/src/GeneralInfo/GeneralInfo.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import './GeneralInfo.scss'; 
+
+const GeneralInfo = () => {
+  return (
+    <section className="general-info-container">
+      <object className="primary-logo" data="./assets/Exit_Plan-Logo.svg" alt="primary exit plan logo" height="1000" width="1000">
+      </object>
+      <div role="secondary container for general info" className="text-video-container">
+          <article className="left-container">
+          <h1>WHAT IS EXIT PLAN?</h1>
+          <p className="lead-text">
+          Coming out in a hostile environment is hard. When a member of a family comes out as LBGT or a member of a religious cult decides they want to leave, they can en up feeling like they've lost everything -- their family, their friends, their support structures, and financial support. 
+          </p>
+          <p className="secondary-text">
+          With chat articles and resources Exit Plan is here to help!
+          </p>
+        </article>
+        <article className="right-container">
+        </article>
+      </div>
+    </section>
+  ); 
+}
+
+export default GeneralInfo; 

frontend/src/GeneralInfo/GeneralInfo.scss

@@ -0,0 +1,43 @@
+@import '../index.scss';
+
+.primary-logo {
+  padding: 8px; 
+  position: relative;  
+  left: 600px; 
+}
+
+.text-video-container {
+  display: flex; 
+  justify-content: space-between; 
+  margin: 0 40px; 
+}
+
+h1 {
+  font-family: Helvetica, sans-serif; 
+  font-size: 3rem; 
+  font-weight: 600; 
+  color: $dark-blue; 
+}
+
+p {
+  font-family: Helvetica, sans-serif; 
+  font-size: 1.5rem;
+  font-weight: 400;  
+  line-height: 1.5; 
+  color: $dark-blue; 
+}
+
+.lead-text {
+  margin-bottom: 20px; 
+}
+
+.left-container {
+  height: 300px; 
+  width: 500px; 
+}
+.right-container {
+  height: 350px; 
+  width: 600px; 
+  border: 3px solid $dark-blue; 
+}
+

frontend/src/Header/Header.js

@@ -5,9 +5,9 @@ import './Header.scss';
 const Header = () => {
   return (
     <header>
-      <div role="logo-container" className="header-logo-container">
+      <article className="header-logo-container">
         <img className="header-logo" src="./assets/Exit_Plan-SecondaryLogo.svg" alt="exit plan logo"/>
-      </div>
+      </article>
       <Nav/>
     </header>
   )