-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
executable file
·323 lines (290 loc) · 18.8 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
<!doctype html>
<html lang="en-us">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Hacktoberfest</title>
<meta name="description" content="Mozilla Club in University of Colombo School of Computing is a non profitable organisation dedicated to keeping the
power of the web in people's hands.">
<!-- Main CSS file -->
<link rel="stylesheet" href="css/production.css">
<!-- Animate CSS file -->
<link rel="stylesheet" href="css/animate.css">
<!-- Hover CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<!-- Web fonts -->
<link href="https://fonts.googleapis.com/css?family=Space+Mono:400,700" rel="stylesheet">
<!-- favicon.ico. Place these in the root directory. -->
<link rel="shortcut icon" href="img/favicon.png">
</head>
<body>
<!-- Create outer border -->
<div class="page-border">
<div class="bg">
<div style="text-align: right;">
<a href="monitor.html" class="btn btn--sm mt0 mr3 wow animated fadeInUp"
style="background-image: linear-gradient(to right,#fe7f5d,#ff4284) !important; border: none; color: white;">Check
Progress
</a>
</div>
<!-- Header -->
<header class="align--center pt3 pb2 overlay-img" style="background-image: url('img/overlay-left.png'),url('img/overlay-right.png');background-position: bottom left, top right;
background-repeat: no-repeat;
min-height: 1040px;">
<div class="container">
<a href="index.html">
<h1 class="mb3 animated pulse hvr-buzz-out" title="HacktoberFest - UCSC"><img
src="img/hflogo.svg" alt="Huddle"></h1>
</a>
<h2 class="mb1 wow animated fadeInUp" id="tagline">Hacktoberfest 2019! Contribute to Open Source!
</h2>
<br>
<img class="icon mb1 mr1 wow animated fadeInRight " src="img/calendar.svg" style="display: inline;">
<p class="mb1 wow animated fadeInRight" style="display: inline">26th October 2019</p>
<br>
<!-- TODO add calendar icon -->
<img class="icon mb1 mr1 wow animated fadeInRight " src="img/clock.svg" style="display: inline;">
<p class="mb1 wow animated fadeInRight" style="display: inline">10.30 am</p>
<br>
<img class="icon mb1 mr1 wow animated fadeInRight" src="img/location.svg" style="display: inline">
<p class="animated wow fadeInLeft" style="display: inline">University of Colombo School of Computing
</p>
<div>
<a href="https://forms.gle/vwthyCsnRUSmeH9aA" class="btn btn--default mt5"
style="background-image: linear-gradient(to right,#ffbf38,#fe7f5d) !important; border: none">Register</a>
</div>
</div>
</header>
<!-- Body -->
<main>
<div class="container">
<!-- About HF -->
<section class="pt2 pb3">
<h3 class="mb3" style="color:#FF00AA">What is Hacktoberfest?</h3>
<div class="grid-row">
<div class="grid-column span-one-second mt1">
<img class="mb1 hvr hvr-wobble-skew" src="img/hflogo.svg">
</div>
<div class="grid-column span-one-second mt1">
<p class="wow animated fadeInUp">Hacktoberfest is a month-long celebration of open
source software run by DigitalOcean
and DEV.
Hacktoberfest is open to everyone in our global community.
To participate, four pull requests must be submitted to public GitHub repositories.
You can sign up anytime between 1st of October and 31st of October.
</p>
<a href="https://hacktoberfest.digitalocean.com" target="_blank"
class="btn btn--sm mt1 wow animated fadeInUp"
style="background-image: linear-gradient(to right,#fe7f5d,#ff4284) !important; border: none; color: white;">More
Info</a>
<p class="mt1 mb1 wow animated fadeInUp">Brought to you by:</p>
<img class="icon mb1 wow animated fadeInUp" src="img/dologo.svg"> +
<img class="icon mb1 wow animated fadeInUp" src="img/devlogo.svg">
</div>
</div>
</section>
<!-- Info -->
<section class="pt2 pb3">
<!-- <img class="mb3" src="img/presentor.jpg" alt="Huddle presentation"> -->
<div class="grid-row">
<div class="grid-column span-one-third mt1">
<img class="icon mb1" src="img/speaker.svg">
<p class="wow animated fadeInUp">Sri Lanka's best developers will be there to talk to
you!</p>
</div>
<div class="grid-column span-one-third mt1">
<img class="icon mb1" src="img/del.svg">
<p class="wow animated fadeInUp">You'll meet open source developers from every field in
IT!</p>
</div>
<div class="grid-column span-one-third mt1">
<img class="icon mb1" src="img/swag.svg">
<p class="wow animated fadeInUp">Don't forget to collect all the swag we give away!</p>
</div>
</div>
</section>
<!-- Our Story -->
<section class="pt3 pb3 align--center">
<h3 class="mb1" style="color:#FF00AA">Our Story</h3>
<img class="mt1 wow animated fadeInUp" src="img/UCSCMozillaLogo.png" style="height: 150px">
<p class="mt3 wow animated fadeInUp" align="justify">
The Mozilla Club in University of Colombo School of Computing is a non profitable
organisation
dedicated to keeping the
power of the web in people's hands. This club is formed from a group of students with a
passion for technology who
meet regularly to advance by innovating and building on an open source projects that keep
the web open.
It was found on 1st May 2014. To become a part of the community you should use Firefox or
any Mozilla products. This
club enhanced the knowledge among students and build open source projects from the web. It
is developed by the
students capability of programmes and engage with it.
The mission of our club is "Promote openness, innovation and opportunity on the Web".
To achieve this goal we coordinate the creation of products like Mozilla Firefox OS, Mozilla
Firefox for Desktop and
Mozilla Firefox for Android. As a club we use a highly transparent, extremely collaborative
process that brings
together thousands of dedicated volunteers around the university.
</p>
</section>
<section class="pt3 pb0 align--center">
<h3 class="mb2" style="color:#FF00AA">Agenda</h3>
<img class="mb3 wow animated fadeInUp" src="img/agenda.png" alt="Agenda" style="height: 512px;">
</section>
<!-- Speakers -->
<section class="pt3 pb3 align--center">
<h3 class="mb1" style="color:#FF00AA">Our Speakers</h3>
<div class="grid-row">
<!-- <div class="grid-column span-2 mt2"> -->
<!-- <img class="mb1 wow animated pulse" src="img/raveen.jpg" alt="Raveen Harith"> -->
<!-- <p class="small">Raveen Harith Perera</p> -->
<!-- </div> -->
<div class="grid-column span-3 mt2">
<img class="mb1 wow animated pulse" src="img/milinda.png" alt="Milinda Laknath">
<p class="small">Milinda Arambawela</p>
</div>
<div class="grid-column span-3 mt2">
<img class="mb1 wow animated pulse" src="img/oshan.jpg" alt="Oshan Ivantha">
<p class="small">Oshan Ivantha</p>
</div>
<div class="grid-column span-3 mt2">
<img class="mb1 wow animated pulse" src="img/chamod.jpg" alt="Chamod Sandaru">
<p class="small">Chamod Sandaru</p>
</div>
<!-- <div class="grid-column span-3 mt2">
<img class="mb1 wow animated pulse" src="img/ftt.jpg" alt="FTT">
<p class="small">FTT</p>
</div> -->
<!-- <div class="grid-column span-2 mt2"> -->
<!-- <img class="mb1 wow animated pulse" src="img/woman3.jpg" alt="Anita Gonzalez"> -->
<!-- <p class="small">Anita Gonzalez</p> -->
<!-- </div> -->
<!-- <div class="grid-column span-2 mt2"> -->
<!-- <img class="mb1 wow animated pulse" src="img/man3.jpg" alt="Adrian Sosa"> -->
<!-- <p class="small">Adrian Sosa</p> -->
<!-- </div> -->
</div>
</section>
<!-- Sponsors -->
<section class="pt3 pb3 align--center">
<h3 class="mb2" style="color:#FF00AA">Our Partners</h3>
<div class="mb2">
<p style="color: #5f6769;">Platinum Sponsor</p>
<img class="m1 wow animated zoomIn" src="img/SyscoLABSLogoWhite.png" alt="Sysco Labs"
style="height:45px">
</div>
<div class="mb2">
<p style="color: #ffbf38;">Gold Sponsor</p>
<img class="m1 wow animated zoomIn" src="img/lsegLogo.png" alt="LSEG" style="height:45px">
</div>
<div class="mb2">
<p style="color: #fe7f5d;">Official Knowledge Sponsor</p>
<img class="m1 wow animated zoomIn" src="img/SyscoLABSLogoWhite.png" alt="Sysco Labs"
style="height:45px">
</div>
<p style="color: #4f81c7;">Event Partners</p>
<img class="m1 wow animated zoomIn" src="img/fosslk1.png" alt="FOSSLK" style="height:50px">
<img class="m1 wow animated zoomIn" src="img/mozillaLK.png" alt="Mozilla LK"
style="height:50px">
<img class="m1 wow animated zoomIn" src="img/GitHub.png" alt="GitHub" style="height:50px">
<br> <br>
<div class="mb2">
<p style="color: #f0134d;">Official Gift Sponsor</p>
<img class="m1 wow animated zoomIn" src="img/slhosting2.png" alt="Sri Lanka Hosting Service"
style="height:45px">
</div>
</section>
<!-- Quotes -->
<section class="pt2 pb3"
style="background-image: url('img/overlay-map.png'); background-repeat: no-repeat; background-size: 1040px 450px">
<h3 class="align--center mb2" style="color:#FF00AA">What people say</h3>
<div class="grid-row">
<div class="grid-column span-one-third mt1 wow animated fadeInUp">
<blockquote class="blockquote">
<p>In open source, we feel strongly that to really do something well, you have to
get a lot of people involved.</p>
<p>> <cite>Linus Torvalds</cite></p>
</blockquote>
</div>
<div class="grid-column span-one-third mt1 wow animated fadeInUp">
<blockquote class="blockquote">
<p>Certainly there's a phenomenon around open source. You know free software will be
a vibrant area. There will be a lot of neat things that get done there.</p>
<p>> <cite>Bill Gates</cite></p>
</blockquote>
</div>
<div class="grid-column span-one-third mt1 wow animated fadeInUp">
<blockquote class="blockquote">
<p>Open platforms historically undergo a lot of scrutiny, but there are a lot of
advantages to having an open source platform from a security standpoint.</p>
<p>> <cite>Sundar Pichai</cite></p>
</blockquote>
</div>
</div>
</section>
<!-- RSVP -->
<section class="align--center pt3 pb3">
<p class="h3 mb2">Be the first one to get in!</p>
<a href="https://forms.gle/vwthyCsnRUSmeH9aA" class="btn btn--default"
style="background-image: linear-gradient(to right,#ffbf38,#fe7f5d) !important; border: none">RSVP</a>
<a href="https://www.facebook.com/UCSCMozillaClub/" class="btn btn--default"
style="background-image: linear-gradient(to right,#fe7f5d,#ff4284) !important; border:none">More
Info →</a>
<!-- <p class="small mt1 text--gray">RSVP will be available soon...</p> -->
</section>
<!-- Contact Form -->
<section class="pb4">
<h2 class="text--white pb1 border--bottom">Talk to us...</h2>
<form class="form" method="POST"
action="https://formsubmit.co/e31bac8b1d7f8fb170ca7ce0be9668fa ">
<input class="form-control mb1" placeholder="Name" type="text" name="name">
<input class="form-control mb1" type="email" placeholder="Email Address" type="text"
name="email">
<input class="form-control mb1" type="subject" placeholder="Subject" type="text"
name="subject">
<textarea class="form-control mb1" placeholder="Message" type="text"
name="message"></textarea>
<button class="btn btn--default wow animated tada" type="submit"
style="background-image: linear-gradient(to right,#ff4284,#ff01a9) !important; border:none">Send</button>
<!-- Extra Attributes for emails -->
<input type="hidden" name="_replyto">
<input type="hidden" name="_next" value="https://sfd-ucsc.herokuapp.com">
<input type="hidden" name="_subject" value="SFD Website Contact">
</form>
</section>
</div>
</main>
<!-- Footer -->
<footer class="mt2 pb3 align--center">
<ul class="no-bullets list--inline mb-5">
<!-- <li class="m1 block-on-mobile"><a href="https://twitter.com/ucsc_lk" class="link" -->
<!-- style="color: white !important"><img class="icon" src="img/twitter.png" alt="Twitter" -->
<!-- style="background-color: linear-gradient(to right,#ea39a5,#ea4798) !important;"> -->
<!-- Twitter</a></li> -->
<li class="m1 block-on-mobile"><a href="https://www.facebook.com/UCSCMozillaClub/" class="link"
style="color: white !important"><img class="icon" src="img/facebook.png" alt="Facebook">
Facebook</a></li>
<!-- <li class="m1 block-on-mobile"><a href="https://www.instagram.com/ucsc_lk/" class="link" -->
<!-- style="color: white !important"><img class="icon" src="img/instagram.png" alt="Instagram"> -->
<!-- Instagram</a></li> -->
<!-- <li class="m1 block-on-mobile"><a href="https://www.youtube.com/channel/UC0gdcqEL6ZZeT67s0IbOrHg" -->
<!-- class="link" style="color: white !important"><img class="icon" src="img/youtube.png" -->
<!-- alt="YouTube"> YouTube</a></li> -->
</ul>
<img src="img/logo.png" alt="Hacktoberfest" style="width: 200px;">
<p class="mt1 small text--white">© UCSC Mozilla Club @ 2019.</p>
</footer>
</div>
</div>
<!-- Initiate WOW js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script>
new WOW().init();
</script>
<!-- TypeWriter effect -->
<script src="js/typewriter.js"></script>
</body>
</html>