Skip to content

Add workshop link for Flavorless, fix CSS & reorder YSWS's #13

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

Open
hippogriff101 wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Add workshop link for Flavorless, fix CSS & reorder YSWS's #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f1f24f8
Add workshop button!
hippogriff101 Feb 18, 2026
e07ea4a
Add some CSS :sob:?
hippogriff101 Feb 18, 2026
465310d
Reordering the YSWS!!!
hippogriff101 Feb 18, 2026
3abd9cb
Gamer_Waves suggestion!
hippogriff101 Feb 18, 2026
772a26d
Add club levels section to workshop information
hippogriff101 Feb 19, 2026
1c8b676
Update index.html
hippogriff101 Feb 21, 2026
eeedf6a
Update index.html
hippogriff101 Feb 21, 2026
a39259c
Update index.html
hippogriff101 Feb 21, 2026
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
48 changes: 25 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,20 +54,20 @@ <h1>Hack Club: Web Dev Series</h1>
<a href="https://forms.hackclub.com/toppings-workshop"><button class="box-btn">run a workshop!</button></a>
</div>
<div class="arrow">↓</div>
<div class="flow-indicator">and if you want to discover css frameworks, try doing...</div>
<div class="box" style="--box-bg: #c10007; --box-title: #ffdf20; --box-desc: white;">
<img class="box-img" src="./imgs/grub.png" alt="Box Image" />
<div class="flow-indicator">if you want to focus on HTML & start learning JS, do...</div>
<div class="box" style="--box-bg: #ffffff; --box-title: #000000; --box-desc: #000000;">
<img class="box-img" src="./imgs/flavorless.png" style="height: auto;" alt="Flavorless logo" />
<div class="box-content">
<div class="box-title">Grub</div>
<div class="box-desc"><strong>Build a website using the Tailwind CSS framework, and get free junk food!</strong></div>
<div class="box-desc">Estimated time: 1-2 hours</div>
<div class="price-tag">$6-10</div>
<div class="box-title">Flavorless</div>
<div class="box-desc"><strong>Build a website using only HTML and JavaScript! No <s>CSS</s> allowed!</strong></div>
<div class="box-desc">Estimated time: 1 hour</div>
<div><strong>get a sticker sheet</strong></div>
</div>
<a href="https://grub.hackclub.com"><button class="box-btn">check it out!</button></a>
<a href="https://forms.hackclub.com/grubworkshop"><button class="box-btn">run a workshop!</button></a>
<a href="https://flavorless.hackclub.com/?utm_source=webdev"><button class="box-btn-flavorless">check it out!</button></a>
<a href="https://forms.hackclub.com/flavorless-workshop"><button class="box-btn-flavorless">run a workshop!</button></a>
</div>
<div class="arrow">↓</div>
<div class="flow-indicator">if you wanna learn JavaScript, do...</div>
<div class="flow-indicator">if you wanna learn JavaScript and strengthen your other skills, do...</div>
<div class="box" style="--box-bg: #f8b84f; --box-title: #715547; --box-desc: #000;">
<img class="box-img" src="./imgs/waffles.jpg" alt="Box Image" />
<div class="box-content">
Expand All @@ -78,6 +78,19 @@ <h1>Hack Club: Web Dev Series</h1>
</div>
<a href="https://waffles.hackclub.com"><button class="box-btn">check it out!</button></a>
<a href="https://forms.hackclub.com/waffles-workshop"><button class="box-btn">run a workshop!</button></a>
</div>
<div class="arrow">↓</div>
<div class="flow-indicator">and if you want to discover CSS frameworks, try doing...</div>
<div class="box" style="--box-bg: #c10007; --box-title: #ffdf20; --box-desc: white;">
<img class="box-img" src="./imgs/grub.png" alt="Box Image" />
<div class="box-content">
<div class="box-title">Grub</div>
<div class="box-desc"><strong>Build a website using the Tailwind CSS framework, and get free junk food!</strong></div>
<div class="box-desc">Estimated time: 1-2 hours</div>
<div class="price-tag">$6-10</div>
</div>
<a href="https://grub.hackclub.com"><button class="box-btn">check it out!</button></a>
<a href="https://forms.hackclub.com/grubworkshop"><button class="box-btn">run a workshop!</button></a>
</div>
<div class="arrow">↓</div>
<div class="flow-indicator">if you wanna learn a modern web development framework, do...</div>
Expand All @@ -92,18 +105,6 @@ <h1>Hack Club: Web Dev Series</h1>
<a href="https://reactive.hackclub.dev"><button class="box-btn">check it out!</button></a>
<a href="https://forms.hackclub.com/reactive-workshop"><button class="box-btn">run a workshop!</button></a>
</div>
<div class="arrow">↓</div>
<div class="flow-indicator">if you wanna go back to the basics, do...</div>
<div class="box" style="--box-bg: #ffffff; --box-title: #000000; --box-desc: #000000;">
<img class="box-img" src="./imgs/flavorless.png" style="height: auto;" alt="Flavorless logo" />
<div class="box-content">
<div class="box-title">Flavorless</div>
<div class="box-desc"><strong>Build a website using only HTML and Javascript! No <s>CSS</s> allowed!</strong></div>
<div class="box-desc">Estimated time: 1 hour</div>
<div><strong>get a sticker sheet</strong></div>
</div>
<a href="https://flavorless.hackclub.com/?utm_source=webdev"><button>check it out!</button></a>
</div>
<div class="fulfillment-section">
<div class="ended-note">
<h2>Old Events!</h2>
Expand Down Expand Up @@ -174,9 +175,10 @@ <h4>Reimbursement</h4>
</div>
<h3>Running a workshop?</h3>
<p>Want to run a workshop and get the We Ships that same day? Hack yeah! Just send a message in #leaders and we will help you!</p>
<h3>Club Levels</h3>
<p>All of these Workshops can help your club level up, see <a href="https://leaders.hackclub.com/my-club">the club leaders portal</a> for more information.</p>
</div>
</div>

<footer class="footer">
<p>Made with a whole bunch of Boba, Creemees with sprinkles, Hamburgers, Waffles, Popcorn and <i>a little more boba</i> by <a href="https://hackclub.com">Hack Club</a></p>
</footer>
Expand Down
3 changes: 3 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,9 @@ p, h2 {
.box-btn-white:hover {
background: #c8c8c8;
}
.box-btn-flavorless {
margin-left: 2rem;
}
Comment on lines +186 to +188
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

box-btn-flavorless only sets margin-left, but the new Flavorless buttons no longer use the shared .box-btn styling (background, padding, hover, mobile breakpoint overrides). This will likely render unstyled buttons and break the responsive layout. Consider using class="box-btn" (and if you need spacing tweaks, add an additional modifier class on top), or redefine .box-btn-flavorless to include the full button styles / update the mobile media query to cover it.

Copilot uses AI. Check for mistakes.
.box-img {
width: 80px;
height: 80px;
Expand Down