mirror of
https://github.com/PotentiaRobotics/website.git
synced 2025-04-16 02:10:18 -04:00
Make icons look better
This commit is contained in:
Ram Reddy
parent
4ae8b6a58d
commit
c4307d2ceb
10
package-lock.json
generated
10
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -46,5 +46,8 @@
|
|||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-spring": "^8.0.27"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<body>
|
||||
<GlobalStyle />
|
||||
<StyledFormWrapper id="backUp">
|
||||
<StyledForm onSubmit={this.handleSubmit}>
|
||||
|
|
@ -136,21 +137,24 @@ class ContactForm extends Component {
|
|||
<StyledButton type="submit">Send Message</StyledButton>
|
||||
</StyledForm>
|
||||
</StyledFormWrapper>
|
||||
<button2 onClick={() => this.scrollDown("goHere")}>⤋ Or Find Us At ⤋</button2>
|
||||
<ButtonSet id="goHere">
|
||||
<a href="https://www.linkedin.com/in/potentia-robotics-790582204/" target="_blank" className="fa fa-linkedin"></a>
|
||||
<span><br></br></span>
|
||||
<a href="https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q" target="_blank" className="fa fa-youtube"></a>
|
||||
<span><br></br></span>
|
||||
<a href="https://github.com/tjhrc" target="_blank" className="fa fa-github"></a>
|
||||
<span><br></br></span>
|
||||
<a href="#" target="_blank" className="fa fa-instagram"></a>
|
||||
<span><br></br></span>
|
||||
<a href="https://www.facebook.com/potentiarobotics/" target="_blank" className="fa fa-facebook"></a>
|
||||
<span><br></br></span>
|
||||
<button onClick={() => this.scrollDown("backUp")} className="fa fa-envelope"></button>
|
||||
<Spring
|
||||
from= {{ opacity: 0 }}
|
||||
to={{opacity: 1}}
|
||||
config = {{delay: 1000}}
|
||||
>
|
||||
{ props=> (
|
||||
<div style={props}>
|
||||
<a href="https://www.linkedin.com/in/potentia-robotics-790582204/" target="_blank" className="fa fa-linkedin"></a>
|
||||
<a href="https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q" target="_blank" className="fa fa-youtube"></a>
|
||||
<a href="https://github.com/tjhrc" target="_blank" className="fa fa-github"></a>
|
||||
<a href="#" target="_blank" className="fa fa-instagram"></a>
|
||||
<a href="https://www.facebook.com/potentiarobotics/" target="_blank" className="fa fa-facebook"></a>
|
||||
</div>
|
||||
)}
|
||||
</Spring>
|
||||
</ButtonSet>
|
||||
</>
|
||||
</body>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user