From 292e5552aa96f1c713df6160bd806c2fdee1a6e3 Mon Sep 17 00:00:00 2001
From: Ram Reddy <69733662+ramnreddy15@users.noreply.github.com>
Date: Thu, 4 Feb 2021 22:42:52 -0500
Subject: [PATCH] Finished contact
---
public/index.html | 1 +
src/components/Contact.js | 22 ++++++++++-
src/components/assets/StyledContactForm.js | 13 +++++-
src/components/assets/contact.css | 46 ++++++++++++++++++++++
4 files changed, 79 insertions(+), 3 deletions(-)
create mode 100644 src/components/assets/contact.css
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 @@
+
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 {
Send Message
+ this.scrollDown("goHere")}>⤋ Or Find Us At ⤋
⤋
+
+
+
+
+
);
}
}
+
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