3 files changed, 80 insertions, 0 deletions
diff --git a/src/components/home/ContactSection.js b/src/components/home/ContactSection.js
new file mode 100644
index 00000000..8e6aed1a
--- /dev/null
+++ b/src/components/home/ContactSection.js
@@ -0,0 +1,33 @@
+import React from "react";
+import ContentSection from "./ContentSection";
+import "./ContentSection.css";
+
+const ContactSection = () => (
+    <ContentSection name="contact">
+        <h1>Contact</h1>
+        <div className="row">
+            <img src="img/tudelfticon.png" className="col-lg-2 col-md-2 col-sm-3 col-xs-6
+                    col-lg-offset-4 col-md-offset-4 col-sm-offset-3 col-xs-offset-3 tudelft-icon" alt="TU Delft Logo"/>
+            <div className="col-lg-4 col-md-5 col-sm-6 col-xs-10
+                col-lg-offset-0 col-md-offset-0 col-sm-offset-0 col-xs-offset-1 text-left">
+                <div className="row vcenter">
+                    <img src="img/email-icon.png" className="col-lg-2 col-md-2 col-sm-2 col-xs-2" alt="Email Icon"/>
+                    <div className="info-points col-lg-10 col-md-10 col-sm-10 col-xs-10">
+                        <a href="mailto:opendc@atlarge-research.com">opendc@atlarge-research.com</a>
+                    </div>
+                </div>
+                <div className="row vcenter">
+                    <img src="img/github-icon.png" className="col-lg-2 col-md-2 col-sm-2 col-xs-2" alt="Github Icon"/>
+                    <div className="info-points col-lg-10 col-md-10 col-sm-10 col-xs-10">
+                        <a href="https://github.com/atlarge-research/opendc">atlarge-research/opendc</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className="atlarge-footer row">
+            A project by the <a href="http://atlarge-research.com"><strong>@Large Research Group</strong></a>.
+        </div>
+    </ContentSection>
+);
+
+export default ContactSection;
diff --git a/src/components/home/ContentSection.js b/src/components/home/ContentSection.js
new file mode 100644
index 00000000..126c5e4b
--- /dev/null
+++ b/src/components/home/ContentSection.js
@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+import "./ContentSection.css";
+
+const ContentSection = ({name, children}) => (
+    <div id={name} className={classNames(name + "-section", "content-section")}>
+        <div className="container">
+            <div className="row">
+                {children}
+            </div>
+        </div>
+    </div>
+);
+
+ContentSection.propTypes = {
+    name: PropTypes.string.isRequired,
+};
+
+export default ContentSection;
diff --git a/src/components/home/ContentSection.sass b/src/components/home/ContentSection.sass
new file mode 100644
index 00000000..c84f26db
--- /dev/null
+++ b/src/components/home/ContentSection.sass
@@ -0,0 +1,27 @@
+@import ../../style-globals/_variables.sass
+
+.content-section
+  padding-top: 50px
+  padding-bottom: 150px
+  text-align: center
+
+@media screen and (min-width: $screen-sm) and (max-width: $screen-md)
+  .content-section h1
+    font-size: 2em
+    margin-bottom: 40px
+
+  .content-section h3
+    font-size: 1.5em
+
+@media screen and (min-width: $screen-md) and (max-width: $screen-lg)
+  .content-section h1
+    font-size: 3em
+    margin-bottom: 40px
+
+  .content-section h3
+    font-size: 1.8em
+
+@media screen and (min-width: $screen-lg)
+  .content-section h1
+    font-size: 3em
+    margin-bottom: 40px