diff --git a/frontend/public/assets/Exit_Plan-Logo.svg b/frontend/public/assets/Exit_Plan-Logo.svg index e7a7c39..884b2e4 100644 --- a/frontend/public/assets/Exit_Plan-Logo.svg +++ b/frontend/public/assets/Exit_Plan-Logo.svg @@ -11,7 +11,7 @@ ]> diff --git a/frontend/src/App/App.js b/frontend/src/App/App.js index aeb31d0..5cc69d5 100644 --- a/frontend/src/App/App.js +++ b/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 (
+
diff --git a/frontend/src/GeneralInfo/GeneralInfo.js b/frontend/src/GeneralInfo/GeneralInfo.js new file mode 100644 index 0000000..fc64d4e --- /dev/null +++ b/frontend/src/GeneralInfo/GeneralInfo.js @@ -0,0 +1,26 @@ +import React from 'react'; +import './GeneralInfo.scss'; + +const GeneralInfo = () => { + return ( +
+ + +
+
+

WHAT IS EXIT PLAN?

+

+ 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. +

+

+ With chat articles and resources Exit Plan is here to help! +

+
+
+
+
+ + ); +} + +export default GeneralInfo; \ No newline at end of file diff --git a/frontend/src/GeneralInfo/GeneralInfo.scss b/frontend/src/GeneralInfo/GeneralInfo.scss new file mode 100644 index 0000000..a08a82a --- /dev/null +++ b/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; +} + diff --git a/frontend/src/Header/Header.js b/frontend/src/Header/Header.js index 3afc4bc..8cadc72 100644 --- a/frontend/src/Header/Header.js +++ b/frontend/src/Header/Header.js @@ -5,9 +5,9 @@ import './Header.scss'; const Header = () => { return (
-
+
exit plan logo -
+
)