-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathphilosophy.html
328 lines (278 loc) · 17.3 KB
/
philosophy.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-174226233-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-174226233-1');
</script>
<meta name="author" content="Web development team, Hackclub VIT Chennai">
<link rel="icon" href="assests/output-onlinepngtools.webp" type="image/icon type">
<meta charset="utf-8">
<link rel="stylesheet" href="assests/css/home.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This webpage contains all the philosophical thoughts and ideas about hackclub.">
<meta name="keywords" content="phislosophy, Hackclub VIT Chennai,Hack,Club,hack club,hackclub chennai,hackathon,makeathon, robothon, app development, VIT, website development, machine learning, Blockchain,cryptocurrency,Artificial intelligence ">
<link href="https://fonts.googleapis.com/css?family=Muli:400,700,800&display=swap" rel="stylesheet">
<title>Philosophy</title>
</head>
<body data-gr-c-s-loaded="true" style="background-color: #fae0cd;" oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;">
<!-- Splash (top 100vh of page) -->
<div id="splash">
<a href="home.html"><img id="logo" src="assests/output-onlinepngtools.webp" alt="hack club logo"></a>
<!-- Responsive navbar -->
<div id="topnav" class="">
<div class="nav-page">
<a href="home.html" class="page ">Home</a>
<div class="nav-indicator"></div>
</div>
<div class="nav-page">
<a href="workshops.html" class="page">Hack Start</a>
<div class="nav-indicator"></div>
</div>
<div class="nav-page">
<a href="sponsor.html" class="page">Sponsor Us</a>
<div class="nav-indicator"></div>
</div>
<div class="nav-page">
<a href="contact.html" class="page">Contact</a>
<div class="nav-indicator"></div>
</div>
<a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
<i class="material-icons">menu</i>
</a>
</div>
<!-- Top Bar -->
<div id="mobile-bar"></div>
<!-- Splash body -->
<div id="splash-body">
<div id="splash-img">
</div>
<div id="splash-content" class="ml2">
<h1 class="ml3">Great Thinkers</h1>
<h2>WE<span>'</span>RE AT OUR BEST
WHEN WE<span>'</span>RE
MAKING.</h2>
</div>
</div>
<!-- Down indicator -->
<i id="down-indicator" class="material-icons" onclick="scrollToContent();">
keyboard_arrow_down
</i>
<!-- Background -->
<div id="splash-background"></div>
</div>
<div id="content">
<div id="about" class="content-section">
<h1>Coding is a superpower.</h1>
<div id="about-content" class="content">
<h2><p>Learning to code is uniquely like gaining a superpower: it converts you from a consumer to a creator. Suddenly,
computers become a tool for creating.</p></h2>
</div>
<br>
</div>
<div id="about" class="content-section">
<h1>Make, from anywhere.</h1>
<div id="about-content" class="content">
<h2>
<p>There<span>'</span>s never been a better time for making: anywhere in the world, anyone with a laptop and an internet connection can
learn to make an app. Building things has never been so globally democratized.</p>
</h2>
</div>
<br>
</div>
<div id="about" class="content-section">
<h1>Hack, hack, hack.</h1>
<div id="about-content" class="content">
<h2>
<p>The goal of Hack Club is to help you become a hacker. We want a space at every school where people are making
interesting things with code, every week. Schools don<span>'</span>t provide that, so we<span>'</span>re creating it in every school to make
building things accessible to everyone.</p>
</h2>
</div>
<br>
</div>
<div id="about" class="content-section">
<h1>Start building.</h1>
<div id="about-content" class="content">
<h2>
<p>Most coding classes teach you programming concepts instead of how to write real code—it<span>'</span>s like trying to learn carpentry
without any wood. So at Hack Club, you learn to code entirely through building things. You start with no experience and
build and ship a project every meeting.</p>
</h2>
</div>
<br>
</div>
<div id="about" class="content-section">
<h1>Learn as you build.</h1>
<div id="about-content" class="content">
<h2>
<p>Just as the best carpenters didn<span>'</span>t learn in the classroom, neither did the best programmers. Through our workshops,
you<span>'</span>ll be walked through building projects. Starting out, you won<span>'</span>t understand how the code works, but you<span>'</span>ll build
understanding as you go. You<span>'</span>ll get stuck along the way, but we<span>'</span>re here to help.</p>
</h2>
</div>
<br>
</div>
<div id="about" class="content-section">
<h1>Be part of a community.</h1>
<div id="about-content" class="content">
<h2>
<p>Hack Club gives you a worldwide community of thousands of other young makers to talk to. We<span>'</span>re artists, writers,
engineers, tinkerers, campers, filmmakers, volunteers. We make things. We help one another. We have fun. Join us.</p>
</h2>
</div>
<br>
</div>
</div>
<br>
<br>
<div id="footer">
<div id="footer-content">
<img id="footer-logo" src="assests/output-onlinepngtools.webp" alt="hack club logo">
<div class="footer-links">
<div class="footer-links-column">
<a>
<h3>Hack Club</h3>
</a>
<a href="philosophy.html">Philosophy</a>
<a href="https://hackclub.com/slack/">Community</a>
</div>
<div class="footer-links-column">
<a>
<h3>Resources</h3>
</a>
<a href="sponsor.html">Sponsor Us</a>
<a href="coc.html" target="_blank">Hack Club Code of Conduct</a>
<a href="workshops.html" target="_blank">Hack Start</a>
<div>
<a target="_self" rel="noopener" href="https://hackclub.com/slack/"
title="Hack Club on slack-fill" class="css-lrwjdh"><svg fill-rule="evenodd"
clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"
xmlns="http://www.w3.org/2000/svg" aria-label="slack-fill" viewBox="0 0 32 32"
preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16 4c10 0 12 2 12 12s-2 12-12 12S4 26 4 16 6 4 16 4zm-2.746 4.122a1.605 1.605 0 0 1 1.745.347 1.6 1.6 0 0 1 .468 1.131v1.6h-1.6a1.603 1.603 0 0 1-1.48-2.212 1.598 1.598 0 0 1 .867-.866zM9.6 12.267h4.267a1.604 1.604 0 0 1 1.478.988A1.596 1.596 0 0 1 15 14.997a1.602 1.602 0 0 1-1.132.47H9.6a1.605 1.605 0 0 1-1.479-.989 1.595 1.595 0 0 1 .347-1.742 1.601 1.601 0 0 1 1.132-.47zm14.279.988a1.596 1.596 0 0 1-.347 1.742 1.6 1.6 0 0 1-1.132.47h-1.6v-1.6a1.596 1.596 0 0 1 .987-1.478 1.605 1.605 0 0 1 1.745.347c.149.148.266.325.347.519zM19.733 9.6v4.267a1.594 1.594 0 0 1-.987 1.477 1.605 1.605 0 0 1-1.226 0 1.602 1.602 0 0 1-.987-1.477V9.6a1.596 1.596 0 0 1 .987-1.478 1.605 1.605 0 0 1 1.745.347 1.598 1.598 0 0 1 .468 1.131zm-1.6 14.4a1.603 1.603 0 0 0 1.6-1.6 1.595 1.595 0 0 0-.987-1.478 1.605 1.605 0 0 0-.613-.122h-1.6v1.6a1.597 1.597 0 0 0 1.6 1.6zm0-4.267H22.4a1.605 1.605 0 0 0 1.479-.988 1.596 1.596 0 0 0-.347-1.742 1.6 1.6 0 0 0-1.132-.47h-4.267a1.605 1.605 0 0 0-1.478.989A1.596 1.596 0 0 0 17 19.264a1.602 1.602 0 0 0 1.132.47zm-10.012-.988a1.596 1.596 0 0 1 .347-1.742 1.601 1.601 0 0 1 1.132-.47h1.6v1.6a1.596 1.596 0 0 1-.987 1.478 1.605 1.605 0 0 1-1.745-.347 1.597 1.597 0 0 1-.347-.519zm4.146 3.655v-4.267a1.593 1.593 0 0 1 .987-1.477 1.603 1.603 0 0 1 1.745.347 1.6 1.6 0 0 1 .468 1.13V22.4a1.597 1.597 0 0 1-1.6 1.6 1.603 1.603 0 0 1-1.6-1.6z">
</path>
</svg></a>
<a target="_blank" rel="noopener" href="https://github.com/HackclubVIT" title="Hack Club on github"
class="css-lrwjdh"><svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round"
stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" aria-label="github"
viewBox="0 0 32 32" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32"
height="32">
<g>
<path
d="M18.837,27.966c8.342,-0.241 9.163,-1.997 9.163,-11.966c0,-11 -1,-12 -12,-12c-11,0 -12,1 -12,12c0,9.995 0.826,11.734 9.228,11.968c0.073,-0.091 0.1,-0.205 0.1,-0.321c0,-0.25 -0.01,-2.816 -0.015,-3.699c-3.037,0.639 -3.678,-1.419 -3.678,-1.419c-0.497,-1.222 -1.213,-1.548 -1.213,-1.548c-0.991,-0.656 0.075,-0.643 0.075,-0.643c1.096,0.075 1.673,1.091 1.673,1.091c0.974,1.617 2.556,1.15 3.178,0.879c0.099,-0.683 0.381,-1.15 0.693,-1.414c-2.425,-0.267 -4.974,-1.175 -4.974,-5.23c0,-1.155 0.426,-2.099 1.124,-2.839c-0.113,-0.268 -0.487,-1.344 0.107,-2.8c0,0 0.917,-0.285 3.003,1.084c0.871,-0.235 1.805,-0.352 2.734,-0.356c0.927,0.004 1.861,0.121 2.734,0.356c2.085,-1.369 3,-1.084 3,-1.084c0.596,1.456 0.221,2.532 0.108,2.8c0.7,0.74 1.123,1.684 1.123,2.839c0,4.065 -2.553,4.96 -4.986,5.221c0.392,0.327 0.741,0.973 0.741,1.96c0,0.946 -0.006,2.619 -0.01,3.728c-0.002,0.549 -0.003,0.959 -0.003,1.074c0,0.109 0.029,0.224 0.095,0.319Z">
</path>
</g>
</svg></a>
<a target="_blank" rel="noopener" href="https://www.instagram.com/hackclubvitc"
title="Hack Club on instagram" class="css-lrwjdh"><svg fill-rule="evenodd"
clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"
xmlns="http://www.w3.org/2000/svg" aria-label="instagram" viewBox="0 0 32 32"
preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32">
<g>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16 6c5.1 0 7.247.575 8.336 1.664C25.425 8.753 26 10.9 26 16s-.575 7.247-1.664 8.336C23.247 25.425 21.1 26 16 26s-7.247-.575-8.336-1.664C6.575 23.247 6 21.1 6 16s.575-7.247 1.664-8.336C8.753 6.575 10.9 6 16 6zm0-2c10 0 12 2 12 12s-2 12-12 12S4 26 4 16 6 4 16 4z">
</path>
<path
d="M16 9.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM16 20a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7.845-10.405a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0z">
</path>
</g>
</svg></a>
<a target="_blank" rel="noopener" href="mailto:[email protected]" title="Hack Club on email"
class="css-lrwjdh"><svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round"
stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" aria-label="email"
viewBox="0 0 32 32" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32"
height="32">
<g>
<path
d="M25.709,21.048c0.241,-1.212 0.291,-2.792 0.291,-5.048c0,-2.256 -0.05,-3.836 -0.291,-5.048c-0.216,-1.11 -0.533,-1.577 -0.864,-1.853c-0.384,-0.32 -1.094,-0.641 -2.597,-0.844c-1.531,-0.209 -3.522,-0.255 -6.248,-0.255c-2.725,0 -4.717,0.046 -6.248,0.255c-1.503,0.203 -2.213,0.524 -2.597,0.844c-0.331,0.276 -0.648,0.743 -0.864,1.853c-0.241,1.212 -0.291,2.792 -0.291,5.048c0,2.256 0.05,3.836 0.291,5.048c0.216,1.11 0.533,1.577 0.864,1.853c0.384,0.32 1.094,0.641 2.597,0.843c1.531,0.21 3.523,0.256 6.248,0.256c2.726,0 4.717,-0.046 6.248,-0.256c1.503,-0.202 2.213,-0.523 2.597,-0.843c0.331,-0.276 0.648,-0.743 0.864,-1.853Zm-9.709,4.952c11,0 12,-0.833 12,-10c0,-9.167 -1,-10 -12,-10c-11,0 -12,0.833 -12,10c0,9.167 1,10 12,10Zm-8.651,-14.774c0.411,-0.344 1.023,-0.289 1.366,0.124c1.335,1.601 5.617,5.318 7.285,6.592c1.696,-1.296 5.931,-4.963 7.285,-6.592c0.343,-0.413 0.955,-0.468 1.366,-0.124c0.412,0.344 0.467,0.957 0.124,1.37c-0.695,0.838 -2.02,2.129 -3.429,3.404c1.409,1.275 2.734,2.566 3.429,3.404c0.343,0.412 0.288,1.026 -0.124,1.37c-0.411,0.344 -1.023,0.289 -1.366,-0.124c-0.662,-0.798 -2.015,-2.083 -3.422,-3.339c-1.102,0.95 -2.137,1.789 -2.841,2.291c-0.302,0.213 -0.644,0.398 -1.022,0.398c-0.378,0 -0.72,-0.185 -1.021,-0.398c-0.691,-0.492 -1.728,-1.335 -2.835,-2.292c-1.414,1.264 -2.775,2.556 -3.429,3.34c-0.343,0.413 -0.955,0.468 -1.366,0.124c-0.411,-0.344 -0.467,-0.957 -0.124,-1.37l0.001,-0.001c0.683,-0.822 2.018,-2.119 3.436,-3.403c-1.418,-1.284 -2.753,-2.582 -3.436,-3.403l-0.001,-0.001c-0.343,-0.413 -0.287,-1.026 0.124,-1.37Z">
</path>
</g>
</svg>
</a>
</a>
</div>
</div>
<div class="footer-links-column"></div>
</div>
<div id="footer-tagline">
<h5>Made with <span>♡</span>, by Students of Hack Club</h5>
</div>
</div>
<div id="footer-background"></div>
</div>
<script>
const scrollToContent = function () {
document.getElementById('content').scrollIntoView({
behavior: 'smooth'
});
};
const sorted = actives.sort((a, b) =>
a.name === b.name
? a.url.localeCompare(b.url)
: a.name.localeCompare(b.name)
);
for (let director of sorted) {
const div = document.createElement('div');
div.className = 'team-member';
const img = document.createElement('img');
img.setAttribute('src', director.url);
div.appendChild(img);
const h4 = document.createElement('h4');
h4.innerHTML = director.name;
div.appendChild(h4);
document.getElementById('team-content').appendChild(div);
}
function toggleMenu() {
let topnav = document.getElementById('topnav');
if (topnav.className === '') {
topnav.className += 'responsive';
} else {
topnav.className = '';
}
}
var textWrapper = document.querySelector('.ml3');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.ml3',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml2');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml2 .letter',
scale: [4,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 950,
delay: (el, i) => 70*i
}).add({
targets: '.ml2',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
</body>
</html>