This repository has been archived by the owner on May 14, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
416 lines (397 loc) · 21 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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
---
---
<script type="text/javascript">
var submitted = false;
</script>
<!-- container -->
<!-- <div class="container home" role="main"> -->
<section class="module parallax" style="background-image: url(30k30days/3030-header-1440x640.jpg);">
<div class="container">
<div class="row">
<div class="col-xs-8 headline-title">
<!-- below is for switch between open and close registrtion header "Open!" "Closed!" -->
<!-- <h1>Enrollment for Fall 2018 Classes is Now Closed!</h1> -->
<h1>Enrollment for Summer 2020 classes is now open!</h1>
</div>
</div>
<div class="row spacer-row"></div>
<!-- above is for switch between open and close registrtion header "Open!" "Closed!" -->
<!-- below is for switch between open and close registrtion "Sign Up Here!" link on the home page -->
<div class="row">
<a href="programs/">
<h1 class="col-xs-4 enrollment-link">Sign Up Here!</h1>
</a>
</div>
<!-- above is for switch between open and close registrtion "Sign Up Here!" link on the home page -->
</div>
</section>
<section class="module content">
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<p>
Mission Bit courses are project-based semester-long coding courses, taught by college computer science majors and
supported by volunteers who are professional software engineers. Mission Bit education experiences are all-inclusive
and ethnically and gender diverse. Mission Bit’s complementary programs create pathways for "limited access"
students to form connections with technology professionals and learn the skills, processes, and technologies used by
professional programmers.
</p>
<p>
Check out our
<a href="/annual-reports/2018/mission-bit-annual-report-2018.pdf"><i class="fa fa-file-pdf-o"></i> 2018 Annual
Report</a>
for more about our vision and current impact.
</p>
</div>
</div>
<!-- below is add a video to home page, video store in vimeo too big to store on github, video resolution is 1920 * 1080 -->
<div class="text-center">
<!-- Use HTML video to display video larger then 100mb can not store on github, so use Vimeo or youtube is faster -->
<!--
<video width="960" height="540" controls="controls">
<source src="videos/Bay_Cat_Breaking_The_code_V7.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<span>Bay Cat Breaking The code Video <a href="https://pod.app.box.com/s/wpsclw831swa1hpqcktuccpvzoc8pksn/file/184280510510" target="_blank" title="TechCrunch">(alternative link)</a></span>
-->
<div class="video-responsive">
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/o_1sd_F54NQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p><a href="https://youtu.be/9HqfU7-DCao" target="_blank">2019 Demo Day</a> from <a href="https://www.youtube.com/channel/UCN07uXlUaHsvCYwXhHa2NPw" target="_blank">Mission Bit</a> on <a href="https://youtube.com" target="_blank">YouTube</a>.</p>
<p></p>
</div>
<!-- above is add a video to home page, video store in vimeo too big to store on github, video resolution is 1920 * 1080 -->
<div class="row">
<div class="cards col-xs-11 col-xs-offset-1">
<a class="card exposure-photo" href="exposure/">
<div class="card-text">
<h2 class="title-text">Exposure</h2>
<p class="caption-text">Bring a coding workshop to your school</p>
</div>
</a>
<a class="card enrollment-photo" href="programs/">
<div class="card-text">
<h2 class="title-text">Enrollment</h2>
<p class="caption-text">Register for a semester long Mission Bit course</p>
</div>
</a>
<a class="card employment-photo" href="careerprep/">
<div class="card-text">
<h2 class="title-text">Career Prep</h2>
<p class="caption-text">Start your path to career as a software engineer</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-2" >
<a href="https://missionlocal.org/2015/04/mission-nonprofit-hacks-tech-industrys-achievement-gap/" target="_blank">
<img class="press-logo" src="images/press/mission-logo.png" />
</a>
</div>
<div class="col-sm-4 col-md-2" >
<a href="https://techcrunch.com/2015/10/18/missionbit-2/" target="_blank">
<img class="press-logo" src="images/press/tc-logo.jpg" />
</a>
</div>
<div class="col-sm-4 col-md-2" >
<a href="https://www.sfchronicle.com/bayarea/article/Incomes-rise-across-S-F-except-for-African-6548522.php" target="_blank">
<img class="press-logo" src="images/press/SF-Chronicle-logo.png" />
</a>
</div>
<div class="col-sm-4 col-md-2" >
<a href="https://www.newsweek.com/after-school-programs-make-difference-269102" target="_blank">
<img class="press-logo push-down" src="images/press/newsweek.jpg" />
</a>
</div>
<div class="col-sm-4 col-md-2" >
<a href="https://www.sfbg.com/2014/06/17/disrupting-classroom" target="_blank">
<img class="press-logo push-down" src="images/press/SFBG-LOGO.jpeg" />
</a>
</div>
<div class="col-sm-4 col-md-2" >
<a href="https://www.soapboxproject.org/getschooled/mission-bit-computer-science" target="_blank">
<img class="press-logo" src="images/press/SoapboxLogo.png" />
</a>
</div>
</div>
</div>
</section>
<section class="module parallax parallax-2">
<div class="container">
</div>
</section>
<!-- OLD MODEL KEEPING FOR REFERENCE -->
<!-- <section class="module content">
<div class="container">
<div class="col-xs-10 col-xs-offset-1 box-container" id="model">
<div class="headline text-center">
<h2>Our Model</h2>
</div>
<div class='row'>
<div class='col-xs-12 model-icons'>
<div class='col-sm-2'>
<div class='model-icon-circle'><i class="fa fa-laptop fa-3x model-icon"></i></div>
<div class='icon-caption'>Run free CS courses in schools where poverty is prevalent</div>
</div>
<div class='col-sm-1 arrow'><i class="fa fa-arrow-right fa-3x"></i></div>
<div class='col-sm-2'>
<div class='model-icon-circle'><i class="fa fa-users fa-3x model-icon"></i></div>
<div class='icon-caption'>Recruit and train volunteer Software Engineers to teach</div>
</div>
<div class='col-sm-1 arrow'><i class="fa fa-arrow-right fa-3x"></i></div>
<div class='col-sm-2'>
<div class='model-icon-circle'><i class="fa fa-desktop fa-3x model-icon"></i></i></div>
<div class='icon-caption'>Students gain two years of Computer Science instruction</div>
</div>
<div class='col-sm-1 arrow'><i class="fa fa-arrow-right fa-3x"></i></div>
<div class='col-sm-2' id='last-elements'>
<div class='row'>
<div class='model-icon-circle'><i class="fa fa-graduation-cap fa-3x model-icon"></i></div>
<div class='icon-caption'>Students enroll in college as CS majors</div>
</div>
<div class='row'>
<div class='model-icon-circle'><i class="fa fa-university fa-3x school-icon"></i></div>
<div class='icon-caption'>Students enroll in coding bootcamps</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> -->
<section class="module content">
<div class="container">
<div class="col-xs-10 col-xs-offset-1 box-container" id="model">
<img class="home-model" src="/images/home/Our Model.png">
</div>
</div>
</section>
<section class="module parallax parallax-4">
<div class="container">
</div>
</section>
<section class="module content carousel-container">
<div class="container">
<div class="col-sm-12">
<!-- Stats Carousel -->
<div id="textCarousel" class="carousel slide carousel-fade box-container">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active text-center text-box background-color-orange">
<h1>6%</h1>
<div class="white">San Francisco Unified School District has 17,000 high school students. In the 2015-2016 school year, only 6% were enrolled in a computer science course.</div>
</div>
<div class="item text-center text-box background-color-red">
<h1>25%</h1>
<div class="white">In 2015, women only made up 25% of software engineers, while African American and Latino made up 5% combined.</div>
</div>
<div class="item text-center text-box background-color-blue">
<h1>1.4 M</h1>
<div class="white">According to research, by the year 2020, 1.4 million jobs will go unfilled in computer science fields.<br></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#textCarousel" data-slide="prev">
<span class="icon-prev color-blue"></span>
</a>
<a class="right carousel-control" href="#textCarousel" data-slide="next">
<span class="icon-next color-blue"></span>
</a>
</div>
</div>
</div>
</section>
<section class="module parallax parallax-3">
<div class="container">
</div>
</section>
<section class="module content">
<div class="container">
<div class="row">
<div class="section partners">
<div class="col-sm-12">
<div class="headline text-center">
<h2>Mission Bit Partners</h2>
</div>
<div style="padding: 20px;"></div>
<div class='row'>
<div class='col-md-3 col-xs-6'>
<a href="https://www.antheminc.com/" target="_blank" title="Anthem">
<img src="images/2019_Partners/Anthem.png" alt="Anthem logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.sfbfa.org/" target="_blank" title="Black Firefighters">
<img src="images/2019_Partners/black-firefighers.png" alt="Black Firefighters logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.ousd.org/ccpa" target="_blank" title="CCPA">
<img src="images/2019_Partners/CCPA.png" alt="CCPA logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.ccsf.edu/" target="_blank" title="CCSF">
<img src="images/2019_Partners/CCSF.png" alt="CCSF logo" >
</a>
</div>
</div>
<div class='row'>
<div class='col-md-3 col-xs-6'>
<a href="https://clearbit.com/" target="_blank" title="Clearbit">
<img src="images/2019_Partners/clearbit.png" alt="Clearbit logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.facebook.com/" target="_blank" title="Facebook" style="height: 150px; display: flex; justify-content: center;">
<img src="images/2019_Partners/facebook.svg" alt="Facebook logo">
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.gatewaypublicschools.org/ghs" target="_blank" title="Gateway">
<img src="images/2019_Partners/gateway.png" alt="Gateway logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.mlb.com/giants" target="_blank" title="Giants">
<img src="images/2019_Partners/giants.png" alt="CCPA logo" >
</a>
</div>
</div>
<div class='row'>
<div class='col-md-3 col-xs-6'>
<a href="https://www.nba.com/warriors/" target="_blank" title="Golden State Warriors">
<img src="images/2019_Partners/gsw.png" alt="Golden State Warriors logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.hackreactor.com/" target="_blank" title="Hack Reactor">
<img src="images/2019_Partners/HackReactor.png" alt="Hack Reactor logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://jyve.com/" target="_blank" title="Jyve">
<img src="images/2019_Partners/jyve.png" alt="Jyve logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.kaporcenter.org/" target="_blank" title="Kapor Center">
<img src="images/2019_Partners/kapor-center.svg" alt="Kapor Center logo" >
</a>
</div>
</div>
<div class='row'>
<div class='col-md-3 col-xs-6'>
<a href="https://www.leadershiphigh.org/" target="_blank" title="Leadership High">
<img src="images/2019_Partners/leadership.png" alt="Leadership High logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.ousd.org/" target="_blank" title="Oakland Unified School District">
<img src="images/2019_Partners/OUSD.png" alt="OUSD logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://shorenstein.com/" target="_blank" title="Shorenstein">
<img src="images/2019_Partners/shorenstein.png" alt="Shorenstein logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.svb.com/" target="_blank" title="Silicon Bank Logo">
<img src="images/2019_Partners/svb.png" alt="Silicon Valley Bank logo" >
</a>
</div>
</div>
<div class='row'>
<div class='col-md-3 col-xs-6'>
<a href="https://oewd.org/" target="_blank" title="OEWD">
<img src="images/2019_Partners/SFOEWD.png" alt="OEWD logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.sfusd.edu/" target="_blank" title="SFUSD">
<img src="images/2019_Partners/SFUSD.png" alt="SFUSD logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.tng.com/" target="_blank" title="TNG">
<img src="images/2019_Partners/tng.png" alt="TNG logo" >
</a>
</div>
<div class='col-md-3 col-xs-6'>
<a href="https://www.uber.com/" target="_blank" title="Uber">
<img src="images/2019_Partners/uber.png" alt="Uber logo" >
</a>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-3 col-xs-6 col-md-offset-3">
<a href="https://unity3d.com/" target="_blank" title="Unity">
<img src="/images/2019_Partners/unity.png" alt="Unity Logo">
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="https://eastwoodsf.com/" target="_blank" title="Eastwood">
<img src="/images/2019_Partners/eastwood.png" alt="Eastwood Logo">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="module content mc-embed-container">
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
.mc-embed-container {
text-align: center;
padding-bottom: 0;
}
#mc_embed_signup {
min-width: 80%;
margin: 0 auto;
color: #fff;
display: inline-block;
padding: 1em;
background: #e67e22;
clear: left;
}
#mc_embed_signup .button:hover {
background-color: hsl(204, 90%, 63%);
}
#mc_embed_signup .button {
background-color: hsl(204, 70%, 53%);
font: 18px 'Open Sans', sans-serif;
height: 36px;
}
#mc_embed_signup input.email {
height: 38px;
}
#mc_embed_signup,
#mc_embed_signup label {
font: 24px 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: bold;
}
@media screen and (max-width: 768px) {
#mc_embed_signup {
min-width: 100%;
}
}
</style>
<div id="mc_embed_signup">
<form action="https://missionbit.us3.list-manage.com/subscribe/post?u=dca59ff0c46a6c1be0d20cf89&id=ec36efa7f3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_dca59ff0c46a6c1be0d20cf89_ec36efa7f3" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</section>