diff --git a/images/alpine-card.jpg b/images/alpine-card.jpg new file mode 100644 index 0000000..dcfdb62 Binary files /dev/null and b/images/alpine-card.jpg differ diff --git a/images/blossom-card.jpg b/images/blossom-card.jpg new file mode 100644 index 0000000..0d97b9f Binary files /dev/null and b/images/blossom-card.jpg differ diff --git a/images/blot-float.png b/images/blot-float.png new file mode 100644 index 0000000..29bafb5 Binary files /dev/null and b/images/blot-float.png differ diff --git a/images/evergreen-logo.png b/images/evergreen-logo.png new file mode 100644 index 0000000..0d84fd1 Binary files /dev/null and b/images/evergreen-logo.png differ diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000..2a9f3f3 Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/halo-card.jpg b/images/halo-card.jpg new file mode 100644 index 0000000..972a9c4 Binary files /dev/null and b/images/halo-card.jpg differ diff --git a/images/harvest-card.jpg b/images/harvest-card.jpg new file mode 100644 index 0000000..0c742d7 Binary files /dev/null and b/images/harvest-card.jpg differ diff --git a/images/horizon-card.png b/images/horizon-card.png new file mode 100644 index 0000000..ca22b41 Binary files /dev/null and b/images/horizon-card.png differ diff --git a/images/lonestar-card.jpg b/images/lonestar-card.jpg new file mode 100644 index 0000000..6d84264 Binary files /dev/null and b/images/lonestar-card.jpg differ diff --git a/images/onboard-float.png b/images/onboard-float.png new file mode 100644 index 0000000..ea1ffbb Binary files /dev/null and b/images/onboard-float.png differ diff --git a/images/programmer-card.jpg b/images/programmer-card.jpg new file mode 100644 index 0000000..3bace2e Binary files /dev/null and b/images/programmer-card.jpg differ diff --git a/images/spark-card.jpg b/images/spark-card.jpg new file mode 100644 index 0000000..f5ba92e Binary files /dev/null and b/images/spark-card.jpg differ diff --git a/images/village-float.png b/images/village-float.png new file mode 100644 index 0000000..457ad3a Binary files /dev/null and b/images/village-float.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..efab850 --- /dev/null +++ b/index.html @@ -0,0 +1,249 @@ + + + + + + Evergreen: Seattle Day of Service + + + + + + + + +
+
+
+
+ +
May 3rd, 2024 | Seattle, WA
+
+
+
+
+
+
+
What is a Day of Service?
+
+

Days of Service is Hack Club's initiative to support girls learning to code.

+

Working with local youth organizations, high school Hack Club leaders run one-day coding events (a day of service) that help girls and gender minorities write their first lines of code. They might build their first ever website, video game, application, and even code a robot arm to draw!

+

Built for beginners learning to code, girls are supported by experienced Hack Clubbers. By the end of the day, every single participant builds something with code. In 2023, Hack Club girls ran Days of Service in 6 cities, and in 2024 they'll increase events to more than 10 cities.

+
+
+
+
+
+
+
Tracks
+
+

A track is a series of workshops for a specific coding subject that you will learn about during the hackathon!

+
+
+
+
+
+
+ The floating image for the Blot track. +
+
Computer Generated Art w/ Blot
+

In this workshop, participants will learn to create computer-generated art by drawing assorted shapes from our guides. They'll use Blot, a robotic arm created by Hack Club that translates code to creation. With this track, attendees will learn JavaScript and digitial fabrication. After students complete this track, they'll be shipped their own robot arm to draw out their creation!

+
+
+
+
+
+ The floating image for the OnBoard track. +
+
Circuit Board Design w/ OnBoard
+

In this workshop, participants will learn the fundamentals of circuit board design with Hack Club's OnBoard program. They'll use EasyEDA, a circuit design software, to complete this. Attendees will learn to use that software as well as the basics of PCB design. After students complete this track, they'll be shipped their PCB to have a physical copy of their creation!

+
+
+
+
+
+ The floating image for the 3D Village track. +
+
Build a 3D Village w/ Spline
+

In this workshop, participants learn the fundamentals of 3D modeling by building their own 3D village. They'll use Spline, a web-based 3D design tool, to accomplish this. Spline allows them to add interactivity and customize their design. With this track, attendees will learn the basics of working in 3D, which they can then use for websites, games, animation, and even 3D printing!

+
+
+
+
+
+
+
+
FAQS
+
+
+
+
+
+
+
+
How much does attendance cost?
+

Attendance is free thanks to Hack Club's support!

+
+
+
+
+
What is Evergreen?
+

Evergreen is a Days of Service event that aims to teach teens how to code and build their own project.

+
+
+
+
+
What if I've never coded before?
+

That's perfectly okay! We will have workshops to teach you!

+
+
+
+
+
+
+
What should I bring?
+

You should bring a laptop. We also have Chromebooks available if you don't have a laptop.

+
+
+
+
+
Will I need a team?
+

You can work by yourself or in a team! The goal is to create something that you're proud of.

+
+
+
+
+
Where does Evergreen take place?
+

Evergreen will take place at the Amazon HQ in Seattle.

+
+
+
+
+
+
+
What if I am not from the Renton School District?
+

That's totally okay! Any high schooler can attend.

+
+
+
+
+
My parents or I have another question.
+

No worries! Contact nila@hackclub.com with any questions you may have.

+
+
+
+
+
+
+
+
Previous Events
+
+ +
+
+
+
+
+
+

REGISTER HERE

 +
+
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7b509a8 --- /dev/null +++ b/style.css @@ -0,0 +1,354 @@ +@import +url('https://fonts.googleapis.com/css2?family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Nunito+Sans:opsz@6..12&display=swap'); + +body{ + background-color: #C3DBB1; + font-family: Krub, sans-serif; + margin: 0; + color: black; + font-weight: 500; + text-align: center; + +} + +/* Vertical Navigation bar */ + +nav ul{ + list-style-type: none; + text-align: center; + margin: 0 auto; + font-weight: bold; + +} + +nav li{ + display: inline; + padding-left: 8px; + padding-right: 8px; +} + +nav a{ + text-decoration: none; +} + +nav a:link{ + color: white; +} + +nav a:visited{ + color: white; +} + +nav a:hover{ + color: lightgrey; +} + +nav a:active{ + color: white; +} + +.navbar-custom { + background-color:#94B17E; +} + +main{ + max-width: 1000px; + margin: 20px auto; +} + +.carousel-item p{ + color: white; + text-align: center; + padding-top: 10px; +} + +.logo { + text-align: center; + padding-bottom: 15px; +} + +.hc{ + font-family: 'Krub', sans-serif; + color: white; +} + +h5{ + font-family: 'Krub', sans-serif; + text-align: center; + font-weight: bold;; +} + +.headers-two h5 { + font-family: 'Krub', sans-serif; + text-align: left; + font-weight: bold; +} + +.socials li{ + color: white; + text-align: center; + list-style-type: none; + text-align: center; + margin: 0 auto; + font-weight: bold; + display: inline; + padding-left: 10px; + padding-right: 10px; +} + +.socials a:link{ + color: white; +} + +.socials a:visited{ + color: white; +} + +.socials a:hover{ + color: grey; +} + +#carousel-control-prev{ + text-color: white; +} + +#carousel-control-next{ + text-color: white; +} + +.headers-dos{ + text-align: center; + color: white; + display: inline-block; + background-color:#94B17E; + border-radius: 25px; + width: 275px; + padding-top: 8px; + padding-bottom: 2px; + marin-top: 30px; + margin-bottom: 30px; +} + +.headers-tracks{ + text-align: center; + color: white; + display: inline-block; + background-color:#94B17E; + border-radius: 25px; + width: 100px; + padding-top: 8px; + padding-bottom: 2px; + marin-top: 30px; + margin-bottom: 30px; +} + +.headers-faq{ + text-align: center; + color: white; + display: inline-block; + background-color:#94B17E; + border-radius: 25px; + width: 100px; + padding-top: 8px; + padding-bottom: 2px; + marin-top: 25px; + margin-bottom: 50px; +} + +.headers-prev{ + text-align: center; + color: white; + display: inline-block; + background-color:#94B17E; + border-radius: 25px; + width: 200px; + padding-top: 8px; + padding-bottom: 2px; + marin-top: 30px; + margin-bottom: 30px; +} + +.headers-two{ + text-align: left; + color: white; + display: inline-block; + background-color:#94B17E; + border-radius: 50px; + width: 875px; + height: 175px; + padding-top: 30px; + padding-left: 10px; + padding-right: 5px; + margin-top: 10px; + margin-bottom: 30px; +} + +.floats { + float: left; + padding-left: 20px; + padding-right: 25px; + padding-bottom: 30px; + padding-top: 10px; + +} + +.headers-two a:link{ + color: black; + list-style-type: none; +} + +.headers-two a:visited{ + color: white; +} + +.headers-two a:hover{ + color: green; +} + +.events-decor{ + border: solid white 3px; + margin-bottom: 20px; +} + +.faq{ + color: black; + text-align: center; + display: inline-block; + border: solid white 5px; + width: 275px; + height: 150px; + padding-top: 10px; + margin-bottom: 45px; +} + +.faq-space a:link{ + color: black; + text-decoration: none; +} + +.faq-space a:visited{ + color: white; +} + +.faq-space a:hover{ + color: green; +} + +.faq-space{ + color: black; + text-align: center; + display: inline-block; + border: solid white 5px; + width: 275px; + height: 150px; + padding-top: 10px; + margin-bottom: 45px; +} + +.carousel-control-prev{ + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 4%; +} + +.carousel-control-next{ + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 4%; +} + +.carousel .item { + min-height: 330px; + text-align: center; + overflow: hidden; +} + +.register-button{ + text-align: center; + color: white; + border: solid white 3px; + display: inline-block; + font-weight: bolder; + background-color:#94B17E; + border-radius: 50px; + width: 400px; + padding-top: 8px; + padding-bottom: 2px; + margin-top: 20px; + margin-bottom: 8px; +} + +.register-button a:link{ + color: white; +} + +.register-button a:visited{ + color: white; +} + +.register-button a:hover{ + color: white; + text-decoration: none; +} + +footer{ + text-align: center; + border-top: 1px gray; + padding: 10px; +} + +/* CSS for Tablets */ +@media only screen and (max-width: 1024px){ + h1{ + font-size: 2em; + } + + .headers-two{ + width: 100%; + height: 100%; + } + .carousel-inner { + position: relative; + width: 100%; + overflow: hidden; + display: inline-flex; + height: 320px; + } +} + +/* CSS for Smartphones */ +@media only screen and (max-width: 768px) { + h1{ + font-size: 1.5em; + } + + .headers-two{ + width: 100%; + height: 92%; + } + + section[data-section-id="6310690285fdc040c4e8e871"] .summary-item { + width: 101.5% !important; + } + + section[data-section-id="6310690285fdc040c4e8e871"] .summary-item .img-wrapper img { + width: 100% !important; + height: 100% !important; + } +} + +/* .carousel-inner { + position: relative; + display: inline-block; + overflow: hidden; + display: inline-flex; + height: 320px; + max-width: 100%; + height: 100%; + } */ + +}