-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
246 lines (231 loc) · 9.81 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
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE HTML>
<!--
Spectral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Extra styling and stuff by: James Xu (so blame me if anything goes wrong)
Further modifications for 2019-2020 by: David Hui
-->
<html>
<head>
<title>Home - CodeReach</title>
<meta charset="utf-8" />
<meta property = "og:image" content="images/logowithstroke.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="An after-school programming class for elementary school children in Windsor, ON. Hosted by Vincent Massey Secondary School.">
<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/jquery.min.js"></script>
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<style>
@media screen and (max-width: 768px) {
.logo {
width: 80vw;
height: auto;
}
.logo2 {
height: 2.7em;
width: auto;
}
}
@media screen and (min-width: 767px) {
.logo {
width: 30vw;
height: auto;
}
.logo2 {
height: 3em;
width: auto;
}
}
.hidden {
display: none;
}
</style>
<body class="landing is-preload">
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header" class="alt">
<img id="logo2" src="images/logowithstroke.png" class="logo2 hidden" />
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<!--<li><a href="https://register.codereach.ca">Sign Up</a></li>-->
<li><a href="resources.html">Resources and Lessons</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<!-- Banner -->
<section id="banner" style="background: rgba(0,0,0,0.5);">
<div class="inner">
<img class="logo" src="images/logowithstroke.png" />
<p>Vincent Massey Secondary School<br>
1800 Liberty St.<br>
Coding course for elementary school students<br>
<span id="date-time">Every Thursday | 4:00 - 5:30</span></p>
<ul class="actions special">
<!--<li><a href="https://register.codereach.ca" class="button primary">Apply Now!</a></li>-->
<li><a class="button primary"
href="https://www.youtube.com/channel/UCJUiri_eZkDSuOQ-LD03hlg">Join Us On
YouTube!</a></li>
</ul>
</div>
<a href="#one" class="more scrolly">Learn More</a>
</section>
<!-- One -->
<section id="one" class="wrapper style1 special">
<div class="inner">
<header class="major">
<h2>CodeReach teaches the fundamentals of computer science to Grade 7 and 8
students</h2>
<p>CodeReach helps young students learn the basics of computer science and programming
to prepare them for success in STEM.</p>
</header>
</div>
</section>
<!-- Two -->
<section id="two" class="wrapper alt style2">
<section class="spotlight">
<div class="image"><img src="images/pic01.jpg" alt="" /></div><div class="content">
<h2>Our
Goal</h2>
<p>In an ever growing technology-driven world, we strive to prepare young minds in our community for what the future holds. Programming is a sought-after skill that, unfortunately, is not taught in elementary school. We hope that through programming, our students will be proactive when using computers and hopefully reach a point where they can make whatever they want.</p>
</div>
</section>
<section class="spotlight">
<div class="image"><img src="images/pic02.jpg" alt="" /></div><div class="content">
<h2>What we teach</h2>
<p>We teach Python because its simple to learn and is one of the most popular programming languages in the world. Further into the course, we introduce students to basic graphics using the module, Pygame. Students will have the opportunity to learn how to create their own simple games.</p>
</div>
</section>
<section class="spotlight">
<div class="image"><img src="images/cr_text.jpg" alt="" /></div><div class="content">
<h2>Who teaches</h2>
<p>At CodeReach, our instructors are highly qualified highschool students. All instructors must finish their computer science and math course with over a 95%. We hope that through a peer to peer setting, classrooms can become more dynamic and less intimidating!</p>
<a href="about.html" class="button fit">Learn More</a>
</div>
</section>
</section>
<!-- Three -->
<section id="three" class="wrapper style3 special">
<div class="inner">
<header class="major">
<h2>Frequently Asked Questions</h2>
<p>If the section below doesn't answer your question, feel free to use the contact form below.</p>
</header>
<section>
<hr />
<h4>How much does CodeReach cost?</h4>
<p>CodeReach is <b>free</b>. We believe that open access to education is extremely important, so we will <b>never</b> charge for CodeReach.</p>
<h4>What should I bring to class?</h4>
<p>We provide computer labs, so you do not have to bring your own computer. That being said we <b>highly recommend you bring your own laptop</b> so you can continue on what you learned in class at home! If you have any medical issues, allergies or otherwise require accommodation, please let us know! We also suggest you bring water in a bottle so you don't get thirsty.</p>
<div class="">
<h4>How do I apply?</h4>
<p>Due to limited number of seats, we offer CodeReach at a first come first serve basis. To apply click the “signup” button at the start of the page. You can’t miss it we promise!</p>
<h4>When are applications due? How will I know if I got accepted?</h4>
<p>Applications open September 28th and close October 12th. Admissions decisions will be released on October 15th by email and classes begin October 17th.</p>
</div>
</section>
<div>
<hr />
<h4>Contact Us</h4>
<form data-netlify-recaptcha="true" name="contact" netlify>
<div class="row gtr-uniform">
<div class="col-6 col-12-xsmall">
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div class="col-6 col-12-xsmall">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="col-12">
<textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
</div>
<div class="col-12">
<div data-netlify-recaptcha="true"></div>
</div>
<div class="col-12">
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- CTA -->
<section id="cta" class="wrapper style4">
<div class="inner">
<header>
<!--<h2>Applications are open!</h2>
<p>Accepting Grade 7-8 students.</p>-->
<h2>Join us on YouTube!</h2>
<p>Classes every Thursday from 4:00 pm - 5:30 pm</p>
</header>
<ul class="actions stacked">
<!--<li><a href="https://register.codereach.ca" class="button fit primary">Apply Now!</a></li>-->
<a class="button primary"
href="https://www.youtube.com/channel/UCJUiri_eZkDSuOQ-LD03hlg">Join Us!</a>
</ul>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<li><a href="https://twitter.com/codereach" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.facebook.com/VMSSCodeReach/" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="https://www.instagram.com/codereach.vmss/" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a class="icon fa-youtube"
href="https://www.youtube.com/channel/UCJUiri_eZkDSuOQ-LD03hlg"><span class="label">YouTube</span></a>
</li>
<li><a href="mailto:[email protected]" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© James Xu</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.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 src="assets/js/main.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-86188538-4"></script>
<script async src='https://www.google.com/recaptcha/api.js'></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-86188538-4');
</script>
<script>
var date = "4:00 to 5:30";
var day = "Every Thursday";
var counter = 0;
var array = [day,date];
var normal = "Every Thursday | 4:00 - 5:30";
setInterval(function() {
if ($(window).width() < 400) {
$("#date-time").text(array[counter%2]);
counter += 1;
} else {
$("#date-time").text(normal);
}
}, 1300);
</script>
<script async src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</body>
</html>