forked from pioneers/website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
234 lines (222 loc) · 10.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
---
layout: main
hero-message:
title: Pioneers in Engineering
---
<script type="text/javascript">
//Set image to fill screen
$(".hero-unit").css("height", "-webkit-fill-available");
//Animations below
$("#animate1").css("opacity", 0).show()
$("#animate2").css("opacity", 0).show()
$("#animate-info").hide()
$(".animate-num").css("font-weight", "800")
toThreePlaces = function(num) {
//Returns a string with at least three characters from a num
if(num.toString().length < 3) {
return toThreePlaces(" " + num.toString());
}
return num
}
increment = function(obj, num, last, waitTime) {
$(obj).html(toThreePlaces(num));
if (num < last) {
setTimeout(function() {
increment(obj, num + 1, last, waitTime);
}, waitTime)
}
}
$(document).ready(function() {
setTimeout(function(){
$("#animate1").animate({
opacity: 1.0
}, 3000);
setTimeout(function(){
//Delay second animation slightly before the first one ends
$("#animate2").animate({
opacity: 1.0
}, 2000, function(){
//Second animation callback
countUpTime = 3000; //Millliseconds to count up to the end
$(".animate-num").each(function(index){
count = $(this).data("num");
waitTime = count / countUpTime;
increment(this, 0, count, waitTime);
});
$("#animate-info").slideDown();
})
}, 2000)
}, 1000)
// Add smooth scrolling for links to '/#main' id'd sections
$('a[href^="/#main"]').on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
;
var hash = this.hash;
var scrollToPosition = $(hash).offset().top;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
'scrollTop': scrollToPosition
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
// Force back to end of animation
});
} // End if
});
})
</script>
{% if site.data.recruiting.active %}
<div class ="pie-jumbotron center-text" style="margin-bottom:0; padding-bottom:30px">
<!--
<h2>We're recruiting now for the 2021-2022 school year—check out our events.</h2>
<a class="btn btn-info" target="_blank" href="get-involved/#fall-recruiting" role="button" style="margin-top:15px">Join PiE Staff</a>
-->
<h2>Become a mentor for a high school robotics team! Spring 2021 DeCal now open.</h2>
<a class="btn btn-info" target="_blank" href="get-involved/become-mentor" role="button" style="margin-top:15px">Mentor (DeCal)</a>
<!--
<h2>School applications for the Spring 2022 Robotics Competition are now open!</h2>
<a class="btn btn-info" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSeZf_HI3ebMyfqTSe-rnL3pKrIp2CTK89YQsGT359PddLP-pg/viewform" role="button" style="margin-top:15px">Application</a>
-->
</div>
{% endif %}
<script src="assets/javascripts/banner.js"></script>
<div class="home">
<section id = "main-about">
<div id="blue-row" class="rc-row vertical-align" style="position: relative;">
<div class="transparent-offset" id="main-about"></div>
<div class="text-col text-left">
<div class="home-page-text-descr">
<h1>Who Are We?</h1>
</div>
<hr class="golden-border">
<div class="home-page-text-descr">
<p>Pioneers in Engineering (PiE) promotes STEM education
through an exciting, mentorship-based process.
We strongly believe that no student should be
denied a quality educational experience.</p>
</div>
<div class="button-holder">
<a class="btn btn-homepage-white section-button" href="about/" role="button">
About Us
</a>
</div>
</div>
<div id="who-are-we-image" class="image-col"></div>
</div>
</section>
<section>
<div id="gold-row" class="rc-row vertical-align" style="position: relative;">
<div class="transparent-offset" id="main-students"></div>
<div class="text-col text-left">
<div class="home-page-text-descr">
<h1>Students</h1>
</div>
<hr class="blue-border">
<div class="home-page-text-descr">
Are you in high school? Compete in our 8-week Spring robotics competition! For only $100,
your team will receive a robotics kit and 2-3 mentors for support.
We also host a Fall reboot of our past Spring competition, as well
as workshops such as PiE On The Road.
<!-- original text
<p>PiE provides a great way to get an awesome STEM robotics experience for your school. We provide an 8-week robotics competition in the Spring, complete with a robotics kit for $100 (subsidized by sponsors) and 2-3 mentors to support you. In fall, we host a reboot of the past spring’s competition. We also hold workshops, such as this year’s PiE On The Road.</p>
-->
</div>
<div class="button-holder">
<a class="btn btn-homepage-black section-button" href="compete/rc-spring/" role="button">
2021 PiE Robotics Competition
</a>
<a class="btn btn-homepage-black section-button" href="pie-on-the-road/" role="button">
PiE on the Road
</a>
<!--
<a class="btn btn-homepage-black section-button" href="compete/start-team/" role="button">
Start a Team!
</a>
-->
</div>
</div>
<div id="students-image" class="image-col"></div>
</div>
</section>
<section id="main-programs">
<div id="blue-row" class="rc-row vertical-align" style="position: relative;">
<div class="transparent-offset"></div>
<div class="text-col text-left">
<div class="home-page-text-descr">
<h1>Programs</h1>
</div>
<hr class="golden-border">
<div class="home-page-text-descr">
<p>
Apart from competition, learn how PiE can provide for high school students, whether through a college scholarship for RC paticipants or fun educational opportunities!
</p>
</div>
<div class="button-holder">
<a class="btn btn-homepage-white section-button" href="/programs/scholarship" role="button">
RC Scholarship
</a>
<a class="btn btn-homepage-white section-button" href="/programs/past-programs" role="button">
Past Programs
</a>
</div>
</div>
<div id="programs-image" class="image-col"></div>
</div>
</section>
<section id="main-get-involved">
<div id="gold-row" class="rc-row vertical-align" style="position: relative;">
<div class="transparent-offset"></div>
<div class="text-col text-left">
<div class="home-page-text-descr">
<h1>Get Involved</h1>
</div>
<hr class="golden-border">
<div class="home-page-text-descr">
<p> Excited to help? You could be the next to design the back-end of our robots,
mentor our students, judge our competitions, and lots more! </p>
</div>
<div class="button-holder">
<a class="btn btn-homepage-black section-button" href="/get-involved/" role="button">
Get Involved
</a>
<a class="btn btn-homepage-black section-button" href="/get-involved/become-mentor" role="button">
Mentor (DeCal)
</a>
</div>
</div>
<div id="get-involved-image" class="image-col"></div>
</div>
</section>
<section id = "main-support-us">
<div id="blue-row" class="rc-row vertical-align" style="position: relative;">
<div class="transparent-offset" id="main-support-us"></div>
<div class="text-col text-left">
<div class="home-page-text-descr">
<h1>Support Us</h1>
</div>
<hr class="blue-border">
<div class="home-page-text-descr">
<p>PiE could use your support to provide a better experience for our students. Find out how you can help, or become a sponsor.</p>
</div>
<div class="button-holder">
<a class="btn btn-homepage-white section-button" href="../support-pie/" role:"button">
How You Can Help
</a>
<a class="btn btn-homepage-white section-button" href="../support-pie/#sponsors" role="button">
List of Sponsors
</a>
<a class="btn btn-homepage-white section-button" href="https://www.tinyurl.com/piebiggive2020">
Donate to Big Give
</a>
</div>
</div>
<div id="support-us-image" class="image-col"></div>
</div>
</section>
</div>
</div>