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

Updated CSS

Browse Source
This commit is contained in:
Ram Reddy 2021-02-17 15:28:48 -08:00
parent c4307d2ceb
commit d420f5f6b6
No known key found for this signature in database
GPG Key ID: 2CD6B38BE14BDE53
3 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Contact.js
View File

@ -103,6 +103,7 @@ class ContactForm extends Component {
render() { render() {
return ( return (
<>
<body> <body>
<GlobalStyle /> <GlobalStyle />
<StyledFormWrapper id="backUp"> <StyledFormWrapper id="backUp">
@ -137,7 +138,9 @@ class ContactForm extends Component {
<StyledButton type="submit">Send Message</StyledButton> <StyledButton type="submit">Send Message</StyledButton>
</StyledForm> </StyledForm>
</StyledFormWrapper> </StyledFormWrapper>
<ButtonSet id="goHere">
</body>
<div className="buttonSet" id="goHere">
<Spring <Spring
from= {{ opacity: 0 }} from= {{ opacity: 0 }}
to={{opacity: 1}} to={{opacity: 1}}
@ -147,14 +150,14 @@ class ContactForm extends Component {
<div style={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.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://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="https://github.com/PotentiaRobotics" target="_blank" className="fa fa-github"></a>
<a href="#" target="_blank" className="fa fa-instagram"></a> <a href="#" target="_blank" className="fa fa-instagram"></a>
<a href="https://www.facebook.com/potentiarobotics/" target="_blank" className="fa fa-facebook"></a> <a href="https://www.facebook.com/potentiarobotics/" target="_blank" className="fa fa-facebook"></a>
</div> </div>
)} )}
</Spring> </Spring>
</ButtonSet> </div>
</body> </>
); );
} }
} }

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

@ -2,11 +2,9 @@ import styled, { css } from 'styled-components';
const sharedStyles = css` const sharedStyles = css`
background-color: #ccc; background-color: #ccc;
height: .5vw;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ddd; border: 1px solid #ddd;
margin: 10px 0 20px 0; margin: 10px 0 20px 0;
padding: 20px;
box-sizing: border-box; box-sizing: border-box;
`; `;
@ -14,53 +12,62 @@ const StyledFormWrapper = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 150%; position:relative;
margin-top: 4vw; margin-top: 5vw;
padding: 0 20px; padding: 0 2%;
`; `;
const StyledForm = styled.form` const StyledForm = styled.form`
width: 50%; width: 50%;
height:130%; padding: 1.75%;
padding: 40px;
background-color: #eee; background-color: #eee;
color: #3d5a80; color: #3d5a80;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0px 0px 20px 0px rgba(250, 250, 250, 0.4); box-shadow: 0px 0px 20px 0px rgba(250, 250, 250, 0.4);
`; `;
// height:100%;
// border-radius: 10px; (if we want a round form) // border-radius: 10px; (if we want a round form)
const StyledInput = styled.input` const StyledInput = styled.input`
display: block; display: block;
width: 100%; width: 100%;
rows: 1;
padding 1.5%;
${sharedStyles} ${sharedStyles}
`; `;
const StyledTextAreaSubject = styled.textarea` const StyledTextAreaSubject = styled.textarea`
background-color: #98c1d9; background-color: #98c1d9;
width: 100%; width: 100%;
min-height: 5%; font-size:large;
resize: none; rows: 2;
padding 1.5%;
overflow: auto;
spellcheck:true;
resize: vertical;
${sharedStyles} ${sharedStyles}
`; `;
const StyledTextArea = styled.textarea` const StyledTextArea = styled.textarea`
background-color: #98c1d9; background-color: #98c1d9;
width: 100%; width: 100%;
min-height: 20%; resize: vertical;
resize: none; rows: 2;
padding 1.5%;
font-size:large;
overflow: auto;
spellcheck:true;
${sharedStyles} ${sharedStyles}
`; `;
const StyledButton = styled.button` const StyledButton = styled.button`
display: block; display: block;
background-color: #ee6c4d; background-color: #ee6c4d;
color: #fff; color: #fff;
font-size: 0.9rem; font-size: 1rem;
border: 0; border: 0;
border-radius: 5px; border-radius: 5px;
height: 40%; height: 40%;
padding: 0 20px; padding: 0 10%;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
@ -74,21 +81,9 @@ const StyledButton = styled.button`
const StyledError = styled.div` const StyledError = styled.div`
color: red; color: red;
font-weight: 800; font-weight: 800;
margin: 0 0 40px 0; margin: 0 0 5% 0;
`; `;
const ButtonSet = styled.div`
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;
`;
export default StyledFormWrapper; export default StyledFormWrapper;
@ -101,5 +96,4 @@ export {
StyledButton, StyledButton,
StyledError, StyledError,
StyledTextAreaSubject, StyledTextAreaSubject,
ButtonSet
}; };

16
src/components/assets/contact.scss
View File

@ -6,12 +6,24 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.buttonSet {
background-color: #3d5a80;
color: white;
font-size:1.7em;
border-radius:10px;
width: 20%;
left: 40%;
text-align: center;
padding: 0 2%;
position:relative;
top:3em;
}
.fa { .fa {
font-size: 1.5rem; font-size: 100%;
width: 10%; width: 10%;
text-decoration: none; text-decoration: none;
margin: -0vw 0.8vw; margin: 0vw 0.8vw;
} }
.fa:hover { .fa:hover {