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 icon3 from "./assets/img/0003.jpg";
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 {
@ -15,14 +17,20 @@ class Events extends Component {
return(
<>
<br></br>
<div style={{marginLeft: '35%'}}>
<img src = {icon2} width="50%" height="100%" alt="image of team member"></img>
<div className="flyer-container">
<img src = {icon2} width="30%" height="100%" alt="image of team member"></img>
</div>
<div className="pdf-link-container">
<div style={{marginLeft: '45%'}}>
<a href={pdf} download>Click to Download Information</a>
<div className="pdf-link">
<a href={pdf} download className="pdf-download"><strong>Learn More</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight}/></a>
</div>
</div>
<div className="bottom">
</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 {Spring} from 'react-spring/renderprops'
const element = <FontAwesomeIcon icon={faArrowCircleRight} />
export default function Home(props) {
return (
<body className="main-content">

4
src/components/Navbar.js
View File

@ -40,12 +40,12 @@ export default function Navbar(props) {
Home
</NavLink>
</li>
<li>
{/* <li>
{" "}
<NavLink to="/about" activeClassName="active-link">
About
</NavLink>
</li>
</li> */}
<li>
{" "}
<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");
$mobile-small: 575px;
$mobile: 768px;
$tablet: 1024px;
$desktop-small: 1250px;
@mixin mobile-small {
@media (max-width: $mobile-small) {
@content;
}
.flyer-container {
display: flex;
justify-content: center;
padding-bottom: 1em;
}
@mixin mobile {
@media (min-width: $mobile-small) and (max-width: $mobile) {
@content;
}
.pdf-link-container {
display: flex;
justify-content: center;
}
@mixin tablet {
@media (min-width: $mobile) and (max-width: $tablet) {
@content;
}
.pdf-link {
font-family: 'Poppins', 'sans-serif';
font-size: 1.5em;
}
@mixin desktop-small {
@media (min-width: $tablet) and (max-width: $desktop-small) {
@content;
}
.pdf-download {
color: #009dff;
text-decoration: none;
}
@mixin desktop {
@media (min-width: $desktop-small) {
@content;
}
.pdf-download:hover {
color: #048fe6;
}
* {
padding: 0;
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;
}
}
}
.bottom {
padding-bottom: 1em;
}