-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
386 lines (377 loc) · 14.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="img/miniLogo.png" />
<script src="script.js"></script>
<title>Hacklub</title>
</head>
<body>
<div id="main">
<nav>
<input id="nav-toggle" type="checkbox" />
<div id="logo-image-c">
<img src="img/LOGO.png" height="80px" />
</div>
<ul class="links">
<li><a href="#headerId">Home<div class="flexBorder"></div></a></li>
<li><a href="#aboutC">About<div class="flexBorder"></div></a></li>
<li><a href="#agenda">Agenda<div class="flexBorder"></div></a></li>
<li><a href="#workshops">Workshops<div class="flexBorder"></div></a></li>
<li><a href="#faqC">FAQ<div class="flexBorder"></div></a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<header id="headerId">
<div id="heroR">
<img id="logo" src="img/LOGO.png" alt="The Logo" height="200px" />
<div id="slogan">
<span>L</span>ET'S BUILD IT, FIX IT<br />TOGETHER!<br />JOIN HACKLUB
</div>
</div>
<div id="registerR">
<a href="Registration Form/Sign-up.html">
<button id="register"><span>Register </span></button>
</a>
</div>
</header>
<section id="aboutC">
<article id="about">
<div
class="title"
onmouseover="onAbout()"
onmouseout="offAbout()"
>
<!-- <div class="mask"></div> -->
ABOUT THE EVENT
<div class="flexBorder"></div>
</div>
<div
class="content"
onmouseover="onAbout()"
onmouseout="offAbout()"
>
Hacklub, a two days event organized by CSE, will take place at ESI.
It will have a conference about: How to create a club and the
importance of it. In addition to different workshops and challenges
from different departments that a club can have. The participants
will be devised into different teams, the team who collects more
points from participating in the challenges will be the winning one.
Which will get a special gift from our club at the end.
<div class="flexBorder"></div>
</div>
</article>
<!-- <article id="faq">
<div
class="title"
onmouseover="onArticle(1)"
onmouseout="offArticle(1)"
>
FAQ
<div class="flexBorder"></div>
</div>
<div
class="content"
onmouseover="onArticle(1)"
onmouseout="offArticle(1)"
>
<strong style="font-size: 22pt; border-bottom: 1px solid white"
>Why should you join the event?</strong
><br />
If you’re interested in creating a new club we will guide you
through by showing you all the steps you need to pass by and if
you’re already a member in one we will help you to improve your
club’s workflow by the different workshops and challenges that we
will provide.<br />
<strong style="font-size: 22pt; border-bottom: 1px solid white"
>Who can join?</strong
><br />
Everyone can join the event, mostly students who would like to learn
more about how to create a new club or improve the workflow of their
club.<br />
<strong style="font-size: 22pt; border-bottom: 1px solid white"
>How to join?</strong
><br />
All you need to do is to fill the registration form.<br />
<strong style="font-size: 22pt; border-bottom: 1px solid white"
>Where will it take place?</strong
><br />
It will take place at ESI ecole nationale supérieure
d’informatique.<br />
<strong style="font-size: 22pt; border-bottom: 1px solid white"
>What if I don’t have a team for the challenge?</strong
><br />
Not to worry, we will help you find teammates after announcing the
challenges.<br />
<div class="flexBorder"></div>
</div>
</article> -->
</section>
<section id="agenda">
<div id="agendaTitleR">
<h1 id="agendaTitle">Agenda</h1>
</div>
<div id="daysR">
<div class="daySpace">
<div class="day">
<div class="num" onmouseover="onDay(0)" onmouseout="offDay(0)">
First Day
</div>
<div
class="content"
onmouseover="onDay(0)"
onmouseout="offDay(0)"
>
<div class="activity">
<div class="time">08:00 - 08:30</div>
<div>Check In</div>
</div>
<div class="activity">
<div class="time">08:30 - 09:00</div>
<div>Opening Ceremony</div>
</div>
<div class="activity">
<div class="time">09:00 - 10:00</div>
<div>
Conference:<br />The Importance of university clubs in
student's educational path
</div>
</div>
<div class="activity">
<div class="time">10:30 - 12:00</div>
<div>
Workshops:<br />Web Design/How to get your first
professional partner
</div>
</div>
<div class="activity">
<div class="time">12:00 - 14:00</div>
<div>Lunch Break</div>
</div>
<div class="activity">
<div class="time">14:00 - 16:00</div>
<div>
Workshops:<br />Branding in modern design/Dive into the
world of motion graphics
</div>
</div>
</div>
</div>
</div>
<div class="daySpace">
<div class="day">
<div class="num" onmouseover="onDay(1)" onmouseout="offDay(1)">
Second Day
</div>
<div
class="content"
onmouseover="onDay(1)"
onmouseout="offDay(1)"
>
<div class="activity">
<div class="time">08:00 - 08:30</div>
<div>Check In</div>
</div>
<div class="activity">
<div class="time">08:45 - 09:30</div>
<div>Announce the department's challenges</div>
</div>
<div class="activity">
<div class="time">09:30 - 10:00</div>
<div>Team building</div>
</div>
<div class="activity">
<div class="time">10:00 - 12:00</div>
<div>Challenges kick off</div>
</div>
<div class="activity">
<div class="time">12:00 - 14:00</div>
<div>Lunch Break</div>
</div>
<div class="activity">
<div class="time">14:00 - 15:00</div>
<div>Mentoring</div>
</div>
<div class="activity">
<div class="time">16:00 - 16:30</div>
<div>Coffee Break</div>
</div>
<div class="activity">
<div class="time">16:30 - 17:00</div>
<div>Closing Ceremony</div>
</div>
<div class="activity">
<div class="time">17:00 - 17:30</div>
<div>Announcing the winning team</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="workshops">
<div id="workshopsTitleR"><div id="workshopsTitle">WORKSHOPS</div></div>
<div id="workshopsR">
<div id="pre">
<button onclick="preOne()">
<img src="img/previous.png" alt="Previous" width="30px" />
</button>
</div>
<div class="workshop">
<div class="title">
Web Design<br />How To Make a<br />Club's Website
</div>
<div class="content">
The dev department will<br />hold this workshop.<br />
They will guide you<br />
through<br />to learn all about how to<br />make a website<br />for
your club.<br />Don't Miss It
</div>
</div>
<div class="workshop" id="init1">
<div class="title">
How To Get<br />Yout First<br />Professional Partner
</div>
<div class="content">
Club, events,<br />a lot of stuff to buy!<br />Well, you
probably<br />need money for that!<br />But the real question
is<br />how could your club find<br />its first sponsors?<br />Well,
you should join<br />this workshop to know all<br />
about that and how to<br />get your first<br />professional
partner.
</div>
</div>
<div class="workshop" id="init2">
<div class="title">Branding In<br />Modern Design</div>
<div class="content">
Create a name,<br />symbol or DESIGN<br />that identifies and<br />differentiates<br />
a product from<br />other products.<br />That's what you will
learn<br />in this workshop.<br />If you want to know how<br />you
can create all of this<br />for your club, you shouldn’t<br />miss
this workshop<br />by any chance.
</div>
</div>
<div class="workshop" id="init3">
<div class="title">
Dive Into<br />The World Of<br />Motion Graphics
</div>
<div class="content">
The multimedia department<br />will organise<br />another
workshop.<br />You’ll learn all<br />about how to make<br />a
video and animation,<br />graphics drawings<br />and images and a
lot<br />of other things.<br />A wonderful work<br />
not to be missed!
</div>
</div>
<div id="next">
<button onclick="nextOne()">
<img src="img/next.png" alt="Next" width="30px" />
</button>
</div>
</div>
<div id="workshopsTracker">
<div class="miniBar" style="background-color: #5ffce7"></div>
<div class="miniBar"></div>
<div class="miniBar"></div>
<div class="miniBar"></div>
</div>
</section>
<section id="faqC">
<article id="faq">
<div
class="title"
onmouseover="onFaq(0)"
onmouseout="offFaq(0)"
>
FAQ
<div class="flexBorder"></div>
</div>
<div
class="content"
onmouseover="onFaq(0)"
onmouseout="offFaq(0)"
>
<strong style="font-size: 22pt; border-bottom: 1px solid white"
>Why should you join the event?</strong
><br />
If you’re interested in creating a new club we will guide you
through by showing you all the steps you need to pass by and if
you’re already a member in one we will help you to improve your
club’s workflow by the different workshops and challenges that we
will provide.<br />
<strong style="font-size: 22pt; border-bottom: 1px solid white"
>Who can join?</strong
><br />
Everyone can join the event, mostly students who would like to learn
more about how to create a new club or improve the workflow of their
club.<br />
<strong style="font-size: 22pt; border-bottom: 1px solid white"
>How to join?</strong
><br />
All you need to do is to fill the registration form.<br />
<strong style="font-size: 22pt; border-bottom: 1px solid white"
>Where will it take place?</strong
><br />
It will take place at ESI ecole nationale supérieure
d’informatique.<br />
<strong style="font-size: 22pt; border-bottom: 1px solid white"
>What if I don’t have a team for the challenge?</strong
><br />
Not to worry, we will help you find teammates after announcing the
challenges.<br />
<div class="flexBorder"></div>
</div>
</article>
</section>
<footer id="contact">
<div id="detailsR">
<div class="detail">
<a
href="https://www.facebook.com/club.scientifique.esi/"
class="fa fa-facebook"
target="_blank"
></a>
</div>
<div class="detail">
<a
href="https://twitter.com/CSESI_Club"
class="fa fa-twitter"
target="_blank"
></a>
</div>
<div class="detail">
<a
href="https://www.instagram.com/cse.club/"
class="fa fa-instagram"
target="_blank"
></a>
</div>
<div class="detail">
<a
href="https://www.youtube.com/channel/UCHgeF6ELJW0Pt1vYoAomCig"
class="fa fa-youtube-play"
target="_blank"
></a>
</div>
<div class="detail">
<a
href="https://www.linkedin.com/company/cse-club/"
class="fa fa-linkedin"
target="_blank"
></a>
</div>
</div>
</footer>
</div>
</body>
</html>