CSS and links added

This commit is contained in:
Ram Reddy 2021-02-05 12:29:24 -05:00
parent 39535929ea
commit 784256d934
3 changed files with 21 additions and 17 deletions

View File

@ -138,11 +138,16 @@ class ContactForm extends Component {
</StyledFormWrapper> </StyledFormWrapper>
<button2 onClick={() => this.scrollDown("goHere")}> Or Find Us At </button2> <button2 onClick={() => this.scrollDown("goHere")}> Or Find Us At </button2>
<ButtonSet id="goHere"> <ButtonSet id="goHere">
<a href="#" className="fa fa-linkedin"></a> <a href="https://www.linkedin.com/in/potentia-robotics-790582204/" target="_blank" className="fa fa-linkedin"></a>
<a href="#" className="fa fa-youtube"></a> <span><br></br></span>
<a href="#" className="fa fa-github"></a> <a href="https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q" target="_blank" className="fa fa-youtube"></a>
<a href="#" className="fa fa-instagram"></a> <span><br></br></span>
<a href="#" className="fa fa-facebook"></a> <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> <button onClick={() => this.scrollDown("backUp")} className="fa fa-envelope"></button>
</ButtonSet> </ButtonSet>
</> </>

View File

@ -15,7 +15,7 @@ const StyledFormWrapper = styled.div`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
margin-top: -125px; margin-top: -3.7vw;
padding: 0 20px; padding: 0 20px;
`; `;
@ -72,13 +72,12 @@ const StyledError = styled.div`
`; `;
const ButtonSet = styled.div` const ButtonSet = styled.div`
display: flex; margin-top: 2vw;
justify-content: center; vertical-align: middle;
align-items: center; text-align: center;
height: 100vh;
margin-top: -125px;
padding: 0 20px; padding: 0 20px;
`; `;
export default StyledFormWrapper; export default StyledFormWrapper;
export { export {

View File

@ -4,11 +4,11 @@ button {
button2 { button2 {
display:block; display:block;
width:18%; width:40%;
margin:0 auto; margin:0 auto;
position:relative; position:relative;
font-size:40px; font-size:2vw;
margin-top: -125px; margin-top: -6vw;
outline:none; outline:none;
color:#fff; color:#fff;
border:none; border:none;
@ -22,12 +22,12 @@ button2 {
border-bottom:1px solid #7b8b2f; border-bottom:1px solid #7b8b2f;
} }
.fa { .fa {
padding: 20px; padding: 1vw;
font-size: 75px; font-size: 5vw;
width: 10%; width: 10%;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
margin: 5px 2px; margin: 0.2vw 0.2vw;
} }
.fa:hover { .fa:hover {