-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·441 lines (428 loc) · 17.9 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
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
<!DOCTYPE HTML>
<!--
Dopetrope by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Girls Code Camp</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.min.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.min.js"></script>
<script src="js/mobile.min.js"></script>
<script src="js/gallery.min.js"></script>
<script src="js/scroll.min.js"></script>
<script src="js/expand.min.js"></script>
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link rel="icon" href="images/favicon.ico" />
<noscript>
<link rel="stylesheet" href="css/skel.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/style-desktop.min.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.min.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header -->
<div id="header-wrapper">
<div id="header">
<!-- Logo -->
<img class="mobile_logo" src="images/GCC_White1.png"></img>
<!-- Nav -->
<h1 class="logo-wrapper">
<div class="logo-div">
<img class="logo" src="images/GCC_White1.png"></img>
</div>
<div class="logo-text-div">
<p class="logo-text">Girls Code Camp</p>
</div>
</h1>
<nav id="nav">
<ul>
<li id="nav1" class="old"><a href="#intro">About Us</a></li>
<li id="nav2" class="new"><a href="#ghd"><span>NEW </span>GCC Hack Day</a></li>
<li id="nav3" class="old"><a href="#om">Our Mission</a></li>
<li id="nav4" class="old"><a href="#wwb">What We Do</a></li>
<li id="nav5" class="old"><a href="#gal_link">Gallery</a></li>
<li id="nav6" class="old"><a href="#team">The Team</a></li>
<li id="nav7" class="old"><a href="#footer">Contact Us</a></li>
</ul>
</nav>
<!-- Banner -->
<section id="banner">
<header>
<h2>Educate • Empower • Enable</h2>
<p>Bridging the gender gap one girl at a time</p>
</header>
</section>
<!-- Intro -->
<section class="container">
<div id="about_us">
<a class="anchor" id="intro"></a>
<header class="major">
<h2>About Us</h2>
</header>
<p>See how our workshops influence children in India.</p>
<div class="video-container">
<!-- If there are sizing issues with the video, the height and -->
<!-- width of video are hardcoded in "gallery.min.js" so check there. -->
<div class="video youtube" id="kjAJf_qLWe4" data-params="modestbranding=1&rel=0&showinfo=0" style="width: 853px; height: 480px;">
</div>
<!-- <aside class="video"> -->
<!-- <iframe width="853" height="480" src="https://www.youtube.com/embed/kjAJf_qLWe4" frameborder="0" allowfullscreen></iframe> -->
<!-- </aside> -->
</div>
</div>
<a class="anchor" id="ghd"></a>
<header class="major">
<h2>GCC Hack Day</h2>
</header>
<div>
<!-- Date goes here -->
</div>
<p class="mission">
Hyderabad's very own full-day hackathon for girls! Come join us at GCC Hack Day for a day full of learning, creativity, and, of course, hacking. Whether entry-level or experienced programmer, there will be something for everyone to do and something new for everyone to learn. If lucky, you may even score some prizes to take home!
</p>
<div class="buttons_holder">
<footer class="left">
<ul class="actions">
<li>
<a href="hackathon.html" class="button big alt">More Information</a>
</li>
</ul>
</footer>
<footer class="right">
<ul class="actions">
<li>
<a target="_blank" href="http://goo.gl/forms/zsuaqjTPY7" class="button big">Registration Form</a>
</li>
</ul>
</footer>
</div>
<a class="anchor" id="om"></a>
<header class="major">
<h2>Our Mission</h2>
</header>
<div class="mission">
<p>Girls Code Camp is a social venture that aims to leverage the unique potential of young women across India through technology. We are a team of Stanford students who are on a mission to bridge the gender disparity in technological fields in India. This summer of 2015, we will be visiting various high schools in India and leading workshops to introduce young girls to computer science.</p>
<p>There are 300 million young women in India. We, at GCC, are on a mission to make these 300 million young women in India 300 million solutions to India’s problems. We believe that, together, we can empower women to take charge of their lives and their communities by providing them with computer science skills and resources.</p>
</div>
<a class="anchor" id="wwb"></a>
<header class="major">
<h2>What We Do</h2>
</header>
<p class="mission" style="margin-bottom:5%;">2-day workshops in partnership with high schools across India that introduce girls to computer science through entertaining content. Each workshop is built around an innovative theme that allows girls to align their interests with what they’re learning.</p>
<div class="row" style="padding: 0 0 2em 0;">
<div class="4u">
<section class="first">
<i class="icon featured">
<img src="images/smartphone8.svg" class="icon" style="margin-left:30%;"></img>
</i>
<header>
<h2>Mobile Application Development</h2>
</header>
<p class="wwd_text">Students develop their own Instagram clone that's ready to share their pictures with the world.</p>
</section>
</div>
<div class="4u">
<section class="middle">
<i class="icon featured alt">
<img src="images/globe41.svg" class="icon"></img>
</i>
<header>
<h2>Web Development</h2>
</header>
<p class="wwd_text">Students learn the basics of HTML, CSS and Javascript to build an online, dynamic game such as Flappy Bird or snake.</p>
</section>
</div>
<div class="4u">
<section class="last">
<i class="icon featured alt2">
<img src="images/circuit5.svg" class="icon"></img>
</i>
<header>
<h2>Hands-on Tinkering</h2>
</header>
<p class="wwd_text">Students use Arduino boards and electric kits to build and program interactive toys, sparkling bracelets and their own fabric or fruit pianos.</p>
</section>
</div>
</div>
<a class="anchor" id="gal_link"></a>
<header class="major">
<h2>Gallery</h2>
</header>
<img id="galButton1" src="images/left_1.jpg"></img>
<div class="gallery">
<img class="gallery_img" style="opacity: 1" src="images/1.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/2.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/3.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/4.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/5.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/6.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/7.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/8.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/9.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/12.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/13.JPG"></img>
<img class="gallery_img" style="opacity: 0" src="images/15.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/19.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/20.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/21.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/22.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/23.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/24.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/25.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/26.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/27.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/28.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/29.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/30.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/31.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/32.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/33.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/34.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/41.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/team_gallery1.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/team_gallery2.jpg"></img>
<img class="gallery_img" style="opacity: 0" src="images/team_gallery3.jpg"></img>
</div>
<img id="galButton2" src="images/right_1.jpg"></img>
</section>
</div>
</div>
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div class="row">
<div class="12u">
<!-- Portfolio -->
<section>
<a class="anchor" id="team"></a>
<header class="major">
<h2>The Team</h2>
</header>
<div class="row">
<div class="4u">
<div class="aashna pic_wrapper"></div>
<section class="box">
<header>
<h3>Aashna Shroff</h3>
</header>
<p id="button1_text">Aashna is a sophomore at Stanford pursuing Computer Science and Economics. After being one of the only two girls in her high school computer science class in India, she was determined to bring an initiative like Girls Code Camp to India.</p>
<footer>
<a id="button1" class="button alt1">Find out more</a>
</footer>
</section>
</div>
<div class="4u">
<div class="john pic_wrapper"></div>
<section class="box">
<header>
<h3>John Kamalu</h3>
</header>
<p id="button2_text">John is a freshman interested in Computer Science and Linguistics at Stanford, whose love of learning began with Classical Latin and Ancient Greek. More recently, he along with his team members placed Top-8 at TreeHacks, Stanford’s annual hackathon.</p>
<footer>
<a id="button2" class="button alt2">Find out more</a>
</footer>
</section>
</div>
<div class="4u">
<div class="akhila pic_wrapper"></div>
<section class="box">
<header>
<h3>Akhila Moturu</h3>
</header>
<p id="button3_text">Akhila is a freshman at Stanford majoring in Computer Science with a minor in Education.On campus, she is involved with the Stanford Pre Education Society and Dreamcatchers, both of which combine her interests in programing and education.</p>
<footer>
<a id="button3" class="button alt3">Find out more</a>
</footer>
</section>
</div>
</div>
</section>
</div>
</div>
<!-- Blog
<div class="row">
<div class="12u">
<section>
<header class="major">
<h2>The Blog</h2>
</header>
<div class="row blog">
<div class="6u" style="margin-left: 25%;">
<a href="https://medium.com/@GirlsCodeCamp/we-begin-at-the-beginning-ae766e1b5ee" class="blog image featured"><img class="blog_pic" src="images/32.jpg" alt="" /></a>
<section class="box">
<header>
<h3>We begin at the beginning</h3>
<p>Why I started Girls Code Camp</p>
</header>
<p>Two years ago, I entered Stanford as an eager fresh(wo)man with aspirations in computer science and entrepreneurship. Stanford seemed like the perfect place for me, and I was ready to experience everything that Stanford had to offer. I had already begun to experience the mystique of technology in my freshman year through the introductory programming course, CS 106A. </p>
<footer>
<ul class="actions">
<li><a href="https://medium.com/@GirlsCodeCamp/we-begin-at-the-beginning-ae766e1b5ee" class="button icon fa-file-text">Continue Reading</a></li>
</ul>
</footer>
</section>
</div>
</div>
</section>
</div>
</div>
-->
<a class="anchor" id="ft"></a>
<header class="major">
<!-- Features -->
<h2>Featured In</h2>
</header>
<div class="features">
<table>
<tr>
<th>
<a href = "http://www.thehindu.com/todays-paper/tp-national/tp-telangana/budding-techies/article8033422.ece">
<img alt = "The Hindu" src = "images/feature_Hindu.png" id = "feat_Hindu">
</a>
</th>
<th>
<a href = "http://www.newindianexpress.com/cities/hyderabad/Stanford-Trio-Launch-Code-Camp-to-Empower-Girls-through-ICT/2015/06/28/article2890178.ece">
<img alt = "The New Indian Express" src = "images/feature_TNIE.png" id = "feat_TNIE">
</a>
</th>
<th>
<a href = "files/DC-Article.pdf">
<img alt = "Deccan Chronicle" src = "images/feature_DC.png" id = "feat_DC">
</a>
</th>
<th>
<a href = "https://www.youtube.com/watch?v=BGQiufecpow">
<img alt = "Express TV" src = "images/feature_ExpressTV.png" id = "feat_expressTV">
</a>
</th>
</tr>
<tr>
<td>
<a href = "https://stanfordconnects.stanford.edu/watch/bridging-gender-gap-technology-developing-countries">
<img alt = "Stanford + Connects" src = "images/feature_SC.png" id = "feat_sc">
</a>
</td>
<td>
<a href = "files/MM_article.pdf">
<img alt = "Motherland Magazine" src = "images/feature_MM.png" id = "feat_mm">
</a>
</td>
<td>
<a href = "files/HM_article.pdf">
<img alt = "Hindi Milap" src = "images/feature_HM.gif" id = "feat_hm">
</a>
</td>
<td>
<a href = "files/Eenadu_article.pdf">
<img alt = "Eenadu" src = "images/feature_Eenadu.png" id = "feat_Eenadu">
</a>
</td>
</tr>
</table>
</div>
<div class="row">
<div class="12u">
<!-- Partners -->
<section style="text-align: center;">
<header class="major">
<h2>Our Partners and Supporters</h2>
</header>
<img class="sponsors" src="images/sponsors.png"></img>
</section>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<a class="anchor" id="footer"></a>
<section class="container">
<div class="row">
<div class="8u">
<!<section>
<header>
<h2>The program </h2>
</header>
<ul class="dates">
<li class = "line">
<span class="date">Jun. <strong>29</strong></span>
<h3><a href="http://chirec.ac.in/" target="_top">Chirec International</a></h3>
<p>Kondapur</p>
</li>
<li class = "line">
<span class="date">Jul. <strong>8</strong></span>
<h3><a href="http://girls.nasrschool.in/" target="_top">Nasr Girls</a></h3>
<p>Khairtabad</p>
</li>
<li class = "line">
<span class="date">Jul. <strong>20</strong></span>
<h3><a href="http://www.sis.edu.in/" target="_top">Sreenidhi International</a></h3>
<p>Moinabad</p>
</li>
<li class = "line">
<span class="date">Jul. <strong>27</strong></span>
<h3><a href="http://www.meridianschool.in/meridian-banjarahills/about-meridian.html" target="_top">Meridian School</a></h3>
<p>Banjara Hills</p>
</li>
<li class = "line">
<span class="date">Aug. <strong>5</strong></span>
<h3><a href="http://oakridge.in/newton/index.html" target="_top">Oakridge International</a></h3>
<p>Gachlibowli</p>
</li>
</ul>
</section>
-->
</div>
<div class="4u">
<section>
<header>
<h2>Visit Us on Social Media</h2>
<h4>Click any icon below!</h4>
</header>
<ul class="social">
<li><a class="icon fa-facebook" href="https://www.facebook.com/girlscodecamp" target="_top"><span class="label">Facebook</span></a></li>
<li><a class="icon fa-twitter" href="https://twitter.com/girlscodecamp" target="_top"><span class="label">Twitter</span></a></li>
<li><a class="icon fa-youtube" href="https://www.youtube.com/channel/UCW06F4UoZgAVK8c4H6JdGwA" target="_top"><span class="label">LinkedIn</span></a></li>
<li><a class="icon fa-medium" href="https://medium.com/@GirlsCodeCamp" target="_top"><span class="label" target="_top">Medium</span></a></li>
<li><a class="icon fa-google-plus" href="https://plus.google.com/117068793643542608948/posts" target="_top"><span class="label">Google+</span></a></li>
</ul>
<p>
<h4>
Want to chat? Or know of a school or organization we should visit? Let us know! </h4>
</p>
<ul class="contact">
<li>
<h3>Email</h3>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</li>
</ul>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Copyright -->
<div id="copyright">
<ul class="links">
<li>© GCC 2015. All rights reserved.</li>
<li>Design: <a href="http://html5up.net" target="_top">HTML5 UP</a></li>
<Li>Icons: <a href="http://www.flaticon.com/authors/freepik" target="_top" title="Freepik">Freepik </a> ( <a href="http://creativecommons.org/licenses/by/3.0/" target="_top" title="Creative Commons BY 3.0">CC BY 3.0</a> )
</ul>
</div>
</div>
</div>
</section>
</div>
</body>
</html>