diff --git a/public/assets/images/planet-3.svg b/public/assets/images/planet-3.svg new file mode 100644 index 0000000..b6eaaac --- /dev/null +++ b/public/assets/images/planet-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/components/faqs/FAQs.scss b/src/app/components/faqs/FAQs.scss index 4d283ee..c8e902f 100644 --- a/src/app/components/faqs/FAQs.scss +++ b/src/app/components/faqs/FAQs.scss @@ -1,4 +1,4 @@ -// @import "../../../globals/vh-styles.scss"; +@import "src/globals/vh-styles.scss"; #faq-accordion-wrapper { width: 80vw; @@ -27,11 +27,24 @@ .accordion { text-align: left; - --bs-accordion-color: #322660; - --bs-accordion-active-color: #322660; - --bs-accordion-btn-color: #322660; + --bs-accordion-color: $darkPurple; + --bs-accordion-active-color: $darkPurple; + --bs-accordion-btn-color: $darkPurple; --bs-accordion-bg: none; --bs-accordion-border-color: none; + --bs-accordion-border-radius: none; --bs-accordion-active-bg: none; --bs-accordion-btn-focus-box-shadow: none; } + +.accordion-body { + padding-top: 0px; +} + +.accordion-item { + border-bottom: $darkPurple 1px solid; +} + +.accordion .accordion-button { + box-shadow: none; +} diff --git a/src/app/views/home/Home.jsx b/src/app/views/home/Home.jsx index 5bc0a40..3172fd7 100644 --- a/src/app/views/home/Home.jsx +++ b/src/app/views/home/Home.jsx @@ -2,7 +2,7 @@ import FAQs from "src/app/components/faqs/FAQs"; import Sponsors from "src/app/components/sponsors/Sponsors"; import Partners from "src/app/components/partners/Partners"; -import vhTitle from "/assets/images/titles/vh-title-launch.svg"; +import vh_title from "/assets/images/titles/venushacks.svg"; import about_title from "/assets/images/titles/vh-about.svg"; import faq_title from "/assets/images/titles/vh-faq.svg"; @@ -16,25 +16,25 @@ const Home = () => {
{/* HERO **********************/}
-
- {/* These assets are a background of a div instead of imgs to prevent - them from being able to be saved to camera roll on iOS */} -
-
-
-
-
-
VenusHacks Title Logo

{VH_DATE}

UC Irvine's largest women-centric hackathon

+
+ {/* These assets are a background of a div instead of imgs to prevent + them from being able to be saved to camera roll on iOS */} +
+
+
+
+
+
{/* ABOUT **********************/}
@@ -66,7 +66,7 @@ const Home = () => { providing an inclusive community where students can receive the support to grow and express their creativity in computing.

-

+

This year, VenusHacks will take place fully in-person in Spring 2024! Join us as we welcome high school (18+), undergraduate, and graduate students to participate in our 36-hour (non-overnight) diff --git a/src/app/views/home/Home.scss b/src/app/views/home/Home.scss index 9372a89..c5b50ff 100644 --- a/src/app/views/home/Home.scss +++ b/src/app/views/home/Home.scss @@ -4,7 +4,7 @@ $boba: "/assets/images/vh-boba.png"; $astronaut: "/assets/images/vh-astronaut.png"; $laptop: "/assets/images/vh-laptop.png"; $shiba: "/assets/images/VH_shiba_inu.png"; -$planet: "/assets/images/vh-planet.png"; +$planet: "/assets/images/planet-3.svg"; $stars_background: "/assets/images/stars.svg"; body { @@ -19,7 +19,6 @@ body { min-height: 100vh; section { - min-height: 100vh; .section-title { max-width: 100vw; height: 60px; @@ -47,10 +46,15 @@ body { #hero { display: flex; - justify-content: center; align-items: center; - margin: 0 50px; + margin: 10vw 15vw; flex-direction: column; + background-color: #a8acf977; + border-radius: 50px; + + @media screen and (max-width: $break-medium) { + margin: 10vw 5vw; + } #astronaut-animation { display: flex; @@ -58,10 +62,18 @@ body { justify-content: space-between; max-width: 600px; margin-top: 150px; + transform: translateY(-700px); @media screen and (max-width: $break-medium) { width: 100%; max-width: 325px; + transform: translateY(-600px); + } + + @media screen and (max-width: $break-small) { + width: 100%; + max-width: 325px; + transform: translateY(-400px); } @keyframes floatBoba { @@ -125,8 +137,8 @@ body { animation: floatAstronaut 4s ease-in-out infinite; @media screen and (max-width: $break-small) { - width: 40vw; - height: 40vw; + width: 25vw; + height: 25vw; } } @@ -169,8 +181,8 @@ body { } // END #astronaut-animation #hero-right { - width: 48%; - margin-bottom: 20px; + // width: 48%; + // margin-bottom: 20px; @media screen and (max-width: $break-medium) { width: initial; @@ -188,16 +200,21 @@ body { } #date { - margin-top: 15px; + transform: translateY(-200px); color: $darkPurple; font-family: var(--font-comfortaa); font-weight: 700; @media screen and (max-width: $break-medium) { font-size: 20px; } + + @media screen and (max-width: $break-small) { + transform: translateY(-20px); + } } #tagline { + transform: translateY(-190px); font-family: "Varela", sans-serif; font-size: 22px; color: $darkPurple; @@ -205,6 +222,10 @@ body { @media screen and (max-width: $break-medium) { font-size: 18px; } + + @media screen and (max-width: $break-small) { + transform: translateY(-10px); + } } #apps { @@ -248,20 +269,18 @@ body { transform: scale(1.08); } } // END #hero-right - #planet { - width: 50vw; - height: 50vw; - max-height: 600px; - max-width: 600px; - background: url($planet); - background-size: contain; - background-repeat: no-repeat; - display: block; - margin: auto; - margin-top: 5%; - } } // END HERO + #planet { + width: 75vw; + height: 75vw; + background: url($planet); + background-size: contain; + background-repeat: no-repeat; + margin: auto; + margin-top: -50%; + } + #about { display: flex; justify-content: center;