Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ship the Prizes section! #45

Merged
merged 9 commits into from
Oct 19, 2023
Merged

Ship the Prizes section! #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
eaab5bd
Add a scale-on-hover effect to various elements :)
cszach Oct 17, 2023
b96d6dc
Add images of prizes
cszach Oct 17, 2023
782e1f8
Rename JPL to JBL Flip 5 (oops)
cszach Oct 19, 2023
490d896
Import prize images as backgrounds in tailwind config
cszach Oct 19, 2023
c0e1b48
Add the Prizes section
cszach Oct 19, 2023
96ea064
Add Prizes as a nav item
cszach Oct 19, 2023
1177fff
Merge pull request #43 from UR-dandyhacks/feature/prizes-section
cszach Oct 19, 2023
e8105ff
Fix some minor finickies while we are at it!
cszach Oct 19, 2023
636723f
Merge pull request #44 from UR-dandyhacks/feature/prizes-section
cszach Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added img/prizes/acer_nitro_monitor.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/prizes/airtag.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/prizes/amazon_fire_stick.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/prizes/desk_lamp.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/prizes/echo_dot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/prizes/jbl_flip_5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/prizes/razer_blackwidow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/prizes/wireless_photo_printer.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 51 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,11 @@ <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
<div class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none peer-checked:pointer-events-auto transition-opacity peer-checked:opacity-50 md:hidden"></div>
<img class="relative z-40 md:hidden" src="img/icons/hamburger.png" />
<ul class="fixed top-0 right-0 z-30 flex flex-col h-screen pt-32 text-3xl font-bold transition-transform gap-8 md:flex-row md:text-xl px-9 md:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 md:bg-deep-purple md:translate-x-0 md:w-fit md:h-fit md:relative md:gap-16 md:transition-none">
<li class="text-right"><a href="#about">About</a></li>
<li class="text-right"><a href="#tracks">Tracks</a></li>
<li class="text-right"><a href="#faq">FAQ</a></li>
<li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#about">About</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#tracks">Tracks</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#prizes">Prizes</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#faq">FAQ</a></li>
<li class="hidden text-right hover:scale-110 transition-transform origin-center lg:block"><a href="#sponsoring">Sponsoring</a></li>
</ul>
</div>
<a id="mlh-trust-badge" style="
Expand Down Expand Up @@ -54,13 +55,13 @@ <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
</div>
</div>
<div class="flex flex-col items-center justify-center font-bold md:flex-row gap-7 md:max-lg:relative md:max-lg:bottom-14">
<a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
<a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
<a class="flex items-center justify-center px-6 py-4 text-xl rounded-full hover-scale lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
<a class="flex items-center justify-center px-6 py-4 text-xl rounded-full hover-scale lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
</div>
</div>
</div>
<div class="flex flex-row items-center justify-center gap-[77px] relative">
<img class="hidden lg:self-start lg:block" src="img/sticker2.png" />
<img class="hidden hover-scale xl:self-start xl:block" src="img/sticker2.png" />
<div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
<h2 class="text-2xl lg:text-5xl">
<div id="about" class="absolute -top-20"></div>
Expand All @@ -83,9 +84,9 @@ <h2 class="text-2xl lg:text-5xl">
</p>
</div>
</div>
<img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
<img class="hidden hover-scale lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
</div>
<div class="relative flex flex-row items-center justify-center text-xl bg-violet">
<div class="relative flex items-center justify-center text-xl bg-violet">
<div class="flex flex-col grow-0 items-center w-full gap-7 lg:gap-11 px-9 lg:px-0 lg:w-[999px] box-border text-base lg:text-xl">
<h2 class="text-5xl">
<div id="tracks" class="absolute -top-20"></div>
Expand All @@ -97,24 +98,24 @@ <h2 class="text-5xl">
track will have different prizes, so pick and choose your track
depending on which prize you want to win!
</p>
<div class="flex flex-col p-12 lg:flex-row gap-12">
<div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6">
<div class="flex flex-row flex-wrap justify-center pt-5 pb-12 lg:pt-1 gap-12">
<div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
<img class="w-40 mx-auto my-9" src="img/tracks/entertainment.svg" alt="A window with a video player" />
<h3 class="mb-4 text-2xl text-center font-display">Entertainment</h3>
<p class="text-center">
What innovative platforms can be created for content creation and
distribution?
</p>
</div>
<div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6">
<div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
<img class="w-40 mx-auto my-9" src="img/tracks/productivity.svg" alt="A to-do lists with 2 items, both of which are checked" />
<h3 class="mb-4 text-2xl text-center font-display">Productivity</h3>
<p class="text-center">
What innovative tools or applications can help streamline workflow
and task management?
</p>
</div>
<div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6">
<div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
<img class="w-40 mx-auto my-9" src="img/tracks/emerging-tech.svg" alt="A gear with a light bulb inside the hole" />
<h3 class="mb-4 text-2xl text-center font-display">Emerging Tech</h3>
<p class="text-center">
Expand All @@ -125,9 +126,28 @@ <h3 class="mb-4 text-2xl text-center font-display">Emerging Tech</h3>
</div>
</div>
</div>
<div id="faq" class="relative px-5 bg-deep-purple">
<div id="particles-js" class="relative px-5 bg-deep-purple">
<div class="flex flex-col items-center justify-center pt-16 gap-10 bg-deep-purple">
<h2 class="text-5xl">
<div id="prizes" class="absolute -top-20"></div>
Prizes
</h2>
<div class="flex flex-wrap justify-center pointer-events-none max-w-7xl gap-6">
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-acer-nitro-monitor bg-violet bg-[bottom_-16px_right_-16px]"><h3>Acer Nitro KG241Y Sbiip 23.8" Monitor</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-razer-blackwidow bg-violet bg-[bottom_-16px_right_-16px]"><h3>Razer BlackWidow V4 with Yellow Switches</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-wireless-photo-printer bg-violet bg-[bottom_-16px_right_-16px]"><h3>Wireless Photo Printer</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-jbl-flip-5 bg-violet bg-[bottom_-16px_right_-16px]"><h3>JBL Flip 5 Speaker</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-desk-lamp bg-violet bg-[bottom_-8px_right_0px]"><h3>Desk Lamp</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-echo-dot bg-violet bg-[bottom_-12px_right_-16px]"><h3>Echo dot 5th gen</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-airtag bg-violet bg-[bottom_-16px_right_-16px]"><h3>AirTag</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-amazon-fire-stick bg-violet bg-[bottom_-16px_right_0px]"><h3>Amazon Fire Stick</h3></div>
</div>
</div>
<div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
<h2 class="text-5xl">FAQS</h2>
<h2 class="text-5xl">
<div id="faq" class="absolute -top-20"></div>
FAQS
</h2>
<div class="flex flex-col px-10 py-4 pointer-events-none lg:py-0 gap-5 lg:px-0">
<details>
<summary>
Expand Down Expand Up @@ -215,13 +235,13 @@ <h2 class="text-5xl">FAQS</h2>
</details>
</div>
</div>
<div class="flex-col items-center hidden mb-24 pointer-events-none lg:flex gap-20">
<div class="flex-col items-center hidden mb-24 lg:flex gap-20">
<h2 class="text-5xl">
<div id="sponsoring" class="absolute -top-20"></div>
Sponsoring
</h2>
<div class="flex flex-row gap-24">
<div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
<div class="flex flex-row pointer-events-none gap-24">
<div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl hover-scale pointer-events-auto">
<h3 class="text-3xl text-center pb-7">What does a sponsor do?</h3>
<p>Sponsors enable us to:</p>
<ul class="list-disc list-inside">
Expand All @@ -230,23 +250,24 @@ <h3 class="text-3xl text-center pb-7">What does a sponsor do?</h3>
from our hackers</b></li>
</ul>
</div>
<div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
<div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl hover-scale pointer-events-auto">
<h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
<p>As a sponsor, you will be able to:</p>
<ul class="list-disc list-inside">
<li>
Connect with top students, and get early access to resumes and
portfolios.
Connect with <b>top students</b>, and get <b>early access</b> to
resumes and portfolios.
</li>
<li>
Showcase your products and see talented students make cool hacks
with them.
<b>Showcase your products</b> and see talented students make
cool hacks with them.
</li>
<li>
Inspire the next generation of developers to find pride and joy in
building awesome things.
<b>Inspire the next generation</b> of developers to find pride
and joy in building awesome things.
</li>
<li>Attract next generation talent for tech development programs.</li>
<li><b>Attract next generation talent</b> for tech development
programs.</li>
</ul>
</div>
</div>
Expand All @@ -256,10 +277,10 @@ <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
<div class="flex flex-col items-center gap-5">
<span class="hidden font-bold lg:inline">[email protected]</span>
<div class="flex gap-2.5 items-center">
<a href="mailto:[email protected]"><img src="img/social/mail.svg"></a>
<a href="https://www.instagram.com/dandyhacks"><img src="img/social/instagram.svg"></a>
<a href="https://www.facebook.com/DandyHacks"><img src="img/social/facebook.svg"></a>
<a href="https://twitter.com/dandyhacks"><img src="img/social/twitter.svg"></a>
<a class="hover:scale-110 transition-transform origin-center" href="mailto:[email protected]"><img src="img/social/mail.svg"></a>
<a class="hover:scale-110 transition-transform origin-center" href="https://www.instagram.com/dandyhacks"><img src="img/social/instagram.svg"></a>
<a class="hover:scale-110 transition-transform origin-center" href="https://www.facebook.com/DandyHacks"><img src="img/social/facebook.svg"></a>
<a class="hover:scale-110 transition-transform origin-center" href="https://twitter.com/dandyhacks"><img src="img/social/twitter.svg"></a>
</div>
</div>
<div class="flex flex-col items-center mb-5 gap-5 lg:mb-0">
Expand Down
6 changes: 5 additions & 1 deletion main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,15 @@
left: 0;
}

#faq > div > * {
#particles-js > div > * {
position: relative;
z-index: 10;
}

.hover-scale, details {
@apply hover:scale-105 transition-transform origin-center;
}

/* Parallax effect */

.wrapper {
Expand Down
2 changes: 1 addition & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,5 @@ document.addEventListener('DOMContentLoaded', () => {

// particles.js

particlesJS.load('faq', 'assets/particlesjs-config.json');
particlesJS.load('particles-js', 'assets/particlesjs-config.json');
});
Loading