From ca5c1b5b331e77c0b9cd5a39eb44be41faf4bcb0 Mon Sep 17 00:00:00 2001 From: Zach Date: Mon, 16 Oct 2023 14:07:56 -0400 Subject: [PATCH 1/4] Separate hero background into layers --- img/hero-bg/layer1.svg | 51 +++++++ img/hero-bg/layer2.svg | 72 +++++++++ img/hero-bg/layer3.svg | 335 +++++++++++++++++++++++++++++++++++++++++ img/hero-bg/layer4.svg | 79 ++++++++++ 4 files changed, 537 insertions(+) create mode 100644 img/hero-bg/layer1.svg create mode 100644 img/hero-bg/layer2.svg create mode 100644 img/hero-bg/layer3.svg create mode 100644 img/hero-bg/layer4.svg diff --git a/img/hero-bg/layer1.svg b/img/hero-bg/layer1.svg new file mode 100644 index 0000000..9180c3a --- /dev/null +++ b/img/hero-bg/layer1.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + diff --git a/img/hero-bg/layer2.svg b/img/hero-bg/layer2.svg new file mode 100644 index 0000000..6a72443 --- /dev/null +++ b/img/hero-bg/layer2.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + diff --git a/img/hero-bg/layer3.svg b/img/hero-bg/layer3.svg new file mode 100644 index 0000000..0d6787a --- /dev/null +++ b/img/hero-bg/layer3.svg @@ -0,0 +1,335 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/hero-bg/layer4.svg b/img/hero-bg/layer4.svg new file mode 100644 index 0000000..701a224 --- /dev/null +++ b/img/hero-bg/layer4.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + From abbf3fd666670696efac425c374e4de36ac192f5 Mon Sep 17 00:00:00 2001 From: Zach Date: Mon, 16 Oct 2023 14:08:26 -0400 Subject: [PATCH 2/4] Import background images into tailwind config --- tailwind.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index 9000550..bce0b1e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,6 +12,10 @@ module.exports = { 'fireflies': "url('img/website-bg2.png')", 'plus-icon': "url('img/icons/plus.png')", 'groundboi': "url('img/sticker2-no_border.png')", + 'enchanted-forest-layer-1': "url('img/hero-bg/layer1.svg')", + 'enchanted-forest-layer-2': "url('img/hero-bg/layer2.svg')", + 'enchanted-forest-layer-3': "url('img/hero-bg/layer3.svg')", + 'enchanted-forest-layer-4': "url('img/hero-bg/layer4.svg')", }, extend: { backgroundPosition: { From 0e69e24a93dc285f4a71df76a241fecf6f228436 Mon Sep 17 00:00:00 2001 From: Zach Date: Mon, 16 Oct 2023 14:15:38 -0400 Subject: [PATCH 3/4] Create parallax effect on hero background --- index.html | 344 +++++++++++++++++++++++++++-------------------------- main.css | 32 +++++ styles.css | 91 ++++++++++---- 3 files changed, 276 insertions(+), 191 deletions(-) diff --git a/index.html b/index.html index 53b835c..a05c986 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -36,185 +36,193 @@

DandyHacks ‘23

src="https://s3.amazonaws.com/logged-assets/trust-badge/2024/mlh-trust-badge-2024-white.svg" alt="Major League Hacking 2024 Hackathon Season" style="width: 100%" /> -
-
-
- The logo of DandyHacks 2023 -
-

DandyHacks ‘23

-

November 3-5

-
-
-
- Register - Join Discord +
+
+
+
+
+
+
-
-
-
-
- -
-

What is DandyHacks?

-
-

- DandyHacks is the University of Rochester’s annual 42-hour long - hackathon. This year will be our 11th anniversary, and we’re so excited - to hold this amazing milestone in-person! As a fully student-led - organization at a tier 1 research university, we embody our school’s - values, encouraging participants to question the world and learn more. -
-
- DandyHacks is very beginner-friendly, and we welcome students from all - backgrounds and majors. Participating in DandyHacks is not just about - winning; it is about collaborating with peers, learning from mentors, - and gaining valuable experiences. This year, DandyHacks will take place - on Nov 3-5 in the Feldman Ballroom. We hope to see you there! -

+
+
+ The logo of DandyHacks 2023 +
+

DandyHacks ‘23

+

November 3-5

+
+
+
+ Register + Join Discord +
- -
-
-
-

FAQS

-
-
- - What is a hackathon? - - -

- A hackathon is an event in which people meet to collaboratively - build their ideas using technology. -

-
-
- - Who is eligible to participate? - - -

- Any graduate or undergraduate student over the age of 18 enrolled in - a North American institution of higher education is eligible. All hackers must be - vaccinated and are encouraged to mask while indoors. -

-
-
- - Do I have to pay to participate? - - -

- Hackers do not have to pay to participate. Hackers just need to - register and check-in upon arrival. Registration will open up in - early September, but you may join discord and follow us on Instagram - @dandyhacks to - stay up to date on all things DandyHacks! -

-
-
- - Will the hackathon be in-person or virtual? - - -

- The hackathon will be fully in-person with a couple online - workshops. -

-
-
- - What safety protocols are in place to protect the community? - - +
+
+ +
+

What is DandyHacks?

+

- University of Rochester COVID-19 protocols. + DandyHacks is the University of Rochester’s annual 42-hour long + hackathon. This year will be our 11th anniversary, and we’re so excited + to hold this amazing milestone in-person! As a fully student-led + organization at a tier 1 research university, we embody our school’s + values, encouraging participants to question the world and learn more. +
+
+ DandyHacks is very beginner-friendly, and we welcome students from all + backgrounds and majors. Participating in DandyHacks is not just about + winning; it is about collaborating with peers, learning from mentors, + and gaining valuable experiences. This year, DandyHacks will take place + on Nov 3-5 in the Feldman Ballroom. We hope to see you there!

-
-
- - Will I work individually or with a team? - - -

- You can work individually or with a team. Each team can have a - maximum of 4 people, and don’t worry if you don’t have a team yet! - We will make time and communication channels for you to find a team. -

-
-
- - Can I start hacking before the event? - - -

- You may not start hacking before the event, but you can start - planning and gathering resources. -

-
-
- - I still have questions… - - -

- Reach out to us at greetings@dandyhacks.net or reach out to us on - Instagram - @dandyhacks! -

-
+
+
-