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

Final fixes and look changes for contact

Browse Source
This commit is contained in:
Ram Reddy 2021-02-05 11:55:13 -05:00
parent 292e5552aa
commit 39535929ea
4 changed files with 81 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
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, 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 (
<>
<GlobalStyle />
<StyledFormWrapper>
<StyledFormWrapper id="backUp">
<StyledForm onSubmit={this.handleSubmit}>
<h2>Contact Form</h2>
<label htmlFor="name">Name</label>
@ -136,11 +136,14 @@ 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>
<button2 onClick={() => this.scrollDown("goHere")}>⤋ Or Find Us At ⤋</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>
<a href="#" className="fa fa-linkedin"></a>
<a href="#" className="fa fa-youtube"></a>
<a href="#" className="fa fa-github"></a>
<a href="#" className="fa fa-instagram"></a>
<a href="#" className="fa fa-facebook"></a>
<button onClick={() => this.scrollDown("backUp")} className="fa fa-envelope"></button>
</ButtonSet>
</>
);

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

@ -1,4 +1,4 @@
import styled, { createGlobalStyle, css } from 'styled-components';
import styled, { css } from 'styled-components';
const sharedStyles = css`
background-color: #ccc;

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

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

69
src/components/assets/contact.scss Normal file
View File

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