diff --git a/package-lock.json b/package-lock.json
index 387fd85..fa0f87e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12999,6 +12999,16 @@
}
}
},
+ "react-spring": {
+ "version": "8.0.27",
+ "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
+ "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
+ "dev": true,
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "prop-types": "^15.5.8"
+ }
+ },
"read-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
diff --git a/package.json b/package.json
index bf44699..d8abe7d 100644
--- a/package.json
+++ b/package.json
@@ -46,5 +46,8 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "react-spring": "^8.0.27"
}
}
diff --git a/src/components/Contact.js b/src/components/Contact.js
index fdb0b35..cdf1fe3 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -1,6 +1,7 @@
import React, {Component} from "react";
import emailjs from "emailjs-com";
import {createGlobalStyle} from 'styled-components';
+import {Spring} from 'react-spring/renderprops'
import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet} from "./assets/StyledContactForm.js";
import './assets/contact.scss'
@@ -102,7 +103,7 @@ class ContactForm extends Component {
render() {
return (
- <>
+
@@ -136,21 +137,24 @@ class ContactForm extends Component {
Send Message
- this.scrollDown("goHere")}>⤋ Or Find Us At ⤋
-
-
-
-
-
-
-
-
-
-
-
+
+ { props=> (
+
+ )}
+
-
+
);
}
}
diff --git a/src/components/assets/StyledContactForm.js b/src/components/assets/StyledContactForm.js
index 0fbdaba..05b4fdf 100644
--- a/src/components/assets/StyledContactForm.js
+++ b/src/components/assets/StyledContactForm.js
@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
const sharedStyles = css`
background-color: #ccc;
- height: 40px;
+ height: .5vw;
border-radius: 5px;
border: 1px solid #ddd;
margin: 10px 0 20px 0;
@@ -14,14 +14,14 @@ const StyledFormWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
- height: 100vh;
- margin-top: -3.7vw;
+ height: 150%;
+ margin-top: 4vw;
padding: 0 20px;
`;
const StyledForm = styled.form`
- width: 100%;
- max-width: 700px;
+ width: 50%;
+ height:130%;
padding: 40px;
background-color: #eee;
color: #3d5a80;
@@ -40,7 +40,7 @@ const StyledInput = styled.input`
const StyledTextAreaSubject = styled.textarea`
background-color: #98c1d9;
width: 100%;
- min-height: 60px;
+ min-height: 5%;
resize: none;
${sharedStyles}
`;
@@ -48,7 +48,7 @@ const StyledTextAreaSubject = styled.textarea`
const StyledTextArea = styled.textarea`
background-color: #98c1d9;
width: 100%;
- min-height: 100px;
+ min-height: 20%;
resize: none;
${sharedStyles}
`;
@@ -59,7 +59,7 @@ const StyledButton = styled.button`
font-size: 0.9rem;
border: 0;
border-radius: 5px;
- height: 40px;
+ height: 40%;
padding: 0 20px;
cursor: pointer;
box-sizing: border-box;
@@ -78,8 +78,14 @@ const StyledError = styled.div`
`;
const ButtonSet = styled.div`
- margin-top: 2vw;
- vertical-align: middle;
+ background-color: #3d5a80;
+ color: white;
+ font-size:1.7em;
+ position: absolute;
+ border-radius:10px;
+ bottom: 5%;
+ width: 20%;
+ left: 40%;
text-align: center;
padding: 0 20px;
`;
diff --git a/src/components/assets/contact.scss b/src/components/assets/contact.scss
index ae9dcdb..c152ea3 100644
--- a/src/components/assets/contact.scss
+++ b/src/components/assets/contact.scss
@@ -2,37 +2,16 @@ button {
cursor:pointer;
}
-button2 {
- display:block;
- width:40%;
- margin:0 auto;
- position:relative;
- font-size:2vw;
- margin-top: -6vw;
- outline:none;
- color:#fff;
- border:none;
- text-decoration:none;
- text-align:center;
- cursor:pointer;
- -webkit-border-radius:10px;
- -moz-border-radius:2px;
- border-radius:10px;
- background-color:#ee6c4d;
- border-bottom:1px solid #7b8b2f;
- }
- button2:hover {
- background-color: #3D5A80;
- cursor: pointer;
- opacity:0.7;
- }
+body {
+ padding: 0;
+ margin: 0;
+}
+
.fa {
- padding: 1vw;
- font-size: 5vw;
+ font-size: 1.5rem;
width: 10%;
- text-align: center;
text-decoration: none;
- margin: 0.2vw 0.2vw;
+ margin: -0vw 0.8vw;
}
.fa:hover {
@@ -40,35 +19,25 @@ button2 {
}
.fa-linkedin {
- background: #0077b5;
- color: white;
+ color: #e0fbfc;
}
.fa-youtube {
- background: #FF0000;
- color: white;
+ color: #e0fbfc;
}
.fa-github {
- background: #000000;
- color: white;
+ color: #e0fbfc;
}
.fa-instagram {
- background: -webkit-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -webkit-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
- background: -moz-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -moz-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
- background: -ms-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -ms-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
- background: -o-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -o-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
- background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
- color: white;
+ color: #e0fbfc;
}
.fa-facebook {
- background: #43609C;
- color: white;
+ color: #e0fbfc;
}
.fa-envelope {
- background: #da3939;
- color: white;
+ color: #e0fbfc;
}
\ No newline at end of file