diff --git a/src/components/Contact.js b/src/components/Contact.js
index 6fb1e9c..e45b950 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, ButtonSet} from "./assets/StyledContactForm.js";
-import './assets/contact.css'
+import {createGlobalStyle} from 'styled-components';
+import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet} from "./assets/StyledContactForm.js";
+import './assets/contact.scss'
const GlobalStyle = createGlobalStyle`
html {
@@ -104,7 +104,7 @@ class ContactForm extends Component {
return (
<>
-
+
Contact Form
@@ -136,11 +136,14 @@ class ContactForm extends Component {
Send Message
- this.scrollDown("goHere")}>⤋ Or Find Us At ⤋
⤋
+ this.scrollDown("goHere")}>⤋ Or Find Us At ⤋
-
-
-
+
+
+
+
+
+
>
);
diff --git a/src/components/assets/StyledContactForm.js b/src/components/assets/StyledContactForm.js
index d4cb059..ca4862c 100644
--- a/src/components/assets/StyledContactForm.js
+++ b/src/components/assets/StyledContactForm.js
@@ -1,4 +1,4 @@
-import styled, { createGlobalStyle, css } from 'styled-components';
+import styled, { css } from 'styled-components';
const sharedStyles = css`
background-color: #ccc;
diff --git a/src/components/assets/contact.css b/src/components/assets/contact.css
deleted file mode 100644
index 0aca7bd..0000000
--- a/src/components/assets/contact.css
+++ /dev/null
@@ -1,46 +0,0 @@
-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
diff --git a/src/components/assets/contact.scss b/src/components/assets/contact.scss
new file mode 100644
index 0000000..3d44db7
--- /dev/null
+++ b/src/components/assets/contact.scss
@@ -0,0 +1,69 @@
+button {
+ cursor:pointer;
+}
+
+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:10px;
+ background-color:#ee6c4d;
+ border-bottom:1px solid #7b8b2f;
+ }
+ .fa {
+ padding: 20px;
+ font-size: 75px;
+ width: 10%;
+ 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;
+ }
+
+ .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;
+ }
+
+ .fa-facebook {
+ background: #43609C;
+ color: white;
+ }
+
+ .fa-envelope {
+ background: #da3939;
+ color: white;
+ }
\ No newline at end of file