-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
157 lines (138 loc) · 6.51 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
<!DOCTYPE html>
<head>
<title>HackMann 2017</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="container">
<div id="header" class="row">
<div class="center-vertical col-xs-12">
<div id="header-logo" class="text-center animated fadeInDown">
<div class="chevron chevron-left animated chevronLeftSlide">
<img src="chevron.svg" alt="chevron-left" />
</div>
<h1 id="header-logo-text" class="animated headerTextAppear"><span class="hack">Hack</span><span class="mann">MANN</span> <b>2017</b></h1>
<div class="chevron chevron-right animated chevronRightSlide">
<img src="chevron.svg" alt="chevron-right" />
</div>
</div>
<h2 class="text-center animated fadeIn">Hack your code to <code id="bits">0101</code>.</h2>
<h3 class="text-center animated fadeInUp"><b><span class="text-primary">June 3-4, 2017</span></b> from 1PM to 1PM<br />Horace Mann School, Bronx NY</h3>
<h1 class="text-center animated fadeInUp">
<a href="https://goo.gl/forms/Jz8rK3TTSKxuVKJi1" class="btn btn-primary btn-lg" role="button">Apply Today!</a>
</h1>
</div>
</div>
</div>
<div class="container">
<hr />
<div id="about" class="row">
<a id="scroll-about" class="scroll-anchor"></a>
<div class="col-xs-12">
<p class="text-justify" style="font-size:1.3em"><span class="brand"><span class="hack">Hack</span><span class="mann">MANN</span></span> is a hackathon for high school students that will be hosted at the <b><span class="text-primary">Horace Mann School</span></b> in Riverdale, Bronx. On the weekend of <b><span class="text-primary">June 3-4, 2017</span></b>, teams of 1-4 students are invited to come to Horace Mann School and spend 24 hours making a hardware, software, or electrical project. Professional mentors will be available to assist students in their creations. At the end, each team will give a short presentation of its project, and the judges will decide the winners!</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h3>What goes on at a hackathon?</h3>
<p class="text-justify"><span class="brand"><span class="hack">Hack</span><span class="mann">MANN</span></span> is more than just sitting in a room programming for 24 hours. Makers will be treated to great food and snacks, fun games and activities (did somebody say laser tag?), and more.</p>
</div>
<div class="col-sm-4">
<h3>What about hardware?</h3>
<p class="text-justify"><span class="brand"><span class="hack">Hack</span><span class="mann">MANN</span></span> prides itself on being one of the first highschool hackathons to fully embrace hardware hacking. Not only will we be providing a hardware station with Arduino's, Raspberry Pi's, and more, but we will have laser cutting, 3D printing, and a fully stocked machine shop at your demand.</p>
</div>
<div class="col-sm-4">
<h3>Where is <b><span class="text-primary">Horace Mann School</span></b>?</h3>
<p class="text-justify">The school is located at:</p>
<address><b>231 West 246 Street<br />
Bronx, NY 10471<br />
</b></address>
</div>
</div>
<hr />
<!--
<div id="schedule" class="row">
<a id="scroll-schedule" class="scroll-anchor"></a>
<h3 class="text-center">Schedule</h3>
<div class="col-sm-3"></div>
<dl class="col-sm-6 dl-horizontal">
<dt>8 AM</dt>
<dd>Registration, Breakfast</dd>
<dt>9 AM</dt>
<dd>Opening Remarks</dd>
<dt>10 AM</dt>
<dd>Team Formation</dd>
<dt>11 AM</dt>
<dd>Coding</dd>
<dt>12 PM</dt>
<dd>Lunch</dd>
<dt>1 PM</dt>
<dd>Coding</dd>
<dt>6 PM</dt>
<dd>Dinner</dd>
<dt>7 PM</dt>
<dd>Judging</dd>
<dt>8 PM</dt>
<dd>Closing</dd>
</dl>
<div class="col-sm-3"></div>
</div>
<hr />
<div id="sponsors" class="row">
<a id="scroll-sponsors" class="scroll-anchor"></a>
<h3 class="text-center">Proudly sponsored by:</h3>
<div class="col-sm-2"></div>
<div class="col-sm-4">
<a href="https://www.horacemann.org/" target="_blank">
<img class="center-block" src="img/horacemann-logo.svg" alt="horacemann-logo" />
</a>
</div>
<div class="col-sm-2"></div>
</div>-->
</div>
<div id="footer" class="row">
<div class="col-xs-12">
<p class="text-right text-muted">Site design (c) 2017 HackMann</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
function formatDate(date) {
date.setDate(date.getDate()+1);
var monthNames = [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
];
var day = date.getDate();
var monthIndex = date.getMonth();
return monthNames[monthIndex] + ' ' + day;
}
window.onload = function() {
document.getElementById("signupDate").innerHTML = formatDate(new Date());
const BITS_ID = 'bits';
const BITS_TEXT = 'bits';
const BITS_ANIMATE_INTERVAL = 50.0;
const BITS_ANIMATE_DURATION = 1500.0;
var bitsTextTicks = 0;
var animateBITS_ID = window.setInterval(function() {
var len = Math.floor(bitsTextTicks / (BITS_ANIMATE_DURATION / BITS_ANIMATE_INTERVAL) * 4);
var text = BITS_TEXT;
for (i = len; i < 4; i++) {
text = text.substr(0, i) + (Math.random() > 0.5 ? '1' : '0') + text.substr(i + 1);
}
document.getElementById(BITS_ID).innerHTML = text;
bitsTextTicks++;
}, BITS_ANIMATE_INTERVAL);
window.setTimeout(function() {
window.clearInterval(animateBITS_ID);
document.getElementById(BITS_ID).innerHTML = BITS_TEXT;
}, BITS_ANIMATE_DURATION);
}
</script>
</body>
</html>