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

Stylize events page

Browse Source
This commit is contained in:
Aditya Vasantharao 2021-03-23 22:19:06 -04:00
parent 0f808b9972
commit 76f22a62c3
4 changed files with 33 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Events.js
View File

@ -8,6 +8,8 @@ import icon from "./assets/img/0002.jpg";
import icon2 from "./assets/img/0001.jpg"; import icon2 from "./assets/img/0001.jpg";
import icon3 from "./assets/img/0003.jpg"; import icon3 from "./assets/img/0003.jpg";
import pdf from "./assets/Python_BootCamp.pdf"; import pdf from "./assets/Python_BootCamp.pdf";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons'
class Events extends Component { class Events extends Component {
@ -15,14 +17,20 @@ class Events extends Component {
return( return(
<> <>
<br></br> <br></br>
<div style={{marginLeft: '35%'}}> <div className="flyer-container">
<img src = {icon2} width="50%" height="100%" alt="image of team member"></img> <img src = {icon2} width="30%" height="100%" alt="image of team member"></img>
</div> </div>
<div className="pdf-link-container">
<div style={{marginLeft: '45%'}}> <div className="pdf-link">
<a href={pdf} download>Click to Download Information</a> <a href={pdf} download className="pdf-download"><strong>Learn More</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight}/></a>
</div>
</div>
<div className="bottom">
</div> </div>
</> </>
); );
} }

2
src/components/Home.js
View File

@ -7,8 +7,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons' import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons'
import {Spring} from 'react-spring/renderprops' import {Spring} from 'react-spring/renderprops'
const element = <FontAwesomeIcon icon={faArrowCircleRight} />
export default function Home(props) { export default function Home(props) {
return ( return (
<body className="main-content"> <body className="main-content">

4
src/components/Navbar.js
View File

@ -40,12 +40,12 @@ export default function Navbar(props) {
Home Home
</NavLink> </NavLink>
</li> </li>
<li> {/* <li>
{" "} {" "}
<NavLink to="/about" activeClassName="active-link"> <NavLink to="/about" activeClassName="active-link">
About About
</NavLink> </NavLink>
</li> </li> */}
<li> <li>
{" "} {" "}
<NavLink to="/meet-olympian" activeClassName="active-link"> <NavLink to="/meet-olympian" activeClassName="active-link">

137
src/components/assets/Events.scss
View File

@ -1,131 +1,30 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
$mobile-small: 575px; .flyer-container {
$mobile: 768px; display: flex;
$tablet: 1024px; justify-content: center;
$desktop-small: 1250px; padding-bottom: 1em;
@mixin mobile-small {
@media (max-width: $mobile-small) {
@content;
}
} }
@mixin mobile { .pdf-link-container {
@media (min-width: $mobile-small) and (max-width: $mobile) { display: flex;
@content; justify-content: center;
}
} }
@mixin tablet { .pdf-link {
@media (min-width: $mobile) and (max-width: $tablet) { font-family: 'Poppins', 'sans-serif';
@content; font-size: 1.5em;
}
} }
@mixin desktop-small { .pdf-download {
@media (min-width: $tablet) and (max-width: $desktop-small) { color: #009dff;
@content; text-decoration: none;
}
} }
@mixin desktop { .pdf-download:hover {
@media (min-width: $desktop-small) { color: #048fe6;
@content;
}
} }
* { .bottom {
padding: 0; padding-bottom: 1em;
margin: 0; }
box-sizing: border-box;
}
.hero {
pointer-events: none;
// height: 86vh;
}
.landing-header {
position: absolute;
font-family: "Poppins", sans-serif;
font-size: 4vw;
margin-left: 0.4em;
padding-top: 0.3em;
#potentia {
padding-left: 0.4em;
z-index: 999 !important;
position: relative;
}
#robotics {
position: relative;
top: -0.3em;
padding-left: 1.35em;
z-index: 999 !important;
}
}
.landing-robot {
position: absolute;
opacity: 1;
// left: 40vw;
overflow: hidden;
// animation: navLinkFade 0.5s ease forwards 0.5s;
// max-height: 87vh;
width: 100%;
}
@keyframes robotFlyIn {
from {
transform: translateX(150vw);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.highlight-gray {
background-color: rgb(235, 235, 235);
}
.landing-subheader {
font-family: "Poppins", sans-serif;
font-size: 2vw;
position: absolute;
margin-top: 55vh;
// margin-right: 10%;
// right: 0;
margin-left: 4em;
z-index: 999 !important;
width: 45%;
@include desktop-small {
margin-top: 40vh;
}
@include tablet {
margin-top: 33vh;
}
@include mobile {
margin-top: 25vh;
}
@include mobile-small {
margin-top: 17vh;
}
a {
color: inherit;
text-decoration: none;
pointer-events: all;
&:hover {
text-decoration: underline;
}
}
}