-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.html
More file actions
1209 lines (1128 loc) · 61.7 KB
/
Copy pathindex.html
File metadata and controls
1209 lines (1128 loc) · 61.7 KB
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
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="images/2021_circle.png" sizes="16x16" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-106611677-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-106611677-2');
</script>
<meta charset="utf-8">
<title>Oakridge Codefest</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body style="background-color: black;">
<div id="fb-root"></div>
<!-- Facebook stuff -->
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="loader">
<div class="row">
<div class="col s8 offset-s2">
<div class="white-text output"></div>
<div class="loading black-text" id="text">
<div class="center-align">2022 CODE FEST</div> <br>
<div class="center-align"></div>
</div>
</div>
</div>
</div>
<div id="website" style="visibility: hidden;">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<nav class="transparent z-depth-0">
<div class="nav-wrapper">
<a href="https://www.oakridge.in/" class="brand-logo left hide-on-med-and-down" target="_blank" rel="noopener noreferrer"><img class="responsive-img" width=135px
src="images/nord-oak-white.png" style="margin-left: +15px"/></a>
<a href="https://www.oakridge.in/" class="brand-logo center hide-on-large-only"><img class="responsive-img" width=135px
src="images/nord-oak-white.png" style="margin-left: +15px"/></a>
<a href="#" data-activates="mobile-menu" class="left button-collapse"><i class="material-icons">menu</i></a>
<ul id="wide-menu" class="right hide-on-med-and-down">
<li><a href="#theme" class="waves-effect hoverable waves-teal large right" style="color: black !important; font-weight: bold;">Themes</a></li>
<li><a href="#prizes" class="waves-effect hoverable waves-teal large right" style="color: black !important; font-weight: bold;">Prizes</a></li>
<li><a href="#sponsor" class="waves-effect hoverable waves-teal large right" style="color: black !important; font-weight: bold;">Sponsor</a></li>
<li><a href="#faq" class="waves-effect hoverable waves-teal large right" style="color: black !important; font-weight: bold;">FAQ</a></li>
<!-- <li><a class="register-btn btn pulse" href="https://oakcodefest2021.devpost.com/" style="color: #FFFFFF; !important">Register now!</a></li> -->
<li><a class="register-btn btn pulse" style="color: #FFFFFF !important;" href="https://forms.gle/tHiXX1DowZvD3XQA7" target="_blank" rel="noopener noreferrer">Early Bird Registration</a>
</li>
<!-- <li><a href="#livestream" class="waves-effect hoverable waves-teal large right">Live streaming</a></li> -->
</ul>
<ul class="side-nav grey darken-4" id="mobile-menu">
<li><a href="#theme" class="waves-effect hoverable waves-teal large black-text">Themes</a></li>
<!-- <li><a href="#prizes" class="waves-effect hoverable waves-teal large white-text">Prizes</a></li> -->
<li><a href="#faq" class="waves-effect hoverable waves-teal large white-text">FAQ</a></li>
<li><a href="#sponsor" class="waves-effect hoverable waves-teal large white-text">Sponsors</a></li>
<li><a class="register-btn btn pulse" style="color: #FFFFFF !important;" href="https://forms.gle/tHiXX1DowZvD3XQA7">Early Bird Registration</a>
<!-- <li><a href="#livestream" class="waves-effect hoverable waves-teal large right">Live streaming</a></li> -->
</ul>
</div>
</nav>
<div id="index-banner" class="parallax-container hide-on-med-and-down">
<div class="section no-pad-bot">
<div class="row hide-on-med-and-down"></div>
<div class="row hide-on-med-and-down"></div>
<div class="container hide-on-med-and-down">
<div class="row">
<div class="col s12">
<!-- <div class="card-panel black z-depth-5"> -->
<div class="center-align">
<!-- <img src="images/uncompressed.gif" class="responsive-img">-->
<video id="bgvid" width="100%" height="100%" playsinline autoplay muted loop>
<source src="media/CF2022Garbage.webm" type="video/webm">
<source src="media/CF2022Garbage.mp4" type="video/mp4">
</video>
</div>
<!--
- Video needs to be muted, since Chrome 66+ will not autoplay video with sound.
WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<!-- <source src="/saber_1.webm" type="video/webm">
<source src="/saber_1.mp4" type="video/mp4"> -->
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div id='phone' class="row center">
<div id="mob">
<br /><br />
<img src="images/garbage.png" style="width: 100%; height: 150%;"></img>
</div>
</div>
<!--<section id="intro">
<div class="row center-align">
<div class="col s12">
<a class="typeform-share button" href="https://oakridgecodefest.typeform.com/to/YLU5qH" data-mode="drawer_right" style="display:inline-block;text-decoration:none;background-color:#263238;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:32px;line-height:80px;text-align:center;margin:0;height:80px;padding:0px 53px;border-radius:13px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
data-hide-headers=true data-hide-footer=true target="_blank">Register Now!</a>
<script>
(function() {
var qs, js, q, s, d = document,
gi = d.getElementById,
ce = d.createElement,
gt = d.getElementsByTagName,
id = "typef_orm_share",
b = "https://embed.typeform.com/";
if (!gi.call(d, id)) {
js = ce.call(d, "script");
js.id = id;
js.src = b + "embed.js";
q = gt.call(d, "script")[0];
q.parentNode.insertBefore(js, q)
}
})()
</script>
</div>
</div>
-->
<div class="hide-on-med-and-down">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<section id="intro">
<style>
.light-blue {
color: #fff !important;
background-color: #003255 !important;
}
#HGSVid {
display: block
}
</style>
</section>
</div>
<div id="animation-banner" class="parallax-container" style="color: #03A7E9; width: 100%;">
<div class="section no-pad-bot">
<div class="row"></div>
<div class="row"></div>
<div class="container">
<div class="center-align">
<!-- DO NOT INDENT BELOW PLS -->
<pre id="typewriter" style="overflow-x: hidden;" class="flow-text">
<span class="var-highlight">Oakridge Codefest</span> 2022 = {
type: <span class="string-highlight">'24 hour Virtual Hackathon'</span>,
date: <span class="string-highlight">'22nd-23rd Jan 2022'</span>,
location: <span class="string-highlight">'Online'</span>,
themes:[
<span class="string-highlight">'STEM Simulation'</span>,
<span class="string-highlight">'Education'</span>,
<span class="string-highlight">'Environmental Sustainability'</span>,
<span class="string-highlight">'Healthcare'</span>,
<span class="string-highlight">'Game Development (Juniors Only)'</span>,
]
};
</pre>
<!-- <span class="string-highlight">'Data analytics'</span>,
<span class="string-highlight">'Transportation'</span>,
<span class="string-highlight">'Healthcare'</span>,
<span class="string-highlight">'Education'</span>,
<span class="string-highlight">'Environmental sustainability'</span>,
<span class="string-highlight">'Gaming (Juniors only/grades 6-8)'</span>, -->
</div>
</div>
</div>
</div>
<br>
<center>
<!-- <img src="images/coming soon white.png" width="75%"/> -->
<div class="container">
<div class="row">
<div class="col s12 center-align">
<div id="clockdiv">
<div>
<span class="days light-blue darken-4"
style="background-image:url('images/codefest glitch darkened.png');background-position:100px 100px"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours light-blue darken-4"
style="background-image:url('images/codefest glitch darkened.png');background-position:200px 100px"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes light-blue darken-4"
style="background-image:url('images/codefest glitch darkened.png');background-position:300px 100px"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds light-blue darken-4"
style="background-image:url('images/codefest glitch darkened.png');background-position:400px 100px"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<!--
<h5><i>Codefest 2022</i></h5>
<h5><i>22nd-23rd January 2022</i></h5>
<div>
<img src='images\coming soon white.png' height="50px" />
</div>
-->
</div>
</div>
</div>
</center>
<div class="container">
<!-- <section id="video">
<div class="row">
<div class="col s8 offset-s2">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/EMpHOXm7sAg" frameborder="0" allow="autoplay" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div> -->
<!-- OLD PHOTOS DIV HIDDEN -->
<!-- <div class="row">
<div class="col s12 m12">
<div class="icon-block">
<h2 class="center red-text text-darken-1"><i class="material-icons">flash_on</i></h2>
<h5 class="center"><a href="https://photos.app.goo.gl/d1dYMX6xvNrVfUwJ3" class="btn-large center" style="background-color: #03A7E9;">Photos from Codefest 2018</a></h5>
</div>
</div>
</div> -->
<!-- </section> -->
<div class="row"></div>
<section class="grey darken-4 valign-wrapper" style=" font-weight: light !important;">
<div class="row questions">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center-align"><i class="material-icons medium">flash_on</i></h2>
<h4 class="center-align">What is the Codefest?</h4>
<p class="center-align">The Codefest is a platform that provides the opportunity for aspiring developers to
showcase their unique talents to both each other and veterans of the industry. Our Codefest is
Bangalore's only overnight school hackathon and
we plan on making it as fulfilling and rewarding as possible!</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center-align"><i class="material-icons medium">group</i></h2>
<h4 class="center-align">Themes</h4>
<p class="center-align">With a multitude of impactful themes, the participants will be tackling current
technical problems with innovative improvements and solutions.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center-align"><i class="material-icons medium">settings</i></h2>
<h4 class="center-align">Rewards</h4>
<p class="center-align">Placement in the top three will guarantee a large monetary reward, and
additionally, sponsor themes have their own rewards, which include a large assortment of products and
services of equal value.</p>
</div>
</div>
</div>
</section>
<div class="row"></div>
<!-- <div class="divider white"></div> -->
<section id="theme" class="">
<!-- REMOVE HIDDEN WHEN THEMES ARE CONFIRMED AND ANNOUNCABLE -->
<!-- <h3 class="center-align">Themes will be announced soon!</h3> -->
<!-- <h3 class="flow-text center-align">General themes</h3> -->
<h3 class="center-align page-headings" style="color: black !important;">Themes for Oakridge Codefest (2022)</h3>
<div class="row">
<div class="col s12">
<div class="card-panel grey darken-4">
<span class="white-text" style="font-size: 150%;">
<p>Participants are <b>expected</b> to use at least <b>one primary</b> theme for their project but are
<b>advised</b> to choose two or more themes. For more infomation regarding the themes please email us
at <a href="mailto:oakcodefest@oakridge.in">oakcodefest@oakridge.in</a></p>
</span>
</div>
</div>
</div>
<ul class="collapsible popout hide-on-med-and-up" data-collapsible="accordion">
<li>
<div class="collapsible-header center-align grey darken-4" onmouseover="onhover(this);"
onmouseout="onnothover(this);"><i class="material-icons">biotech</i>STEM Simulation</div>
<div class="collapsible-body grey darken-4"><span>
<p>Humans, around the world, commute millions of miles every single day. A significant fraction of our
day is spent in traveling. Technology has played a very significant role in enabling more people to
commute. Be it in the form discovery, aggregation or purchase, technology has redefined the way we
commute. Imagine how technology can human experience even better in day to day transportation and
commute. What can technology do make public and private transportation much simpler?</p>
</li>
<li>
<div class="collapsible-header center-align grey darken-4" onmouseover="onhover(this);"
onmouseout="onnothover(this);"><i class="material-icons">book</i>Education</div>
<div class="collapsible-body grey darken-4"><span>
<p>Education develops effective leaders and innovators of tomorrow. Technology has played a significant
role in recent years in allowing education to have a larger reach and allowing the teaching and
learning processes to occur more smoothly. Especially during the current pandemic, the internet and
video call services have allowed for learning to continue even while we are restricted at home. How
can you use your technological skills to improve education?</p>
</li>
<li>
<div class="collapsible-header center-align grey darken-4" onmouseover="onhover(this);"
onmouseout="onnothover(this);"><i class="material-icons">local_florist</i>Environmental sustainability
</div>
<div class="collapsible-body grey darken-4"><span>
<p>Sustainability refers to creating a world that can be prosperous and habitable for future generations,
and as society progresses, technology will be the at the crux of maintaining sustainability. From new
and more efficient uses of energy to combating deforestation, technology's importance to
sustainability has been especially pronounced in recent years. What can you do with technology to
create a more sustainable world?</p>
</span></div>
</li>
<li>
<div class="collapsible-header center-align grey darken-4" onmouseover="onhover(this);"
onmouseout="onnothover(this);"><i class="material-icons">show_chart</i> Data analytics </div>
<div class="collapsible-body grey darken-4"><span>
<p>As humans develop more and more digital solutions, arises the need for analysis of complex data. Such
data can be interpreted well by Artificial Intelligence. From predicting stocks to weather, this field
has immense potential. The application of Data Analytics rises by the second as companies adopt
machine learning and deep learning powered technologies. Show us what you can do with big data</p>
</span></div>
</li>
<li>
<div class="collapsible-header center-align grey darken-4" onmouseover="onhover(this);"
onmouseout="onnothover(this);"><i class="material-icons">local_hospital</i>Healthcare</div>
<div class="collapsible-body grey darken-4"><span>
<p> Health care is an essential service, and our ability to provide quality health care as well as
store, share and analyze health information is directly tied to improved technology. Particularly with
the current situation of the COVID-19 pandemic, technology has been used to create solutions to track
and minimize the spread of the virus. We look forward to seeing what technological creations you will
develop to contribute to this field.</p>
</span></div>
</li>
<li>
<div class="collapsible-header center-align grey darken-4" onmouseover="onhover(this);"
onmouseout="onnothover(this);"><i class="material-icons">videogame_asset</i>Game Development(6-8th Grade)
</div>
<div class="collapsible-body grey darken-4"><span>
<p>Video games are a great way to have fun and learn code at the same time!</p>
<p>Use your knowledge of coding to make fun and interactive game for everyone to enjoy!</p>
<p>For this theme, we expect participants to be creative and innovative and have some kind of unique
idea or message in it. <b>Participants need to use programming languages; drag and drop/WYSIWYG
applications such as Scratch and MIT App Inventor are strictly not allowed.</b></p>
</span></div>
</li>
</ul>
<div class="row hide-on-small-only">
<div class="col s12">
<section class="theme-card-list">
<article class="theme-card">
<div class="theme-card-title"><i class="material-icons md-48">directions_transit</i> STEM
Simulation</div>
<div class="theme-card-content">This exciting new theme will give participants the opportunity to design
a simulation based on STEM principles. The project can take multiple directions, including but not
limited to data science, physics, economics, and more</div>
<div class="theme-card-example">Examples: Fluid simulation, circuit builder, model solar system</div>
</article>
<article class="theme-card">
<div class="theme-card-title"><i class="material-icons md-48">book</i> Education</div>
<div class="theme-card-content">Education develops effective leaders and innovators of tomorrow.
Technology has played a significant role in recent years in allowing education to have a larger reach
and allowing the teaching and learning processes to occur more smoothly. Especially during the current
pandemic, the internet and video call services have allowed for learning to continue even while we are
restricted at home. How can you use your technological skills to improve education?</div>
<div class="theme-card-example">Examples: Worksheet Generator and Note Taking App</div>
</article>
<article class="theme-card">
<div class="theme-card-title"><i
class="material-icons md-48">local_florist</i> <span>Environmental Sustainability</span>
</div>
<div class="theme-card-content">Sustainability refers to creating a world that can be prosperous and
habitable for future generations, and as society progresses, technology will be the at the crux of
maintaining sustainability. From new and more efficient uses of energy to combating deforestation,
technology's importance to sustainability has been especially pronounced in recent years. What can you
do with technology to create a more sustainable world?</div>
<div class="theme-card-example">Examples: Carbon Footprint Calculator and Smart Bulb</div>
</article>
</section>
<section class="theme-card-list">
<article class="theme-card">
<div class="theme-card-title"><i class="material-icons md-48">local_hospital</i> Healthcare
</div>
<div class="theme-card-content">Health care is an essential service, and our ability to provide quality
health care as well as store, share and analyze health information is directly tied to improved
technology. Particularly with the current situation of the COVID-19 pandemic, technology has been used
to create solutions to track and minimize the spread of the virus. We look forward to seeing what
technological creations you will develop to contribute to this field.</div>
<div class="theme-card-example">Examples: Fitness Tracker and COVID-19 Detector</div>
</article>
<article class="theme-card">
<div class="theme-card-title"><i class="material-icons md-48">videogame_asset</i> Game
Development (Grades 6 - 8 Only)</div>
<div class="theme-card-content">Video games are a great way to have fun and learn code at the same time!
</br></br> For this theme, we expect participants to be creative and innovative and have some kind of
unique idea or message in it. Participants need to use programming languages and drag and drop/WYSIWYG
applications such as Scratch and MIT App Inventor are strictly not allowed.</div>
</article>
</section>
</div>
</div>
<h3 class="center-align page-headings" style="color: black !important;">Meet the Core Team</h3>
<div>
<figure>
<img src="images/person_1.png" style="width: 256px; height: 256px;">
<figcaption>Pranav Menon</figcaption>
</figure>
<figure>
<img src="images/person_2.png" style="width: 256px;">
<figcaption>Saanika Gupta</figcaption>
</figure>
<figure>
<img src="images/person_3.png" style="width: 256px; height: 256px;">
<figcaption>Aarush Mehrotra</figcaption>
</figure>
<figure>
<img src="images/person_4.png" style="width: 256px; height: 256px;">
<figcaption>Ram Velamuri</figcaption>
</figure>
<figure>
<img src="images/person_5.png" style="width: 256px; height: 256px;">
<figcaption>Jahnavi Thejo Prakash</figcaption>
</figure>
<figure>
<img src="images/person_6.png" style="width: 256px; height: 256px;">
<figcaption>Divya Vijaykrishnan</figcaption>
</figure>
<figure>
<img src="images/person_7.png" alt="Aditya Lingam" style="width: 256px; height: 256px;">
<figcaption>Aditya Lingam</figcaption>
</figure>
<figure>
<img src="images/person_8.png" alt="Pratham Mishra" style="width: 256px; height: 256px;">
<figcaption>Pratham Mishra</figcaption>
</figure>
</div>
<!-- <h5 class="flow-text center-align">Sponsor themes</h5>
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header center-align grey darken-3" onmouseover="onhover(this);" onmouseout="onnothover(this);"><i class="material-icons">filter_drama</i>.TECH website innovation</div>
<div class="collapsible-body grey darken-3">
<div class="row">
<div class="col s6">
<span>.TECH is a new domain extension that has become the de facto online address for all things technology.
With over 250K domain registrations in the past 2 years, it has seen a rapid adoption by developers, startups,
innovators, tech brands and influencers, including bigwigs like Viacom.tech, TNW.tech, CES.tech, Hollywood.tech, etc.
<br>
<br>
Sponsored by dotTech domains, teams that host their website and/or app on the .tech domain
are eligible for this theme and will win special prizes.</span>
</div>
<div class="col s3 offset"><a href="http://get.tech"><img class="responsive-img" src="images/sponsors/dotTech.png"></a></div>
</div>
</div>
</li>
</ul>
</section>
</div>
<div class="container">
<section id="prizes">
<div class="card grey darken-4">
<div class="card-content">
<h2 class="center-align"><b>Prizes Worth ₹1.6 Lakhs up for grabs</b>.</h2>
<h4 class="center-align"><b>Stand a chance to win a trip to Stockholm</b></h4> -->
<section id="prizes">
<div class="card grey darken-3 prize">
<div class="card-content">
<center>
<h3>Total cash prizes worth <b>₹75,000</b></h3>
</center>
</div>
</div>
<div class="card grey darken-3 prize">
<div class="card-content">
<center>
<h3>Exclusive participation perks from our sponsors</h3>
</center>
</div>
</div>
</section>
<!-- <h5 class="center-align">More prizes will be announced soon.</h5> -->
</div>
</div>
</section>
</div>
<!-- <div class="parallax-container">
<div class="parallax"><img src="images/servers_room-wallpaper-2048x1152.jpg" alt="images/bgbackup.jpg"></div>
</div> -->
<section>
<div class="container">
<div class="row"></div>
<section id="faq" class="">
<div class="card grey darken-4">
<div class="card-content">
<h3 class="center-align">FAQ</h3>
<center>
<p class="grey-text text-lighten-4">Email us at <a
href="mailto:oakcodefest@oakridge.in">oakcodefest@oakridge.in</a> for further queries</p>
</center>
</div>
<div class="card-tabs grey darken-4">
<ul class="tabs tabs-fixed-width">
<li class="tab grey darken-4"><a class="active" href="#questions1">Participation Details</a></li>
<!-- <li class="tab grey darken-4"><a href="#questions2">Event Details</a></li> -->
<!-- <li class="tab grey darken-4"><a href="#accommodation_faq">accommodation</a></li> -->
<li class="tab grey darken-4"><a href="#questions3">Idea Details</a></li>
<li class="tab grey darken-3"><a href="#dates">Important Dates</a></li>
</ul>
</div>
<div class="card-content grey darken-4">
<!-- <div id="questions2" class="">
<ul class="collapsible grey darken-4" data-collapsible="accordion">
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">free_breakfast</i>Will I be provided food?</div>
<div class="collapsible-body grey darken-2 white-text"><span>Yes, meals, snacks and beverages will be provided at the event at no extra cost.</span></div>
</li>
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">wifi</i>Do I have to arrange for an internet connection?</div>
<div class="collapsible-body grey darken-2 white-text"><span>Internet will be provided at the event, but we recommend you carry a hotspot or dongle for faster and consistent internet.</span></div>
</li>
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">place</i>Do I have to stay the night?</div>
<div class="collapsible-body grey darken-2 white-text"><span>We recommend that you stay during the night as it gives you more time to work on your project. However, it is not required to stay the night. If you choose to stay, there will be food, beverages, and bean bags provided. For more information on accommodation, go to the "accommodation" tab under the FAQ heading.</span></div>
</li>
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">access_time</i>What are the timings for the event?</div>
<div class="collapsible-body grey darken-2 white-text"><span>The event is from 9:30 AM on 18th Jan 2020 (Saturday) to 3:30-4:00 PM on 19th Jan 2020 (Sunday)</span></div>
</li>
</ul>
</div> -->
<!-- <div id="accommodation_faq" class="">
<ul class="collapsible grey darken-4" data-collapsible="accordion">
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">place</i>Is accommodation only provided for students? Where is the accommodation?</div>
<div class="collapsible-body grey darken-2 white-text"><span>accommodation is only for participating students and only during the event, not before or after. The accommodation is at the venue school where there will be beds to sleep and areas to work, rest and game. </span></div>
</li>
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">place</i>Is accommodation provided for accompanying parents as well?</div>
<div class="collapsible-body grey darken-2 white-text"><span>Accompanying parents cannot be at the school due to security reasons but can come watch the opening and closing ceremony. </span></div>
</li>
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">place</i>Do I have to stay the night?</div>
<div class="collapsible-body grey darken-2 white-text"><span>We recommend that you stay during the night as it gives you more time to work on your project. However, it is not required to stay the night. If you choose to stay, there will be food, beverages, and bean bags provided.</span></div>
</li>
</ul>
</div> -->
<div id="questions3" class="grey darken-4">
<ul class="collapsible grey darken-4" data-collapsible="accordion">
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">language</i>What
languages/software can I use?</div>
<div class="collapsible-body grey darken-2 white-text"><span>Any language, technology stack, or
library can be used to create your solutions, except drag and drop software like MIT App
Inventor.</span></div>
</li>
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">lightbulb_outline</i>Do we
need to have the idea/solution fully working?</div>
<div class="collapsible-body grey darken-2 white-text"><span>The entire idea need not be implemented,
however, the submission should be functional so that it can be reviewed by the judges.</span>
</div>
</li>
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">copyright</i>Who will own the
IP (Intellectual Property) rights to the solution?</div>
<div class="collapsible-body grey darken-2 white-text"><span>The developer/developers of the
web/mobile application will have all rights and own the IP of the product. However, all code needs
to be in the public domain (open source) so that it can be evaluated by the judges.</span></div>
</li>
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">cached</i>Can I submit
previously developed projects?</div>
<div class="collapsible-body grey darken-2 white-text"><span>No, any submission made to the event must
be developed within the 24 hour time limit and must fit the selected theme.</span></div>
</li>
</ul>
</div>
<div id="questions1" class="grey darken-4">
<ul class="collapsible grey darken-4" data-collapsible="accordion">
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">people</i>Who can participate
in this event?</div>
<div class="collapsible-body grey darken-2 white-text"><span>Anyone between
grades 6 and 12 with a passion for technology.</span></div>
</li>
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">laptop</i>What platform will
Codefest be held on?</div>
<div class="collapsible-body grey darken-2 white-text"><span>The opening and closing ceremonies will be hosted on Zoom while
the rest of the event will be held on Microsoft Teams.</span></div>
</li>
<!-- <li>
<div class="collapsible-header grey darken-4"><i class="material-icons">monetization_on</i>Do you need to pay for this event?</div>
<div class="collapsible-body grey darken-2 white-text"><span>Yes, there is a ₹400 registration fee per person that MUST be paid on the first day of the event.</span></div>
</li> -->
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">monetization_on</i>What does
my registration fee go towards?</div>
<div class="collapsible-body grey darken-2 white-text"><span>The ₹300 will cover your access to the virtual venue and all other platforms that we'll use to communicate with participants and would make you eligible for the rewards provided by our sponsors. Proceeds from the Oakridge Codefest will contribute to a fund for a donation to charity. </span></div>
</li>
<li>
<div class="collapsible-header grey darken-4"><i class="material-icons">code</i>Is there a selection process for the Oakridge Codefest? </div>
<div class="collapsible-body grey darken-2 white-text"><span>We at Codefest believe that everyone with a passion for coding should be given the opportunity to participate in the event. To facilitate this, our team will guide all teams towards creating a solid idea for their projects. Participants will receive a final confirmation once their idea has been vetted by the Codefest team at least 2 weeks before the event.</span></div>
</li>
</ul>
</div>
<div id="dates">
<div class="timeline">
<div class="timeline-event">
<div class="card timeline-content">
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Registration Opens<i
class="material-icons right">more_vert</i></span>
<p class="black-text">Registration for the codefest opens on the 19<sup>th</sup> of December</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Registration Opens<i
class="material-icons right">close</i></span>
<p class="black-text">Participants are expected to sign up for the event and submit a detailed
idea on what exactly they are going to do at the event. The participants will be evaluated based
on this idea.</p>
</div>
</div>
<div class="timeline-badge blue white-text"><i class="material-icons">assignment</i></div>
</div>
<div class="timeline-event">
<div class="card timeline-content">
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Registration Closes<i
class="material-icons right">more_vert</i></span>
<p class="black-text">Registrations close in mid. January</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Registration Closes<i
class="material-icons right">close</i></span>
<p class="black-text">Participants will not be allowed to register after this date under any
circumstances. After registration closes, participants will be evaluated based on the idea they
submitted.</p>
</div>
</div>
<div class="timeline-badge red white-text"><i class="material-icons">close</i></div>
</div>
<div class="timeline-event">
<div class="card timeline-content">
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Evaluation Completed<i
class="material-icons right">more_vert</i></span>
<p class="black-text">Selected Participants will be notified shortly after registering.</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Evaluation Completed<i
class="material-icons right">close</i></span>
<p class="black-text">The list of selected participants will be put up on the website. All
selected participants will be emailed special event invite links.</p>
</div>
</div>
<div class="timeline-badge green white-text"><i class="material-icons">check</i></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="sponsor">
</div>
<div class="row">
<div class="col s12">
<h3 class="center-align" style="color: black !important;">Sponsors</h3>
</div>
</div>
<!--
<div class="row">
<div class="col s6 offset-s3">
<h4 class="center-align">Title sponsor</h4>
</div>
</div>
-->
<!--
<div class="row disabled" id="">
<center>
<div class="container">
<div class="col s6 offset-s3">
<center>
<a href="https://www.teamhgs.com" target="_blank">
<img class="responsive-img cf-sponsor-logo" id="HGSLogo" src="images/sponsors/hgs-white.png" />
</a>
<div class="hidden">
<video height="300px" class="sponsor-video" autoplay muted controls id="">
<source src="media/sponsors/HGS Listen 2.0.mp4" type="video/mp4">
</video>
</div>
</center>
</div>
</div>
-->
<!-- <div class="row">
<div class="col s6">
<center>
<video autoplay height="200px" controls id="HGSVid" muted>
<source src="Codefest2020Logo.mp4" type="video/mp4">
<source src="Codefest2020Logo.webm" type="video/mp4">
</video>
</center>
</div>
<a href="https://www.cisco.com" class = "col s6"><img class="responsive-img" id="CiscoLogo" src="images/sponsors/Cisco.png" /></a>
</div> -->
<!-- <div class="row hidden">
<center>
<video autoplay height="400px" controls id="HGSVid" muted>
<source src="Codefest2020Logo.mp4" type="video/mp4">
<source src="Codefest2020Logo.webm" type="video/mp4">
</video>
</center>
</div> -->
<!-- <div class="row ">
<div class="col s12">
<h4 class="center-align">Financial sponsors</h4>
</div>
</div>
<div class="row ">
<center>
<div class="col s12">
<a href="https://www.traveltolearn.co.in/" target="_blank"><img class="responsive-img" id="travel-to-learn" src="images/sponsors/Travel to learn white text.png"></a>
</div>
</center>
</div>
<div class="row">
<div class="col s12">
<h4 class="center-align">Knowledge partner</h4>
</div>
</div>
<div class="row valign-wrapper center-align">
<div class="col s3"></div>
<div class="col s6">
<a href="https://www.ibm.com" target="_blank"><img class="responsive-img" src="images/sponsors/ibm.png"></a>
</div>
<div class="col s3"></div>
</div> -->
<!--
<div class="row ">
<div class="col s12">
<h4 class="center-align">Associate sponsor</h4>
</div>
</div>
-->
<!--
<div class="row valign-wrapper center-align">
<div class="col s4 offset-s4">
<a href="https://www.volvo.com/" target="_blank"><img class="responsive-img cf-sponsor-logo" src="images/sponsors/Volvo_iron_mark_CMYK_EPS/Volvo_iron_mark_CMYK.png"></a>
<div class="hidden">
<video height="300px" muted controls id="" class="sponsor-video">
<source src="Volvo trucks processed.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
-->
<!--
<div class="row ">
<div class="col s12">
<h4 class="center-align">Financial sponsor</h4>
</div>
</div>
-->
<!--
<div class="row valign-wrapper center-align">
<div class="col s3">
</div>
<div class="col s6">
<a href="https://blr.alg.academy/" target="_blank"><img class="responsive-img" src="images/sponsors/algorithmics.png" alt="" /></a>
</div>
<div class="col s3">
</div>
</div>
-->
<div class="row ">
<div class="col s12">
<h3 class="center-align" style="color: black !important;">Title sponsor</h4>
<div class="row valign-wrapper center-align">
<div class="col s3"></div>
<div class="col s6">
<a href="https://www.teamhgs.com" target="_blank" rel="noopener noreferrer">
<img class="responsive-img cf-sponsor-logo" id="HGSLogo" src="images/sponsors/hgs-white.png">
</a>
<div class="hidden">
<video height="300px" class="sponsor-video" autoplay muted controls id="">
<source src="media/sponsors/HGS Listen 2.0.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="col s3"></div>
</div>
</div>
</div>
<div class="row ">
<div class="col s12">
<h4 class="center-align" style="color: black !important;">In-kind partners</h4>
<div class="row valign-wrapper center-align">
<div class="col s3"></div>
<div class="col s3">
<a href="https://balsamiq.com/" target="_blank" rel="noopener noreferrer"><img class="responsive-img"
src="images/sponsors/balsamiq.png"></a>
</div>
<div class="col s3">
<div class="container"><img class="responsive-img" src="images/sponsors/under-the-cloche.png"></div>
</div>
<div class="col s3"></div>
</div>
<!-- <div class="row">
<div class="col s6 offset-s3">
<h4 class="center-align">Virtual venue Partner</h4>
</div>
</div> -->
<!-- <div class="row">
<div class="col s2 offset-s5" style="background-color: rgba(255, 255, 255, 0.5); border-radius: 100px; padding: 10px;">
<center>
<a href="http://branch.gg/" target="_blank"><img class="responsive-img" src="images/sponsors/branchgg.png"></a>
</center>
</div>
</div> -->
</section>
<div class="container">
<section class="grey darken-4">
<div class="row" style="padding-top:10px;padding-bottom:-150px;">
<div class="col s12" style="padding-top:20px;margin-bottom:0">
<center>
<div style="font-size: 60px;"><b>Photo archive</b></div>
</center>
</div>
</div>
<div class="row" style="padding:0px 25px;padding-bottom:15px">
<div class="col s4 photo-archive-image-container add-blur" id="photos-2018-container">
<center>
<h1><a href="https://photos.app.goo.gl/d1dYMX6xvNrVfUwJ3">2018</a></h1>
</center>
<div id="photos-2018" class="photo-archive-image">
</div>
</div>
<div class="col s4 photo-archive-image-container add-blur" id="photos-2019-container">
<center>
<h1><a href="https://photos.app.goo.gl/gGYJ8jutArw5ewnJ7">2019</a></h1>
</center>
<div id="photos-2019" class='photo-archive-image'>
</div>
</div>
<div class="col s4 photo-archive-image-container add-blur" id="photos-2020-container">
<center>
<h1><a href="https://photos.app.goo.gl/RsQdaypjbmtdctnt8">2020</a></h1>
</center>
<div id="photos-2020" class='photo-archive-image'>
</div>
</div>
</div>
</section>
</div>
<div class="container">
<section id="Codefest-18">
<div class="row">
<h1 class="center-align page-headings" style="color: black !important;">Winners of Codefest 2018</h1>
</div>
</section>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/winners.jpg"></div>
</div>
<br>
<br>
<div class="container">
<section id="Codefest-19">
<div class="row">
<h1 class="center-align page-headings" style="color: black !important;">Winners of Codefest 2019</h1>
</div>
</section>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/winners2019.jpg"></div>
</div>
<br>
<br>
<div class="container">
<section id="Codefest-20">
<div class="row">
<h1 class="center-align page-headings" style="color: black !important;">Winners of Codefest 2020</h1>
</div>
</section>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/winners2020.png"></div>
</div>
<div class="container">
<!--<div class="divider white"></div>
<div class="row"></div>
<section id="venue">
<div class="row">
<div class="col s6">
<div class="video-container"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3889.31333819796!2d77.74977931521092!3d12.887562220202788!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae0d539b9bf9ef%3A0x8173c2437f9bc14d!2sOakridge+International+School!5e0!3m2!1sen!2sin!4v1503659601937"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
</div>
<div class="col s6">
<h4>Venue:</h4>
<p class="flow-text">The Oakridge Codefest will be held at the Oakridge International Bangalore Campus.</p>
</div>
</div>
</section> -->
<!-- <div class="divider white"></div> -->
</div>
</section>
<!-- Modal Structure -->
<div id="terms" class="modal modal-fixed-footer">
<div class="modal-content">
<div class="row">
<h3 class="black-text center-align">Terms and Conditions</h3>
</div>
<div class="row">
<ul class="collection">
<li class="collection-item black-text">No one over the age of 19 is allowed to participate. </li>