Add homepage skeleton

public/index.html

@@ -37,4 +37,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-</html>
+</html>

src/pages/App.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import Home from './Home';
+
+// A base file for all your pages to come together.
+
+class App extends Component {
+  render() {
+    return (
+      <Home/>
+    );
+  }
+}
+
+export default App;

src/pages/carousel.js

@@ -0,0 +1,2 @@
+import React, { Component } from 'react';
+

src/pages/home.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+
+class Home extends Component {
+
+  render() {
+    return (
+      <div>
+        <div class="cover">
+          <img src="chinatown.jpg" alt=""></img>
+        </div>
+
+        <div className="header">
+          <h1>ABOUT US</h1>
+          <div id="red-underline"></div>
+        </div>
+        <div class="about">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi cum iure temporibus magnam, fuga totam doloremque. Quam autem, culpa fugiat blanditiis eius ipsa sed, earum dolorem, minima molestias eveniet soluta.
+          </p>
+        </div>
+
+        <div class="faq">
+          <h1>FAQs</h1>
+          <div id="red-underline"></div>
+        </div>
+        <div class="faq-text">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi cum iure temporibus magnam, fuga totam doloremque. Quam autem, culpa fugiat blanditiis eius ipsa sed, earum dolorem, minima molestias eveniet soluta.
+          </p>
+        </div>
+        <div class="header">
+          <h1>CONTACT US</h1>
+          <div id="red-underline"></div>
+        </div>
+        <div class="about">
+          <p>
+            If you have any questions or inquiries about our group:
+              Email us at <a href="mailto: [email protected]" target="_blank" rel="noopener noreferrer">[email protected]</a>
+              We will reply as soon as we can. Thank you!
+          </p>
+        </div>  
+      </div>
+   );
+  }
+
+}
+
+export default Home;
+

src/styles/css/home.css

@@ -0,0 +1,51 @@
+body {
+  font-family: 'Helvetica', sans-serif;
+  background-color: #FFFFFF;
+  color: #333333;
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 5%; }
+
+h1 {
+  font-weight: lighter; }
+
+a {
+  font-weight: 500; }
+  a:link, a:visited {
+    background-image: -webkit-linear-gradient(-45deg, #444444 0%, #444444 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent; }
+
+#red-underline {
+  background-color: #db5757;
+  height: 2px;
+  justify-content: center; }
+
+.cover {
+  padding-top: 5%; }
+
+.header {
+  display: inline;
+  text-align: center;
+  justify-content: center;
+  width: 30%; }
+
+.faq {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  background-color: #e2e2e2; }
+
+.faq-text {
+  display: flex;
+  text-align: left;
+  padding-left: 20%;
+  padding-right: 20%;
+  background-color: #e2e2e2; }
+
+.about {
+  display: flex;
+  text-align: left;
+  padding-left: 20%;
+  padding-right: 20%; }

src/styles/css/index.css

@@ -47,3 +47,55 @@
 .photogrid {
   margin-left: 5%;
   padding-top: 3%; }
+
+body {
+  font-family: 'Helvetica', sans-serif;
+  background-color: #FFFFFF;
+  color: #333333;
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 5%; }
+
+h1 {
+  font-weight: lighter; }
+
+a {
+  font-weight: 500; }
+  a:link, a:visited {
+    background-image: -webkit-linear-gradient(-45deg, #444444 0%, #444444 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent; }
+
+#red-underline {
+  background-color: #db5757;
+  height: 2px;
+  justify-content: center; }
+
+.cover {
+  padding-top: 5%; }
+
+.header {
+  display: inline;
+  text-align: center;
+  justify-content: center;
+  width: 30%; }
+
+.faq {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  background-color: #e2e2e2; }
+
+.faq-text {
+  display: flex;
+  text-align: left;
+  padding-left: 20%;
+  padding-right: 20%;
+  background-color: #e2e2e2; }
+
+.about {
+  display: flex;
+  text-align: left;
+  padding-left: 20%;
+  padding-right: 20%; }

src/styles/scss/home.scss

@@ -0,0 +1,61 @@
+body {
+  font-family: 'Helvetica', sans-serif;
+  background-color: #FFFFFF;
+  color: #333333;
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 5%;
+}
+
+h1 {
+  font-weight: lighter;
+}
+
+a {
+  font-weight: 500;
+  &:link, &:visited {
+    background-image: -webkit-linear-gradient(-45deg, #444444 0%, #444444 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+#red-underline {
+  background-color: #db5757;
+  height: 2px;
+  justify-content: center;
+}
+
+.cover {
+  padding-top: 5%;
+}
+
+.header {
+  display: inline;
+  text-align: center;
+  justify-content: center;
+  width: 30%;
+}
+
+.faq {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  background-color: #e2e2e2;
+}
+
+.faq-text {
+  display: flex;
+  text-align: left;
+  padding-left: 20%;
+  padding-right: 20%;
+  background-color: #e2e2e2;
+}
+
+.about {
+  display: flex;
+  text-align: left;
+  padding-left: 20%;
+  padding-right: 20%;
+}

src/styles/scss/index.scss

@@ -2,4 +2,6 @@
 // Then import those files here. 
 // This scss file will be compiled to index.css.
 // index.css is imported in index.js and will apply styles to everything.
-@import "PhotoGrid.scss";
+@import "PhotoGrid.scss";
+
+@import "home.scss";