diff --git a/public/index.html b/public/index.html
index 091ff88..421fb63 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="The TJHSST Humanoid Robot Project" />
diff --git a/src/components/Contact.js b/src/components/Contact.js
index d72f134..6fb1e9c 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -1,8 +1,8 @@
import React, {Component} from "react";
import emailjs from "emailjs-com";
import styled, {createGlobalStyle} from 'styled-components';
-import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, sharedStyles, StyledTextAreaSubject} from "./assets/StyledContactForm.js";
-
+import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, sharedStyles, StyledTextAreaSubject, ButtonSet} from "./assets/StyledContactForm.js";
+import './assets/contact.css'
const GlobalStyle = createGlobalStyle`
html {
@@ -34,6 +34,7 @@ class ContactForm extends Component {
this.handleSubjectChange = this.handleSubjectChange.bind(this);
this.handleMessageChange = this.handleMessageChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
+ this.scrollDown = this.scrollDown.bind(this);
}
handleNameChange(event) {
@@ -88,6 +89,16 @@ class ContactForm extends Component {
event.target.reset();
}
+ scrollDown(id) {
+ const element = document.getElementById(id);
+ element.scrollIntoView({
+ behavior: "smooth",
+ block: "end",
+ inline: "nearest"
+ });
+
+ }
+
render() {
return (
@@ -125,9 +136,16 @@ class ContactForm extends Component {
<StyledButton type="submit">Send Message</StyledButton>
</StyledForm>
</StyledFormWrapper>
+ <button2 onClick={() => this.scrollDown("goHere")}>⤋ Or Find Us At ⤋ <span><br></br></span>⤋</button2>
+ <ButtonSet id="goHere">
+ <a href="#" class="fa fa-linkedin"></a>
+ <a href="#" class="fa fa-youtube"></a>
+ <a href="#" class="fa fa-github"></a>
+ </ButtonSet>
</>
);
}
}
+
export default ContactForm;
\ No newline at end of file
diff --git a/src/components/assets/StyledContactForm.js b/src/components/assets/StyledContactForm.js
index 4d70488..d4cb059 100644
--- a/src/components/assets/StyledContactForm.js
+++ b/src/components/assets/StyledContactForm.js
@@ -15,6 +15,7 @@ const StyledFormWrapper = styled.div`
justify-content: center;
align-items: center;
height: 100vh;
+ margin-top: -125px;
padding: 0 20px;
`;
@@ -69,6 +70,15 @@ const StyledError = styled.div`
font-weight: 800;
margin: 0 0 40px 0;
`;
+
+const ButtonSet = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin-top: -125px;
+ padding: 0 20px;
+`;
export default StyledFormWrapper;
export {
@@ -79,5 +89,6 @@ export {
StyledTextArea,
StyledButton,
StyledError,
- StyledTextAreaSubject
+ StyledTextAreaSubject,
+ ButtonSet
};
\ No newline at end of file
diff --git a/src/components/assets/contact.css b/src/components/assets/contact.css
new file mode 100644
index 0000000..0aca7bd
--- /dev/null
+++ b/src/components/assets/contact.css
@@ -0,0 +1,46 @@
+button2 {
+ display:block;
+ width:18%;
+ margin:0 auto;
+ position:relative;
+ font-size:40px;
+ margin-top: -125px;
+ outline:none;
+ color:#fff;
+ border:none;
+ text-decoration:none;
+ text-align:center;
+ cursor:pointer;
+ -webkit-border-radius:10px;
+ -moz-border-radius:2px;
+ border-radius:1px;
+ background-color:#ee6c4d;
+ border-bottom:1px solid #7b8b2f;
+ }
+ .fa {
+ padding: 20px;
+ font-size: 30px;
+ width: 100px;
+ text-align: center;
+ text-decoration: none;
+ margin: 5px 2px;
+ }
+
+ .fa:hover {
+ opacity: 0.7;
+ }
+
+ .fa-linkedin {
+ background: #0077b5;
+ color: white;
+ }
+
+ .fa-youtube {
+ background: #FF0000;
+ color: white;
+ }
+
+ .fa-github {
+ background: #000000;
+ color: white;
+ }
\ No newline at end of file