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

Revamped website. #6

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Revamped website. #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d34103
Revamped website.
MaxNguyen5040 Apr 4, 2023
7540065
Fixed venue images.
MaxNguyen5040 Apr 6, 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
0 images/.gitkeep → Old_images/.gitkeep
View file
Open in desktop
File renamed without changes.
0 images/png/DI-sponsored-1line.png → Old_images/png/DI-sponsored-1line.png
View file
Open in desktop
File renamed without changes
0 images/png/DI-sponsored.png → Old_images/png/DI-sponsored.png
View file
Open in desktop
File renamed without changes
0 images/png/desktop.ini → Old_images/png/desktop.ini
View file
Open in desktop
File renamed without changes.
0 images/png/hftw-dark.png → Old_images/png/hftw-dark.png
View file
Open in desktop
File renamed without changes
0 images/png/hftw-light.png → Old_images/png/hftw-light.png
View file
Open in desktop
File renamed without changes
0 images/png/hftw-small.png → Old_images/png/hftw-small.png
View file
Open in desktop
File renamed without changes
0 images/png/net.png → Old_images/png/net.png
View file
Open in desktop
File renamed without changes
0 images/png/parallax1.png → Old_images/png/parallax1.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/balsamiq.png → Old_images/png/sponsors/balsamiq.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/blacklineit.png → Old_images/png/sponsors/blacklineit.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/boxed-water.png → Old_images/png/sponsors/boxed-water.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/cisco.png → Old_images/png/sponsors/cisco.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/dealerinspire-logo.png → ...mages/png/sponsors/dealerinspire-logo.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/desktop.ini → Old_images/png/sponsors/desktop.ini
View file
Open in desktop
File renamed without changes.
0 images/png/sponsors/discord.png → Old_images/png/sponsors/discord.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/dolby.png → Old_images/png/sponsors/dolby.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/github.png → Old_images/png/sponsors/github.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/hack-club.png → Old_images/png/sponsors/hack-club.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/huskie.png → Old_images/png/sponsors/huskie.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/juniper.png → Old_images/png/sponsors/juniper.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/meson-sabika.png → Old_images/png/sponsors/meson-sabika.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/msctek.png → Old_images/png/sponsors/msctek.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/nvisia.png → Old_images/png/sponsors/nvisia.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/paloalto.png → Old_images/png/sponsors/paloalto.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/replit.png → Old_images/png/sponsors/replit.png
View file
Open in desktop
File renamed without changes
0 images/png/sponsors/stickermule.png → Old_images/png/sponsors/stickermule.png
View file
Open in desktop
File renamed without changes
0 images/webp/DI-sponsored-1line.webp → Old_images/webp/DI-sponsored-1line.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/DI-sponsored.webp → Old_images/webp/DI-sponsored.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/embed.jpg → Old_images/webp/embed.jpg
View file
Open in desktop
File renamed without changes
0 images/webp/hftw-dark.webp → Old_images/webp/hftw-dark.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/hftw-light.webp → Old_images/webp/hftw-light.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/hftw-small.webp → Old_images/webp/hftw-small.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/net.webp → Old_images/webp/net.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/parallax1.webp → Old_images/webp/parallax1.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/balsamiq.webp → Old_images/webp/sponsors/balsamiq.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/blacklineit.webp → Old_images/webp/sponsors/blacklineit.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/boxed-water.webp → Old_images/webp/sponsors/boxed-water.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/cisco.webp → Old_images/webp/sponsors/cisco.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/dealerinspire-logo.webp → ...ges/webp/sponsors/dealerinspire-logo.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/discord.webp → Old_images/webp/sponsors/discord.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/dolby.webp → Old_images/webp/sponsors/dolby.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/github.webp → Old_images/webp/sponsors/github.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/hack-club.webp → Old_images/webp/sponsors/hack-club.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/huskie.webp → Old_images/webp/sponsors/huskie.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/juniper.webp → Old_images/webp/sponsors/juniper.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/meson-sabika.webp → Old_images/webp/sponsors/meson-sabika.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/msctek.webp → Old_images/webp/sponsors/msctek.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/nvisia.webp → Old_images/webp/sponsors/nvisia.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/paloalto.webp → Old_images/webp/sponsors/paloalto.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/replit.webp → Old_images/webp/sponsors/replit.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/sponsors/stickermule.webp → Old_images/webp/sponsors/stickermule.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/venue-img1.webp → Old_images/webp/venue-img1.webp
View file
Open in desktop
File renamed without changes.
0 images/webp/venue-img2.webp → Old_images/webp/venue-img2.webp
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# HackFTWSite
The official website for the Hack For the World hackathon held in Naperville, IL

Live at: https://hackftw.net
Live at: https://hackforthe.world
Empty file removed contact/index.html
View file
Open in desktop
Empty file.
Empty file removed contact/script.js
View file
Open in desktop
Empty file.
Binary file added images/down-arrow.png
View file
Open in desktop
0 icons/favicon-32x32.png → images/favicon-32x32.png
View file
Open in desktop
File renamed without changes
Binary file added images/logo.png
View file
Open in desktop
Binary file removed images/png/venue-img1.png
View file
Open in desktop
Diff not rendered.
Binary file removed images/png/venue-img2.png
View file
Open in desktop
Diff not rendered.
Binary file added images/rainforest2.jpg
View file
Open in desktop
Binary file added images/venue-img.png
View file
Open in desktop
Binary file added images/venue-img3.png
View file
Open in desktop
213 changes: 84 additions & 129 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,131 +1,86 @@
<!DOCTYPE html>
<html lang=en>
<head>
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/icons/site.webmanifest">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#0065ff">
<link rel="shortcut icon" href="/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#0065ff">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta name="description" content="The official site of the HackFTW hackathon for high schoolers held in Naperville, IL, aimed at solving tropical deforestation." />
<meta name="keywords" content="hackftw,naperville hackathon,chicago hackathon,hackathon,global goals" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="HackFTW" />
<meta property="og:description" content="The official site of the HackFTW hackathon for high schoolers held in Naperville, IL, aimed at solving tropical deforestation." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://hackftw.cf" />
<meta property="og:image" content="http://hackftw.cf/images/embed.jpg" />
<meta property="og:image:secure_url" content="https://hackftw.cf/images/webp/embed.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<title>Hack For the World</title>
<link rel="stylesheet" href="style.css">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Chakra+Petch:400,700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chakra+Petch:400,700&display=swap" rel="stylesheet">
</noscript>
</head>
<body>

<div id = "navbar" class = "sticky">
<a id = "contact" title = "Contact us" onclick = "window.open('mailto:[email protected]', 'mail');event.preventDefault()">Contact</a>
<a id = "venue" title = "Information on the venue" href = "/venue/">Venue</a>
<a id = "slack" title = "Join our Discord" href = "https://discord.gg/5TFkRFhC6s">Discord</a>
<div id = "hftw" onclick="window.location.href = '/#'">
<img class="dark-logo big" onmouseover="hover(this)" onmouseout="unhover(this)" src="/images/png/hftw-light.png">
<picture>
<source srcset="images/webp/hftw-small.webp" type="image/webp">
<img class = "dark-logo small" title="HackFTW" src="images/png/hftw-light.png">
</picture>
</div>
</div>

<div id = "logo-parent">
<div id = "logo-div">
<h id = "logo-caption">What can you make in 12 hours <br id = "break">that could change the world?</h>
<p id = "place-and-date">8am-8pm CST on April 8th, 2023 @ <a id = "dealer-inspire-directions" href = "/venue/">Naperville North High School</a> </p>
<a id = "eventbrite-widget-modal-trigger-1" title = "Register for HackFTW" class="register-button open" href="https://docs.google.com/forms/d/e/1FAIpQLSfE1zbWK_3jcNO8lReq78FyMoNuktH1hnfL63IHw-X87qVLyA/viewform" target="_blank">Fill out our registration form!</a> <!-- Register on Devpost » | Registration is closed-->
</div>
</div>

<div id="description-faq">
<p id="promo-paragraph">Hack For the World is a 12-hour hackathon for high-schoolers. Students from across the Chicagoland area will come for the weekend, teaming up (or going solo) to build an app, game, or website. We’ll provide free meals & drinks. In the evening, judges will pick the best projects to demo for everyone and win prizes. There'll be raffles and giveaways throughout the event as well! You’ll meet people, create amazing new things, & most importantly, have fun.</p>
<h id="faq" class="title">Frequently Asked Questions</h>
<div class="faq-item" id="item1"><strong>How much does it cost?</strong><br>Nothing! Registration and attendance are 100% free, with meals, drinks, swag, & workshops included.</div>
<div class="faq-item" id="item2"><strong>Who can participate?</strong><br>Any current student grades 9–12. If you’re under that age, send an email to us <a id="hereLink" onclick="javascript:window.open('mailto:[email protected]', 'mail');event.preventDefault()">here.</a></div>
<div class="faq-item" id="item3"><strong>Hacking!? Is that safe?</strong><br>Hold up! No, we’re not “hacking” servers or databases. The word is being constructively re-defined as building things—apps, games, websites, etc. At HackFTW, it’s all safe, supervised, & entirely educational.</div>
<div class="faq-item" id="item4"><strong>What if I’m new to coding?</strong><br>At HackFTW, complete beginners are not only welcome, but expected! Learn as you go with our intro workshops & mentors.</div>
<div class="faq-item" id="item6"><strong>What if I can already code?</strong><br>HackFTW is for you, too! We welcome (and have prizes for) absolute beginners, experts, & everyone in between.</div>
<div class="faq-item" id="item7"><strong>Do I need a team?</strong><br>Nope! You’ll have an opportunity to meet fellow hackers and make teams of up to 4; find some new friends, bring yours, or work alone.</div>
<div class="faq-item" id="item8"><strong>What should I bring?</strong><br>Plan to bring a student ID, computer (any kind), chargers, and anything else for your hack (e.g. hardware).</div>
<div class="faq-item" id="item5"><strong id = "item9-strong1">Who runs this? Is it supervised?</strong><br id = "item9-br"></strong><br>We’re independently-organized by high schoolers in the Naperville area, mainly Naperville North Computer Science Club members. It’s fully supervised by adult mentors & chaperones.</div>
<div class="faq-item" id="item9"><strong>What can I make?</strong><br>Due to rapid tropical deforestation, this year's theme is based on rainforests/improving the general tropical environment. Think outside of the box! We encourage students to channel their creativity into their projects. Create a talking AI that promotes meatless burgers or develop a game where players race to replant trees. The sky’s the limit! </div>
</div>

<div id="sponsors-list">
<!-- <h id="sponsors-title" class="title">Sponsors</h>
<p id="platinum" class="sponsors-subtitle">Platinum Sponsors</p>
<div id="platinum-sponsors" class="sponsor-group">
<a href = "https://www.dealerinspire.com/">
<picture>
<source srcset="/images/webp/sponsors/dealerinspire-logo.webp" type="image/webp">
<img title = "Dealer Inspire" src = "../images/png/sponsors/dealerinspire-logo.png">
</picture>
</a>

</div>
<p id="gold" class="sponsors-subtitle">Gold Sponsors</p>
<div id="gold-sponsors" class="sponsor-group">
</div>
<p id="silver" class="sponsors-subtitle">Silver Sponsors</p>
<div id="silver-sponsors" class="sponsor-group">

</div> -->
</div>

<div id="register2">
<div id="register2-shade">
<h id="what-are-you-waiting-for">What are you waiting for?</h> <!-- What are you waiting for? | Thanks to all participants!-->
<a id="eventbrite-widget-modal-trigger-2" title = "Register for HackFTW" class="register-button-2 open" href="https://docs.google.com/forms/d/e/1FAIpQLSfE1zbWK_3jcNO8lReq78FyMoNuktH1hnfL63IHw-X87qVLyA/viewform" target="_blank">Fill out our registration form!</a> <!-- Register on Devpost » | Registration is closed-->
</div>
</div>



<!-- Noscript content for added SEO -->
<noscript><a href="https://www.eventbrite.com/e/hack-for-the-world-chicago-registration-79974063577" rel="noopener noreferrer" target="_blank"></noscript>
<!-- You can customize this button any way you like -->
<noscript></a>Buy Tickets on Eventbrite</noscript>

<!-- <script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type = "text/javascript">
var exampleCallback = function() {
console.log('Order complete!');
};

window.EBWidgets.createWidget({
widgetType: 'checkout',
eventId: '79974063577',
modal: true,
modalTriggerElementId: 'eventbrite-widget-modal-trigger-1',
onOrderComplete: exampleCallback
});

window.EBWidgets.createWidget({
widgetType: 'checkout',
eventId: '79974063577',
modal: true,
modalTriggerElementId: 'eventbrite-widget-modal-trigger-2',
onOrderComplete: exampleCallback
});
</script> -->

<script src="script.js"></script>
</body>
<html>
<head>
<title>Hack For The World</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="images\favicon-32x32.png" type="image/x-icon">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt="HackFTW logo">
</a>
</div>
<ul class="nav-links">
<li><a href="venue.html"><button id="venue-button">Venue</button></a></li>
<li><a href="mailto:[email protected]"><button id="contact-button">Contact</button></a></li>
<li><a href="https://discord.gg/5TFkRFhC6s" target="_blank"><button id="discord-button">Discord</button></a></li>
</ul>
</nav>
<section class="main">
<h1>Hack For The World 2023</h1>
<div class="event-info">
<h2>Hack For the World is a 12-hour hackathon for high-schoolers. Students from across the Chicagoland area will come for the weekend, teaming up (or going solo) to build an app, game, or website. We’ll provide free meals & drinks. In the evening, judges will pick the best projects to demo for everyone and win prizes. There'll be raffles and giveaways throughout the event as well! You’ll meet people, create amazing new things, & most importantly, have fun.</h2>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfE1zbWK_3jcNO8lReq78FyMoNuktH1hnfL63IHw-X87qVLyA/viewform" target="_blank">Register Now</a>
</div>
<a href="#faq" class="scroll-down">
<img src="images\down-arrow.png" alt="Scroll down" >
</a>
</section>
<section class="faq" id="faq">
<h2>Frequently Asked Questions</h2>
<div class="faq-item">
<h3>How much does it cost?</h3>
<p>Nothing! Registration and attendance are 100% free, with meals, drinks, swag, & workshops included.</p>
</div>
<div class="faq-item">
<h3>Who can participate?</h3>
<p>Any current student grades 9–12. If you’re under that age, send an email to us using the contact button. </p>
</div>
<div class="faq-item">
<h3>Hacking!? Is that safe? </h3>
<p>Hold up! No, we’re not “hacking” servers or databases. The word is being constructively re-defined as building things—apps, games, websites, etc. At HackFTW, it’s all safe, supervised, & entirely educational. </p>
</div>
<div class="faq-item">
<h3>What if I’m new to coding?
</h3>
<p>At HackFTW, complete beginners are not only welcome, but expected! Learn as you go with our intro workshops & mentors.
</p>
</div>
<div class="faq-item">
<h3>What if I can already code?
</h3>
<p>HackFTW is for you, too! We welcome (and have prizes for) absolute beginners, experts, & everyone in between.
</p>
</div>
<div class="faq-item">
<h3>Do I need a team?
</h3>
<p>Nope! You’ll have an opportunity to meet fellow hackers and make teams of up to 4; find some new friends, bring yours, or work alone.
</p>
</div>
<div class="faq-item">
<h3>What should I bring?
</h3>
<p>Plan to bring a student ID, computer (any kind), chargers, and anything else for your hack (e.g. hardware).
</p>
</div>
<div class="faq-item">
<h3>Who runs this? Is it supervised?
</h3>
<p>We’re independently-organized by high schoolers in the Naperville area, mainly Naperville North Computer Science Club members. It’s fully supervised by adult mentors & chaperones.
</p>
</div>
<div class="faq-item">
<h3>What can I make?
</h3>
<p>Due to rapid tropical deforestation, this year's theme is based on rainforests/improving the general tropical environment. Think outside of the box! We encourage students to channel their creativity into their projects. Create a talking AI that promotes meatless burgers or develop a game where players race to replant trees. The sky’s the limit!
</p>
</div>
</section>
<footer>
<p>&copy; 2023 HackFTW</p>
</footer>
</body>
</html>
53 changes: 28 additions & 25 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,33 @@
function canUseWebP() {
var elem = document.createElement('canvas');
// Change color of button on hover

if (!!(elem.getContext && elem.getContext('2d'))) {
// was able or not to get WebP representation
return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
}
const buttons = document.querySelectorAll('.button');

// very old browser like IE 8, canvas not supported
return false;
}

var webp = "png";
buttons.forEach(button => {
button.addEventListener('mouseenter', () => {
button.style.backgroundColor = '#80c49a';
button.style.color = '#fff';
});

button.addEventListener('mouseleave', () => {
button.style.backgroundColor = '#fff';
button.style.color = '#80c49a';
});
});

window.onload = () => {
if (canUseWebP()) {
webp = "webp";
}
console.log(webp)
document.getElementById("logo-parent").style.backgroundImage = "url('images/" + webp + "/parallax1." + webp + "')"
document.getElementById("register2").style.backgroundImage = "url('images/" + webp + "/net." + webp + "')"
}
// Smooth scrolling animation

function hover(element) {
element.setAttribute('src', 'images/' + webp + '/hftw-dark.' + webp);
}
const links = document.querySelectorAll('nav a');

function unhover(element) {
element.setAttribute('src', 'images/' + webp + '/hftw-light.' + webp);
}
links.forEach(link => {
link.addEventListener('click', event => {
event.preventDefault();

const href = link.getAttribute('href');
const offsetTop = document.querySelector(href).offsetTop;

scroll({
top: offsetTop,
behavior: 'smooth'
});
});
});
Loading