From 6017c9e3df76f2ddc0c578dfebb634f02489c722 Mon Sep 17 00:00:00 2001 From: Aditya Vasantharao Date: Mon, 8 Mar 2021 17:26:58 -0500 Subject: [PATCH] Add all missing pages --- src/App.js | 6 +- src/components/Blog.js | 23 +++- src/components/Contact.js | 13 ++- src/components/Events.js | 22 +++- src/components/Home.js | 29 +++--- src/components/Navbar.js | 8 +- src/components/Olympian.js | 26 +++++ src/components/assets/Blog.scss | 156 ++++++++++++++++++++++++++++ src/components/assets/Events.scss | 156 ++++++++++++++++++++++++++++ src/components/assets/Home.scss | 7 ++ src/components/assets/Navbar.scss | 24 ++++- src/components/assets/Olympian.scss | 156 ++++++++++++++++++++++++++++ src/components/assets/contact.scss | 31 +++++- 13 files changed, 624 insertions(+), 33 deletions(-) create mode 100644 src/components/Olympian.js create mode 100644 src/components/assets/Blog.scss create mode 100644 src/components/assets/Olympian.scss diff --git a/src/App.js b/src/App.js index 08dc898..c7c1417 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import About from "./components/About"; import ContactForm from "./components/Contact"; import Home from "./components/Home"; import PostDetail from "./components/PostDetail"; +import Olympian from "./components/Olympian"; import Blog from "./components/Blog"; import Donate from "./components/Donate"; import Navbar from "./components/Navbar"; @@ -21,8 +22,9 @@ function App() { - - + + + diff --git a/src/components/Blog.js b/src/components/Blog.js index 60d4a68..26b935a 100644 --- a/src/components/Blog.js +++ b/src/components/Blog.js @@ -1,5 +1,26 @@ import React from "react"; +import "./assets/Blog.scss"; +import hero from "./assets/img/olympian_hero.png"; export default function Blog(props) { - return
Blog
; + return ( + +
+
+

 Potentia 

+

 Robotics 

+
+
+

+  This page is under construction. 

 Please check back later!  +

+
+ +
+ + ); } diff --git a/src/components/Contact.js b/src/components/Contact.js index 75e32f0..911443e 100644 --- a/src/components/Contact.js +++ b/src/components/Contact.js @@ -3,7 +3,7 @@ import emailjs from "emailjs-com"; import {createGlobalStyle} from 'styled-components'; import {Spring} from 'react-spring/renderprops' import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet, Modal} from "./assets/StyledContactForm.js"; -import './assets/contact.scss'; +import './assets/Contact.scss'; // If you need anything for this ask Ram Reddy. @@ -13,7 +13,7 @@ const GlobalStyle = createGlobalStyle` } body { background-color: #293241; - font-family: Arial, Helvetica, sans-serif; + font-family: Poppins, sans-serif; height: 100%; margin: 0; color: #555; @@ -118,7 +118,7 @@ class ContactForm extends Component { -

Contact Form

+

Contact Us

{this.state.error}

- Send Message +
+ Send Message +
@@ -175,6 +177,9 @@ class ContactForm extends Component { )} +
+ +
); } diff --git a/src/components/Events.js b/src/components/Events.js index 246cc3d..de21bae 100644 --- a/src/components/Events.js +++ b/src/components/Events.js @@ -1,6 +1,26 @@ import React from "react"; import "./assets/Events.scss"; +import hero from "./assets/img/olympian_hero.png"; export default function Events(props) { - return
Events
; + return ( + +
+
+

 Potentia 

+

 Robotics 

+
+
+

+  This page is under construction. 

 Please check back later!  +

+
+ +
+ + ); } diff --git a/src/components/Home.js b/src/components/Home.js index 63d910c..4463d26 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -7,21 +7,22 @@ export default function Home(props) { return (
-
-

 Potentia 

-

 Robotics 

-
-
-

-  The first high school team to design and 

 build a full-size bipedal humanoid robot.  -

-
- +
+

 Potentia 

+

 Robotics 

+
+
+

+  The first high school team to design and 

 build a full-size bipedal humanoid robot.  +

+
+
+ {/*

hello

place this in the section, relative is only to the parent div */} {/*
diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 9329e94..0380ba7 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -48,13 +48,7 @@ export default function Navbar(props) {
  • {" "} - - Timeline - -
    • -
  • - {" "} - + Meet Olympian
    • diff --git a/src/components/Olympian.js b/src/components/Olympian.js new file mode 100644 index 0000000..6e670ac --- /dev/null +++ b/src/components/Olympian.js @@ -0,0 +1,26 @@ +import React from "react"; +import "./assets/Olympian.scss"; +import hero from "./assets/img/olympian_hero.png"; + +export default function Events(props) { + return ( + +
    +
    +

     Potentia 

    +

     Robotics 

    +
    +
    +

    +  This page is under construction. 

     Please check back later!      +

    +
    + +
    + + ); +} diff --git a/src/components/assets/Blog.scss b/src/components/assets/Blog.scss new file mode 100644 index 0000000..c982aa0 --- /dev/null +++ b/src/components/assets/Blog.scss @@ -0,0 +1,156 @@ +@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; + } +} + +@mixin mobile { + @media (min-width: $mobile-small) and (max-width: $mobile) { + @content; + } +} + +@mixin tablet { + @media (min-width: $mobile) and (max-width: $tablet) { + @content; + } +} + +@mixin desktop-small { + @media (min-width: $tablet) and (max-width: $desktop-small) { + @content; + } +} + +@mixin desktop { + @media (min-width: $desktop-small) { + @content; + } +} + +* { + 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; + } + } +} + +.intro-wrapper { + // position: relative; + justify-content: center; + + +} + +.intro-section { + position: absolute; + top: 50vw; + min-height: 50vh; + min-width: 100%; + background: rgb(235, 235, 235); +} + +.intro-content { + background: rgb(235, 235, 235); + float: left; +} + +.mission-statement { + background: rgb(235, 235, 235); + float: right; +} \ No newline at end of file diff --git a/src/components/assets/Events.scss b/src/components/assets/Events.scss index e69de29..c982aa0 100644 --- a/src/components/assets/Events.scss +++ b/src/components/assets/Events.scss @@ -0,0 +1,156 @@ +@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; + } +} + +@mixin mobile { + @media (min-width: $mobile-small) and (max-width: $mobile) { + @content; + } +} + +@mixin tablet { + @media (min-width: $mobile) and (max-width: $tablet) { + @content; + } +} + +@mixin desktop-small { + @media (min-width: $tablet) and (max-width: $desktop-small) { + @content; + } +} + +@mixin desktop { + @media (min-width: $desktop-small) { + @content; + } +} + +* { + 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; + } + } +} + +.intro-wrapper { + // position: relative; + justify-content: center; + + +} + +.intro-section { + position: absolute; + top: 50vw; + min-height: 50vh; + min-width: 100%; + background: rgb(235, 235, 235); +} + +.intro-content { + background: rgb(235, 235, 235); + float: left; +} + +.mission-statement { + background: rgb(235, 235, 235); + float: right; +} \ No newline at end of file diff --git a/src/components/assets/Home.scss b/src/components/assets/Home.scss index c982aa0..a2c60e9 100644 --- a/src/components/assets/Home.scss +++ b/src/components/assets/Home.scss @@ -35,6 +35,10 @@ $desktop-small: 1250px; } } +// .test { +// position: relative; +// } + * { padding: 0; margin: 0; @@ -43,6 +47,7 @@ $desktop-small: 1250px; .hero { pointer-events: none; + // position:relative // height: 86vh; } @@ -104,6 +109,8 @@ $desktop-small: 1250px; z-index: 999 !important; width: 45%; + + @include desktop-small { margin-top: 40vh; } diff --git a/src/components/assets/Navbar.scss b/src/components/assets/Navbar.scss index 8c1e465..ffa7bf7 100644 --- a/src/components/assets/Navbar.scss +++ b/src/components/assets/Navbar.scss @@ -113,20 +113,28 @@ nav { } } +// body { +// overflow-x: hidden; +// } + @media (max-width: $desktop-small) { + body { overflow-x: hidden; } + .nav-links { position: absolute; right: 0; - height: 92vh; + height: 65%; + padding-bottom: 2%; + opacity: 90%; top: 8vh; display: flex; flex-direction: column; align-items: center; background-color: $black; - width: 50%; + width: 30%; transform: translateX(100%); transition: transform 0.5s ease-in; @@ -135,6 +143,18 @@ nav { } } + @media (max-width: $mobile) { + .nav-links { + width: 50%; + } + } + + @media (max-width: $mobile-small) { + .nav-links { + width: 60%; + } + } + .burger { display: block; } diff --git a/src/components/assets/Olympian.scss b/src/components/assets/Olympian.scss new file mode 100644 index 0000000..c982aa0 --- /dev/null +++ b/src/components/assets/Olympian.scss @@ -0,0 +1,156 @@ +@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; + } +} + +@mixin mobile { + @media (min-width: $mobile-small) and (max-width: $mobile) { + @content; + } +} + +@mixin tablet { + @media (min-width: $mobile) and (max-width: $tablet) { + @content; + } +} + +@mixin desktop-small { + @media (min-width: $tablet) and (max-width: $desktop-small) { + @content; + } +} + +@mixin desktop { + @media (min-width: $desktop-small) { + @content; + } +} + +* { + 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; + } + } +} + +.intro-wrapper { + // position: relative; + justify-content: center; + + +} + +.intro-section { + position: absolute; + top: 50vw; + min-height: 50vh; + min-width: 100%; + background: rgb(235, 235, 235); +} + +.intro-content { + background: rgb(235, 235, 235); + float: left; +} + +.mission-statement { + background: rgb(235, 235, 235); + float: right; +} \ No newline at end of file diff --git a/src/components/assets/contact.scss b/src/components/assets/contact.scss index 2fd1e5f..43b1293 100644 --- a/src/components/assets/contact.scss +++ b/src/components/assets/contact.scss @@ -1,9 +1,26 @@ $small: 500px; $medium: 800px; +$large: 1200px; button { cursor:pointer; } + +.button-submit { + font-family: Poppins, sans-serif; + min-height: 50px; + margin: 0 auto; +} + +.button-container { + justify-content: center; +} + +.header { + font-size: 2.5em; + padding-bottom: 1vw; +} + .modal { position: fixed; top: 0; @@ -42,12 +59,17 @@ body { border-radius:10px; width: 20%; left: 40%; + margin-bottom: 5vw; text-align: center; padding: 0 2%; position:relative; top:2em; + @media only screen and (max-width: $large) { + width: 35%; + left: 35%; + } @media only screen and (max-width: $medium) { - width: 30%; + width: 45%; left: 35%; } @media only screen and (max-width: $small) { @@ -95,4 +117,9 @@ body { .fa-envelope { color: #e0fbfc; - } \ No newline at end of file + } + + +.bottom { + height: 0.5vw; +} \ No newline at end of file