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