From bbe39a0ffa5c1aedaf0dc04b83a18f4f9e6a2d45 Mon Sep 17 00:00:00 2001 From: mustachemo Date: Sun, 10 Sep 2023 13:55:26 -0700 Subject: [PATCH 1/6] progress --- src/App.css | 485 +++++++++++++++++++++++---------------- src/Components/NavBar.js | 15 +- 2 files changed, 303 insertions(+), 197 deletions(-) diff --git a/src/App.css b/src/App.css index d4bc8c0..7d9916f 100644 --- a/src/App.css +++ b/src/App.css @@ -1,14 +1,11 @@ - @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Unbounded:wght@300;400&display=swap'); - -.html{ +.html { overflow-y: hidden; } .App { text-align: center; min-height: 100vh; - } .App-link { @@ -16,23 +13,22 @@ } a { - color: #FF7676; + color: #ff7676; } -.Tracks{ - background: radial-gradient(50% 50% at 50% 50%, #D801DC 0%, #FF7676 100%); +.Tracks { + background: radial-gradient(50% 50% at 50% 50%, #d801dc 0%, #ff7676 100%); background-blend-mode: overlay; mix-blend-mode: normal; backdrop-filter: blur(6px); - color:white; + color: white; height: fit-content; max-width: 100vw; align-items: center; text-align: center; - padding-bottom: 10vh ; - + padding-bottom: 10vh; } -.Tracks-title{ +.Tracks-title { margin-top: 0; font-family: 'Unbounded'; font-weight: normal; @@ -42,63 +38,66 @@ a { text-align: left; position: absolute; } -.Tracks-Flex{ +.Tracks-Flex { justify-content: center; display: flex; padding-top: 1.5rem; } -.Track-Card{ - background: linear-gradient(170.14deg, rgba(37, 18, 18) 1.13%, rgba(143, 26, 26) 104.83%); +.Track-Card { + background: linear-gradient( + 170.14deg, + rgba(37, 18, 18) 1.13%, + rgba(143, 26, 26) 104.83% + ); width: 20vw; - padding:2em; + padding: 2em; padding-top: 5vh; - margin:1em; + margin: 1em; margin-bottom: 5vh; margin-top: 20vh; - opacity: .7; + opacity: 0.7; position: relative; } -.Track-Name{ - color: #FFFFFF; +.Track-Name { + color: #ffffff; font-family: 'Unbounded'; } -.Track-Text{ +.Track-Text { padding-top: 2vh; - margin:1vw; + margin: 1vw; font-family: 'DM Sans'; font-style: normal; font-weight: 50; font-size: 0.9em; text-align: center; - color: #FFFFFF; + color: #ffffff; } -.Track-Logo{ - filter: drop-shadow(0px 0px 40px #FF5E54); +.Track-Logo { + filter: drop-shadow(0px 0px 40px #ff5e54); min-height: 10vh; min-width: 10vw; - margin-top:5vh; - + margin-top: 5vh; } -.Sponsors{ - height:0; - background: radial-gradient(50% 50% at 50% 50%, #D801DC 0%, #FF7676 100%); +.Sponsors { + height: 0; + background: radial-gradient(50% 50% at 50% 50%, #d801dc 0%, #ff7676 100%); background-blend-mode: overlay; mix-blend-mode: normal; backdrop-filter: blur(6px); - color:white; - height:fit-content; + color: white; + height: fit-content; max-width: 100vw; align-items: center; text-align: center; } -.Sponsors-Logo{ +.Sponsors-Logo { width: 50vw; left: 131px; padding-top: 5em; padding-bottom: 5em; } -.Sponsors-Description{ +.Sponsors-Description { left: 10vw; position: absolute; font-family: 'DM Sans'; @@ -108,7 +107,7 @@ a { margin-right: 10vw; text-align: left; } -.Sponsors-title{ +.Sponsors-title { margin-top: 0; font-family: 'Unbounded'; font-weight: normal; @@ -117,23 +116,24 @@ a { padding-left: 10vw; } -.FAQ, .Team{ +.FAQ, +.Team { display: flex; align-items: center; justify-content: center; padding: 5em 0; - background: linear-gradient(180deg, #FF5E5E 0%, #AD11BB 100%); + background: linear-gradient(180deg, #ff5e5e 0%, #ad11bb 100%); } -.FAQ-container{ +.FAQ-container { width: 80vw; } -.FAQ-grid{ +.FAQ-grid { margin: 0; } -.FAQ-container .title{ +.FAQ-container .title { font-family: 'Unbounded'; font-weight: normal; width: fit-content; @@ -142,27 +142,27 @@ a { color: white; } -.FAQ-accordion{ - border: 2px solid #E0B8FF; - background: linear-gradient(122.2deg, #301942 -0.42%, #B01F69 126.58%);; +.FAQ-accordion { + border: 2px solid #e0b8ff; + background: linear-gradient(122.2deg, #301942 -0.42%, #b01f69 126.58%); } .FAQ-container .FAQ-accordion.MuiAccordion-root { border-radius: 1.875em; } -.FAQ-summary{ +.FAQ-summary { flex-direction: row-reverse; } .FAQ-summary .MuiAccordionSummary-expandIconWrapper.Mui-expanded { transform: rotate(90deg); } -.accordion-link{ - color: white; +.accordion-link { + color: white; } -.accordion-title{ +.accordion-title { font-family: 'DM Sans'; font-weight: bold; font-size: 1em; @@ -171,7 +171,7 @@ a { margin: 0; } -.accordion-description{ +.accordion-description { font-family: 'DM Sans'; font-style: normal; font-size: 0.9em; @@ -189,18 +189,18 @@ a { } } -.NavBar{ +.NavBar { position: sticky; width: 100%; height: 1.5rem; justify-content: space-between; align-content: center; - padding-bottom:3rem; - background: linear-gradient(122.2deg, #301942 -0.42%, #B01F69 126.58%); + padding-bottom: 3rem; + background: linear-gradient(122.2deg, #301942 -0.42%, #b01f69 126.58%); /* background-color: red; */ z-index: 2; } -.nav-items{ +.nav-items { display: flex; align-items: baseline; position: absolute; @@ -208,101 +208,168 @@ a { margin-top: 0.8rem; } -.nav-items .button, .nav-items .registerButton{ +.nav-items .button, +.nav-items .registerButton { font-family: 'DM Sans'; font-weight: bold; font-size: 1em; } -.nav-items > li{ +.nav-items > li { margin-right: 2.5rem; list-style-type: none; } -.button{ +.button { background: none; border: none; font-size: 1em; transition-duration: 0.4s; color: white; } -.registerButton{ - background-color: #FF7676; - border: 0.12rem solid #FF7676; +.registerButton { + background-color: #ff7676; + border: 0.12rem solid #ff7676; border-radius: 3rem; - padding:0.8rem; + padding: 0.8rem; padding-bottom: 1rem; - width:8rem; + width: 8rem; text-align: center; font-size: 1em; transition-duration: 0.4s; color: white; } -.button:hover{ - color:#AD0624; +.button:hover { + color: #ad0624; cursor: pointer; } -.registerButton:hover{ - background-color: #FFFFFF; - color:#AD0624; - border: 0.18rem solid #AD0624; +.registerButton:hover { + background-color: #ffffff; + color: #ad0624; + border: 0.18rem solid #ad0624; cursor: pointer; transform: translate(0.1rem, -0.1rem); } -.MainPage{ - background-color: #B61255; - background: radial-gradient(89.01% 89.01% at 72.01% 35.06%, #D83F0E 0%, #AD066A 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */; +/* TOGGLE BUTTON for Navbar */ + +.navbar-toggle { + position: absolute; + top: 1.5rem; + right: 1.5rem; + display: none; + flex-direction: column; + justify-content: space-between; + width: 30px; + height: 21px; + + cursor: pointer; + color: black; + font-size: 2rem; +} + +.navbar-toggle .bar { + width: 100%; + height: 3px; + background-color: rgb(0, 0, 0); +} + +/* MEDIA QUERIES for NAVBAR */ +/* +@media (max-width: 800px) { + .navbar-toggle { + display: flex; + } + + .nav-items { + display: none; + width: 100%; + } + + .NavBar { + flex-direction: column; + align-items: flex-start; + } + + .NavBar ul { + flex-direction: column; + width: 100%; + } + + .nav-items li { + text-align: center; + } + + .nav-items li a { + padding: 0.5rem; + } + + .nav-items.active { + display: flex; + } +} */ + +.MainPage { + background-color: #b61255; + background: radial-gradient( + 89.01% 89.01% at 72.01% 35.06%, + #d83f0e 0%, + #ad066a 100% + ) + /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */; background-blend-mode: overlay; mix-blend-mode: normal; - position:relative; + position: relative; display: flex; width: 100%; height: 100vh; font-size: calc(1em + 2vmin); font-family: 'Unbounded'; - overflow-x:hidden; - + overflow-x: hidden; } -.Main-text{ +.Main-text { position: absolute; text-align: left; - left:10rem; - top:10rem; - filter: drop-shadow(0px 0px 40px #FF5E54); + left: 10rem; + top: 10rem; + filter: drop-shadow(0px 0px 40px #ff5e54); z-index: 3; } -.Main-text-background{ +.Main-text-background { color: none; position: absolute; - background: radial-gradient(50% 50% at 50% 50%, rgba(143, 26, 26) 0%, #FF7676 100%); + background: radial-gradient( + 50% 50% at 50% 50%, + rgba(143, 26, 26) 0%, + #ff7676 100% + ); border-radius: 5%; /* width: 45rem; */ width: 115%; height: 100%; /* height: 26rem; */ - left:-3rem; + left: -3rem; filter: opacity(50%) blur(5px); z-index: -3; } -.Main-video{ +.Main-video { min-width: 100vw; max-height: 100vh; object-fit: cover; overflow-y: hidden; } -.Main-title{ - color:#FFFFFF; +.Main-title { + color: #ffffff; transition-duration: 0.4s; } -.Main-title:hover{ +.Main-title:hover { transition-duration: 1s; transform: scale(103%); - filter: drop-shadow(0px 0px 10px #FF5E54) saturate(150%); + filter: drop-shadow(0px 0px 10px #ff5e54) saturate(150%); } -.Main-subtitle{ - color:#FFFFFF; +.Main-subtitle { + color: #ffffff; } -.Main-sub2{ +.Main-sub2 { font-family: 'DM Sans'; font-style: small; font-weight: 500; @@ -310,9 +377,9 @@ a { line-height: 31px; display: flex; align-items: center; - color: #FFFFFF; + color: #ffffff; } -.Main-footer{ +.Main-footer { font-family: 'DM Sans'; font-style: normal; font-weight: 500; @@ -320,10 +387,9 @@ a { line-height: 24px; display: flex; align-items: center; - color: #FFFFFF; - + color: #ffffff; } -.Main-footerlink{ +.Main-footerlink { font-family: 'DM Sans'; font-style: normal; font-weight: 500; @@ -335,312 +401,339 @@ a { padding-left: 5px; text-decoration: wavy; } -.emailEmoji{ +.emailEmoji { padding-left: 0.4rem; filter: grayscale(100%); } -.Main-footerlink:hover{ - color: #B01F69; +.Main-footerlink:hover { + color: #b01f69; transition-duration: 0.4s; } -.Main-footerlink:hover .emailEmoji{ +.Main-footerlink:hover .emailEmoji { transition-duration: 0.4s; transform: rotateY(360deg) scale(150%); filter: grayscale(0%); } -.registerButton2{ +.registerButton2 { font-family: 'Unbounded'; - background-color: #FFFFFF; + background-color: #ffffff; border: 0.18rem solid black; border-radius: 100px; - color: #B61255; + color: #b61255; width: 15rem; - height:2rem; - transition-duration: .4s; + height: 2rem; + transition-duration: 0.4s; border: none; } -.registerButton2:hover{ - background: linear-gradient(122.2deg, #301942 -0.42%, #B01F69 126.58%); +.registerButton2:hover { + background: linear-gradient(122.2deg, #301942 -0.42%, #b01f69 126.58%); border: 0.18rem solid white; - color: #FFFFFF; + color: #ffffff; cursor: pointer; transform: translate(0.1rem, -0.1rem); border: none; filter: saturate(200%); } -#star{ +#star { display: none; color: white; - filter:blur(0.1rem); + filter: blur(0.1rem); position: absolute; - font-size: .5em; + font-size: 0.5em; top: 16.8rem; } @keyframes move-stars { 0% { - transform: translateX(0); + transform: translateX(0); } 50% { - transform: translateX(14rem); + transform: translateX(14rem); } 100% { - transform: translateX(0); + transform: translateX(0); } } -.registerButton2:hover ~ #star{ - display:block; +.registerButton2:hover ~ #star { + display: block; } -.registerButton2:hover ~ .star1{ +.registerButton2:hover ~ .star1 { animation: move-stars 2s ease-in-out infinite; - display:block; + display: block; } -.registerButton2:hover ~ .star2{ +.registerButton2:hover ~ .star2 { animation: move-stars 1.5s ease-in-out infinite; } -.registerButton2:hover ~ .star3{ +.registerButton2:hover ~ .star3 { animation: move-stars 1s ease-in-out infinite; } -.Footer-Comp{ +.Footer-Comp { position: relative; padding-bottom: 2rem; - color: #E0B8FF; + color: #e0b8ff; font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-size: 0.9em; max-width: 100vw; min-height: 33vh; - background: linear-gradient(97.23deg, #60164D 4.27%, #6A2047 97.05%); + background: linear-gradient(97.23deg, #60164d 4.27%, #6a2047 97.05%); } -.Footer-container{ +.Footer-container { padding-top: 10vh; display: flex; } -.Footer-socialmedia{ +.Footer-socialmedia { text-align: left; padding-left: 10%; - } -.Footer-Vector{ +.Footer-Vector { padding-left: 40vw; } -.Footer-Logo{ +.Footer-Logo { padding-right: 1em; } -.Footer-description{ - padding-left: 1.5em; +.Footer-description { + padding-left: 1.5em; text-align: left; } /*TEAM SECTION*/ -.Team-container{ +.Team-container { height: 70vh; width: 80vw; top: 4rem; position: relative; } -.title{ +.title { text-align: left; } -.Team-container .title{ - height: 10vh; - font-family: 'Unbounded'; - font-weight: normal; - width: fit-content; - margin-top: 0rem; - position: absolute; - top: -3.5rem; - left: 1.5rem; - color: white; -} -.MuiGrid-root.MuiGrid-item{ +.Team-container .title { + height: 10vh; + font-family: 'Unbounded'; + font-weight: normal; + width: fit-content; + margin-top: 0rem; + position: absolute; + top: -3.5rem; + left: 1.5rem; + color: white; +} +.MuiGrid-root.MuiGrid-item { padding-left: none; } -.Team-individual{ +.Team-individual { padding: 1em; - } -.Team-Flex{ +.Team-Flex { display: flex; align-items: flex-start; - flex-direction:row; + flex-direction: row; justify-content: center; } -.Team-Img{ +.Team-Img { border-radius: 50%; max-height: 20vh; max-width: 20vw; overflow: hidden; - filter: drop-shadow(0px 0px 10px #FF5E54) saturate(150%); + filter: drop-shadow(0px 0px 10px #ff5e54) saturate(150%); } -.Team-Name{ - color: #FFFFFF; +.Team-Name { + color: #ffffff; font-family: 'Unbounded'; } /*MOBILE VIEWPORTS*/ @media screen and (min-width: 300px) and (max-width: 880px) { - .MainPage{ + .MainPage { overflow-y: hidden; display: block; } - .Main-video{ + .Main-video { padding-left: 0; - position:sticky; - left:0; + position: sticky; + left: 0; z-index: 1; overflow: hidden; } .Main-video:-webkit-scrollbar { display: none; - } - .Main-text{ - left:auto; + .Main-text { + left: auto; padding-left: 1em; font-size: smaller; z-index: 3; transform: scale(80%); } - .title-flair{ + .title-flair { display: block; } - .Main-footer{ + .Main-footer { display: block; padding-right: 1rem; } - .Main-footerlink{ + .Main-footerlink { margin: -1rem; padding-left: 1rem; } - .Main-text-background{ + .Main-text-background { margin-left: 1rem; + } + + .navbar-toggle { + display: flex; + } + + .nav-items { + display: none; + width: 100%; + } + .NavBar { + flex-direction: column; + align-items: flex-start; + } + + .NavBar ul { + flex-direction: column; + width: 100%; } - .nav-items{ + + .nav-items li { + text-align: center; + } + + .nav-items li a { + padding: 0.5rem; + } + + .nav-items.active { + display: flex; + } + + /* .nav-items { right: 5vw; padding-left: 5vw; margin-top: 1%; margin-bottom: 1%; - display:grid; + display: grid; grid-template-rows: 2rem 2rem; grid-template-columns: 5rem 5rem 5rem; } - .nav-items > li{ + + .nav-items > li { margin-right: 0.5em; - min-width:0.5rem; + min-width: 0.5rem; font-size: small; text-align: left; border: hidden; } - .registerButton{ + .registerButton { border-radius: 3rem; padding: 0; text-align: center; font-size: 1em; width: 4rem; } - .registerButton:hover{ - background-color: #FFFFFF; - color:#AD0624; - border: 0.18rem solid #AD0624; + .registerButton:hover { + background-color: #ffffff; + color: #ad0624; + border: 0.18rem solid #ad0624; cursor: pointer; - } - .Team-Flex{ + } */ + .Team-Flex { flex-direction: column; height: fit-content; } - .Team-container .title{ + .Team-container .title { height: 0; padding-bottom: 3em; padding-left: 0; left: 0; } - .Team-Img{ + .Team-Img { overflow: visible; max-width: none; } - .Team-Name{ + .Team-Name { padding-top: 5em; } - .Team-individual{ + .Team-individual { display: flex; margin-bottom: 2em; - gap:5vw; + gap: 5vw; } - .Team-container{ + .Team-container { height: max-content; } - .MuiGrid-root.Team-Flex{ + .MuiGrid-root.Team-Flex { display: block; columns: 1; gap: 0rem; - } - .Tracks-Flex{ + .Tracks-Flex { display: inline-block; } - .Track-Card{ + .Track-Card { width: auto; } - .Tracks{ + .Tracks { height: auto; margin-top: 0; padding-top: 0; z-index: 3; position: relative; } - .Tracks-title .title{ + .Tracks-title .title { text-align: left; - padding-left:1.5em; - position:initial; + padding-left: 1.5em; + position: initial; } .Tracks-title { margin-left: 7%; } - .FAQ-accordion{ + .FAQ-accordion { position: relative; flex-direction: column; } - .MuiGrid2-root.FAQ-grid{ + .MuiGrid2-root.FAQ-grid { display: block; columns: 1; gap: 0rem; - } - .FAQ-accordion{ + .FAQ-accordion { width: 80vw; } - .FAQ{ + .FAQ { position: relative; z-index: 3; text-align: left; } - .Footer-Vector{ + .Footer-Vector { padding-left: 3em; } - .Footer-socialmedia{ + .Footer-socialmedia { padding-left: 1.5em; } - .Footer-container{ + .Footer-container { padding-top: 3vh; } - .Footer-description{ + .Footer-description { padding-left: 2em; } - .Sponsors-Logo{ + .Sponsors-Logo { margin-top: 15vh; width: 80vw; } - .Tracks{ + .Tracks { padding-bottom: 0; } - .Track-Card{ + .Track-Card { max-width: 70vw; } - .Track-Logo{ + .Track-Logo { height: auto; width: auto; } diff --git a/src/Components/NavBar.js b/src/Components/NavBar.js index 7e033b8..ced8160 100644 --- a/src/Components/NavBar.js +++ b/src/Components/NavBar.js @@ -1,7 +1,20 @@ +import React, { useState } from 'react'; + function NavBar() { + const [isNavBarActive, setIsNavBarActive] = useState(false); + + const toggleNavBar = () => { + setIsNavBarActive(!isNavBarActive); + }; + return (
-
+ ); } From eb62394192daffa93d8f921b2e3af86201e3cbfb Mon Sep 17 00:00:00 2001 From: mustachemo Date: Sat, 16 Sep 2023 10:59:39 -0700 Subject: [PATCH 3/6] going to attempt to redo navbar --- src/App.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index 1683e91..1be4723 100644 --- a/src/App.css +++ b/src/App.css @@ -560,10 +560,10 @@ a { } .nav-items.active { - position: static; top: 3.7rem; right: 0; - width: 100%; + width: 82%; + border: 1px solid black; display: flex; flex-direction: column; align-items: center; From 0bce85200d7821c6f55bf41865d589feb4a0c553 Mon Sep 17 00:00:00 2001 From: mustachemo Date: Sat, 16 Sep 2023 11:10:04 -0700 Subject: [PATCH 4/6] added minireset --- src/App.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 70d60df..16d8cc0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ - +import '../node_modules/minireset.css/minireset.css' import './App.css'; import Tracks from './Components/Tracks.js'; import FAQ from './Components/FAQ.js' @@ -11,9 +11,7 @@ import Team from './Components/Team.js'; function App() { return (
-
- -
+ From 04b3f59393c6846c72fe3c161558731db49d31d9 Mon Sep 17 00:00:00 2001 From: mustachemo Date: Sat, 16 Sep 2023 11:16:17 -0700 Subject: [PATCH 5/6] fixed navbar with minireset --- src/App.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index 1be4723..8ff0402 100644 --- a/src/App.css +++ b/src/App.css @@ -192,20 +192,20 @@ a { .NavBar { position: sticky; width: 100%; - height: 1.5rem; - justify-content: space-between; + height: 5rem; + display: flex; + justify-content: center; align-content: center; - padding-bottom: 3rem; background: linear-gradient(122.2deg, #301942 -0.42%, #b01f69 126.58%); /* background-color: red; */ z-index: 2; } .nav-items { + width: 100%; + border: 1px solid black; display: flex; - align-items: baseline; - position: absolute; - right: 1rem; - margin-top: 0.8rem; + justify-content: flex-end; + align-items: center; } .nav-items .button, From cdbe5b3fa63e5f22604711d4f4b96663a8a88e28 Mon Sep 17 00:00:00 2001 From: mustachemo Date: Sat, 16 Sep 2023 11:34:36 -0700 Subject: [PATCH 6/6] navbar done --- src/App.css | 20 +++++++++++++------- src/Components/NavBar.js | 10 +++++----- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/App.css b/src/App.css index 8ff0402..7f943f7 100644 --- a/src/App.css +++ b/src/App.css @@ -202,7 +202,6 @@ a { } .nav-items { width: 100%; - border: 1px solid black; display: flex; justify-content: flex-end; align-items: center; @@ -555,19 +554,26 @@ a { display: none; } + .NavBar { + height: 4.2rem; + } + .NavBar.active { - height: 12.5rem; + height: 13rem; } .nav-items.active { - top: 3.7rem; - right: 0; - width: 82%; - border: 1px solid black; + max-width: 100%; + text-align: center; display: flex; flex-direction: column; align-items: center; - justify-content: space-between; + justify-content: space-around; + margin-left: 2.5rem; + } + + .button.active { + border: 1px solid white; } /* .nav-items { diff --git a/src/Components/NavBar.js b/src/Components/NavBar.js index 2eed0f3..98fc74c 100644 --- a/src/Components/NavBar.js +++ b/src/Components/NavBar.js @@ -11,11 +11,11 @@ function NavBar() {