rushilwiz/website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/website.git synced 2025-04-20 20:30:18 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Finished contact

Browse Source
This commit is contained in:
Ram Reddy 2021-02-04 22:42:52 -05:00
parent a0d14ded1a
commit 292e5552aa
4 changed files with 79 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -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" />

22
src/components/Contact.js
View File

@ -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;

13
src/components/assets/StyledContactForm.js
View File

@ -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
};

46
src/components/assets/contact.css Normal file
View File

@ -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;
}