Skip to content

Outreach Events Page #29

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

Draft
Synaptic149 wants to merge 18 commits into
base: main
Choose a base branch
from
Draft

Outreach Events Page #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
fa6557e
Start events page
Synaptic149 Jul 27, 2025
c5e9b5e
put image on top of the event card
Synaptic149 Jul 27, 2025
2a04a12
move event card to main.css
Synaptic149 Jul 27, 2025
f3dd0cf
Improve event cards
Synaptic149 Jul 27, 2025
e7be116
add note for season dates
Synaptic149 Jul 27, 2025
94146a1
complete sexton mtn card
Synaptic149 Jul 27, 2025
ed41623
add steam pathways summit
Synaptic149 Jul 27, 2025
d97431c
fill entire top section of event card
Synaptic149 Jul 27, 2025
1c20789
add mpact electronics drive
Synaptic149 Jul 27, 2025
f2fe05b
add whitford fair to outreach events
Synaptic149 Jul 27, 2025
40f2984
add ashcreek-crestwood picnic
Synaptic149 Jul 27, 2025
9e15933
add fusion workshop
Synaptic149 Jul 27, 2025
65aa613
add fll camp
Synaptic149 Jul 27, 2025
99be88e
reduce distance between date and location on events page
Synaptic149 Jul 27, 2025
54d4acb
fix fll camp info order
Synaptic149 Jul 27, 2025
e8ad913
add sidebar component leading to events page
Synaptic149 Jul 27, 2025
880e9c5
update events page name
Synaptic149 Jul 27, 2025
43bd39e
small text updates
Synaptic149 Oct 9, 2025
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
78 changes: 78 additions & 0 deletions src/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4208,4 +4208,82 @@ html, body {

#footer-placeholder {
flex-shrink: 0;
}

.event-container {
border-radius: 8px;
margin-bottom: 2rem;
box-shadow: 0 8px 16px 0 #db211e;
transition: 0.3s;
overflow: hidden;
}

.event-container:hover {
box-shadow: 0 16px 32px 0 #db201e;
}

.event-header {
display: flex;
flex-direction: column;
}

.event-image {
width: 100%;
height: 300px;
overflow: hidden;
}

.event-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.event-info {
width: 100%;
padding: 2rem;
}

.event-title {
font-size: 1.5rem;
font-weight: 600;
color: #fff;
margin: 0 0 0.5rem 0;
}

.event-location {
font-size: 1rem;
margin: 0 0 0 0;
display: flex;
align-items: center;
gap: 0.5rem;
}

.event-location:before {
content: "📍";
font-size: 0.9rem;
}

.event-datetime {
font-size: 1rem;
margin: 0 0 1rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}

.event-datetime:before {
content: "📅";
font-size: 0.9rem;
}

.event-description {
line-height: 1.6;
margin: 0;
}

@media screen and (max-width: 736px) {
.event-image {
height: 200px;
}
}
Binary file added src/assets/images/ashcreekcrestwoodpicnic.jpg
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 src/assets/images/fllcamp.jpg
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 src/assets/images/fusionworkshop.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.
13 changes: 13 additions & 0 deletions src/calendar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,19 @@ <h2>Calendar</h2>
});
</script>
</section>
<hr />
<section>
<div id="sidebar2-placeholder"></div>

<script>
$("#sidebar2-placeholder").load("components/sidebar_content/outreachevents.html", function() {
$().dropotron({
alignment: 'center',
hideDelay: 300
});
});
</script>
</section>
</section>

</div>
Expand Down
3 changes: 3 additions & 0 deletions src/components/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ <h1 id="logo"><span class="hawkbot1cslogo"><a href=""><img src="assets/images/Ha
</li>
<li>
<a href="outreach">Outreach</a>
<ul>
<li><a href="outreach/events">Events</a></li>
</ul>
</li>
<li>
<a href="nonprofit">Nonprofit</a>
Expand Down
7 changes: 7 additions & 0 deletions src/components/sidebar_content/outreachevents.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<h3>Previous Outreach</h3>
<p>See our past outreach events, and how it has made an impact in the community.</p>
<footer>
<ul class="actions">
<li><a href="outreach/events" class="button">Browse Events</a></li>
</ul>
</footer>
233 changes: 233 additions & 0 deletions src/outreach/events/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
<!DOCTYPE HTML>
<!--
Landed by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1XGEJKQ6T2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-1XGEJKQ6T2');
</script>
<title>Previous Outreach Events | Hawkbot1cs</title>
<base href="../../">
<link rel="icon" type="image/x-icon" href="images/Hawkbotics_clear.png">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<style>

</style>
</head>
<body class="is-preload">
<div id="page-wrapper">

<!-- Header -->
<header id="header">
<div id="nav-placeholder"></div>
</header>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Wait for the DOM *and* the snippet
$(function () {
$("#nav-placeholder").load("components/nav.html", function () {
// Activate dropdowns now that #nav exists
$('#nav > ul').dropotron({ alignment: 'center', hideDelay: 300 });

// Dynamically pull in main.js only after navbar is present
$.getScript("assets/js/main.js");
});
});
</script>

<!-- Main -->
<div id="main" class="wrapper style1">
<div class="container">
<header class="major">
<h2>Previous Outreach Events</h2>
<p>What have we done in the past, and what impact have we made?</p>
</header>
<div class="row gtr-150">
<div class="col-8 col-12-medium">

<!-- Content -->
<section id="content">
<p>Hawkbot1cs has participated in many outreach events. You can browse this list to see our past activities.</p>
<p><i>Note: The season dates are based on our seasons, not official FTC season dates.</i></p>
<h3>DECODE</h3>
<div class="event-container">
<div class="event-header">
<div class="event-image">
<img src="assets/images/fllcamp.jpg"/>
</div>
<div class="event-info">
<h3 class="event-title">FLL Camp with Gearforward</h3>
<p class="event-location">Hillsboro Brookwood Library</p>
<p class="event-datetime">July 23rd - August 13th, 2025</p>
<p class="event-description">
Hawkbot1cs and Gearforward ran a weekly FLL camp for younger students. The camp taught students how to build and program robots using LEGO Mindstorms. Students learned the basics of robotics, including sensors, motors, and programming, while also having fun and making new friends. This camp was a great opportunity for students to get hands-on experience with robotics and prepare for future competitions.
</p>
</div>
</div>
</div>
<div class="event-container">
<div class="event-header">
<div class="event-image">
<img src="assets/images/fusionworkshop.png"/>
</div>
<div class="event-info">
<h3 class="event-title">Online Autodesk Fusion Workshop</h3>
<p class="event-datetime">July 25th - 27th, 2025</p>
<p class="event-description">
Our team hosted a FREE online Autodesk Fusion workshop to teach interested students how to use Autodesk Fusion. We designed our workshop for beginners and covered the basics of CAD, including sketching, modeling, and joints. Students learned how to create their own designs and gain valuable skills for future robotics projects.
</p>
</div>
</div>
</div>
<div class="event-container">
<div class="event-header">
<div class="event-image">
<img src="assets/images/ashcreekcrestwoodpicnic.jpg"/>
</div>
<div class="event-info">
<h3 class="event-title">Ashcreek-Crestwood Picnic</h3>
<p class="event-datetime">July 14th, 2025</p>
<p class="event-description">
We presented at the Ashcreek-Crestwood Picnic to promote STEM education and robotics. We showcased our new candy shooter robot and engaged with students and parents, inspiring the next generation of engineers.
</p>
</div>
</div>
</div>
<div class="event-container">
<div class="event-header">
<div class="event-image">
<img src="assets/images/25edriveteam.jpg"/>
</div>
<div class="event-info">
<h3 class="event-title">MPACT Electronics Drive</h3>
<p class="event-location">Al's Garden & Home</p>
<p class="event-datetime">April 26th, 2025</p>
<p class="event-description">
We partnered with MPACT to host an electronics drive at Al's Garden & Home. We collected old electronics, took them apart, and recycled them. We also helped take apart decommissioned laptops from the Beaverton School District. This event helped raise awareness about e-waste and its environmental impact, while also supporting our local community.
</p>
</div>
</div>
</div>
<div class="event-container">
<div class="event-header">
<div class="event-image">
<img src="assets/images/2025sextonmtnfair.jpg"/>
</div>
<div class="event-info">
<h3 class="event-title">Sexton Mountain Science Fair</h3>
<p class="event-location">Sexton Mountain Elementary School</p>
<p class="event-datetime">April 17th, 2025</p>
<p class="event-description">
We presented at the Sexton Mountain Science Fair to promote STEM education and robotics. We showcased our INTO THE DEEP robot, allowed students to drive our new drivetrain, and engaged with students and parents, inspiring the next generation of engineers.
</p>
</div>
</div>
</div>
<div class="event-container">
<div class="event-header">
<div class="event-info">
<h3 class="event-title">STEAM Pathways Summit</h3>
<p class="event-datetime">April 10th, 2025</p>
</div>
</div>
</div>
<h3>INTO THE DEEP</h3>
<div class="event-container">
<div class="event-header">
<div class="event-image">
<img src="assets/images/whitfordfair.jpg"/>
</div>
<div class="event-info">
<h3 class="event-title">Whitford Science Fair</h3>
<p class="event-location">Whitford Middle School</p>
<p class="event-datetime">February 26th, 2025</p>
<p class="event-description">
At the Whitford Science Fair, we showcased our INTO THE DEEP robot and allowed students to drive our small outreach robot. We engaged with students and parents, promoting STEM education and inspiring the next generation of engineers.
</p>
</div>
</div>
</div>
</section>

</div>
<div class="col-4 col-12-medium">

<!-- Sidebar -->
<section id="sidebar">
<section>
<div id="sidebar1-placeholder"></div>

<script>
$("#sidebar1-placeholder").load("components/sidebar_content/calendar.html", function() {
$().dropotron({
alignment: 'center',
hideDelay: 300
});
});
</script>
</section>
<hr />
<section>
<div id="sidebar2-placeholder"></div>

<script>
$("#sidebar2-placeholder").load("components/sidebar_content/outreach.html", function() {
$().dropotron({
alignment: 'center',
hideDelay: 300
});
});
</script>
</section>
</section>

</div>
</div>
</div>
</div>

<!-- Footer -->
<div id="footer-placeholder"></div>

<script>
$("#footer-placeholder").load("components/footer.html", function() {
$('#footer > ul').dropotron({
alignment: 'center',
hideDelay: 300
});
});
</script>

</div>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script>
window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
</script>
<script defer src="/_vercel/speed-insights/script.js"></script>
<script>
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion src/outreach/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ <h3>Our Outreach</h3> <ul>
<div id="sidebar3-placeholder"></div>

<script>
$("#sidebar3-placeholder").load("components/sidebar_content/ftc.html", function() {
$("#sidebar3-placeholder").load("components/sidebar_content/outreachevents.html", function() {
$().dropotron({
alignment: 'center',
hideDelay: 300
Expand Down