From 76f22a62c3304a43753bc3cf12885ff48eeb534c Mon Sep 17 00:00:00 2001 From: Aditya Vasantharao Date: Tue, 23 Mar 2021 22:19:06 -0400 Subject: [PATCH] Stylize events page --- src/components/Events.js | 18 ++-- src/components/Home.js | 2 - src/components/Navbar.js | 4 +- src/components/assets/Events.scss | 137 ++++-------------------------- 4 files changed, 33 insertions(+), 128 deletions(-) diff --git a/src/components/Events.js b/src/components/Events.js index 49b61e5..92c185d 100644 --- a/src/components/Events.js +++ b/src/components/Events.js @@ -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( <>

-
- image of team member +
+ image of team member
+
-
- Click to Download Information +
+ Learn More  +
+ +
+ +
+
- ); } diff --git a/src/components/Home.js b/src/components/Home.js index 5bb5e4c..663fe31 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -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 = - export default function Home(props) { return ( diff --git a/src/components/Navbar.js b/src/components/Navbar.js index d14e6b2..2049200 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -40,12 +40,12 @@ export default function Navbar(props) { Home -
  • + {/*
  • {" "} About -
    • + */}
  • {" "} diff --git a/src/components/assets/Events.scss b/src/components/assets/Events.scss index 7f78285..9d9842d 100644 --- a/src/components/assets/Events.scss +++ b/src/components/assets/Events.scss @@ -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; +} \ No newline at end of file