This repository has been archived by the owner on Aug 27, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
members.html
364 lines (307 loc) · 13.3 KB
/
members.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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Alpha -- About us</title>
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<link rel="stylesheet" href="css/fonts/stylesheet.css" />
<link rel="stylesheet" href="css/fonts/fonts.css" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="css/animat/animate.min.css" />
<link rel="stylesheet" href="css/fancybox/jquery.fancybox.css" />
<link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox.css" />
<link rel="stylesheet" href="css/themes/default/default.css" />
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.css" />
<link rel="stylesheet" href="css/owl-carousel/owl.theme.css" />
<link rel="stylesheet" href="css/owl-carousel/owl.transitions.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<style>
#images {
white-space: nowrap;
}
.font {
font-family: sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="font">
<div class='preloader'><div class='loaded'> </div></div>
<center><img src="images/logo.jpg" width="200"></center>
<center><a onclick="openNav()"><i class="material-icons">menu</i> </a></center>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="index.html" class="#ff1744 "><i class="material-icons">home</i></a>
<a href="members.HTML" class="#ff1744 "><font size="4">About us</font></a>
<a href="promotion.html" class="#ff1744 "><font size="4">Promotion</font></a>
<a href="gallary.html" class="#ff1744 "><font size="4">Gallery</font></a>
<a href="video.html" class="#ff1744 "><font size="4">Videos</font></a>
<a ></a>
</div>
</div>
<script>
$( document ).ready(function(){})
$(".button-collapse").sideNav();
</script>
<section id="banner" class="banner">
<div class="container">
<div class="row">
<div class="main_banner_area text-center">
<div class="col-md-12 col-sm-12">
<div class="single_banner_text wow zoomIn" data-wow-duration="1s">
<div class="separetor"></div>
</div>
</div>
<div class="scrolldown">
<a href="#aboutsftc" class="scroll_btn"></a>
</div>
</div>
</div>
</div>
</section><!-- End of Banner Section -->
<section id="team" class="team">
<div class="container">
<div class="row">
<div class="head_title text-center wow zoomIn" data-wow-duration="0.5s">
<h2>MEET OUR MEMBERS</h2>
<div class="separetor"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry been the industry's standard dummy text</p>
</div>
<div class="main_team_content text-center">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single_team wow fadeIn" data-wow-duration="1.5s">
<div class="single_team_img">
<img src="images/joshua.jpeg" alt="" />
<div class="single_team_overlay text-center">
<p>
Joshua is the captain of the team. He used SOLIDWORKS, the CAD (Computer-Aided Design) app, to draft our robot. His contributions made our building work become easier and smoother. Nevertheless, he assisted in building. We would like to express our gratitude to Joshua as in many incidence, his ideas exerted great influence to the members and our building of the robots was kept improving. In addition, our captain hope every member of the team would try their best to make this happen, the pursuit of perfection.
</p>
<a href=""><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="single_team_name">
<h4>Joshua Lei</h4>
<p>Captain</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single_team wow fadeIn" data-wow-duration="2s">
<div class="single_team_img">
<img src="images/edward.jpg" alt="" />
<div class="single_team_overlay text-center">
<p>
As the leader of the Programming Department, Edward has proved his significance in instructing us to write programs for making our robot moving automatically and manually. Edward started program since Primary 5. Edward does not only has a wide scope of knowledge in programming, but also possesses a dedicated and determined heart. As the part of programming the robot, he also know how to program a website using HTML, PHP. (The Website is built by Edward XD !) Besides that, he always help us to fix computer and phone problems. If you want to have some technical support about your computer or mobile phone, feel free to ask Edward via Gmail, his mail is edwardtang0611@gmail.com !
</p>
<a href=""><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="single_team_name">
<h4>Edward Swalker</h4>
<p>Program Department Leader</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single_team wow fadeIn" data-wow-duration="2.5s">
<div class="single_team_img">
<img src="images/seb.jpg" alt="" />
<div class="single_team_overlay text-center">
<p>
Sebastien is considered as a genius in setting and building up gears and robots. Throughout the whole year, he has given enormous efforts and passion to the project. Besides these, he was chosen to be the leader of the Mechanic Department due to his passion in building. He worked very hard and he contributed a lot whereas he enjoyed the process. All of the team members appreciated his devotion and commitment to the progress of the team as a whole.
</p>
<a href=""><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="single_team_name">
<h4> Sebastien Pacado</h4>
<p>Mechanic Leader</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single_team wow fadeIn" data-wow-duration="2.8s">
<div class="single_team_img">
<img src="images/zelia.jpeg" alt="" />
<div class="single_team_overlay text-center">
<p>
Aurora Zelia is the the public relationship leader and the designer of our team Alpha JUNGLE. When we faced difficulties, she helped us to analysis the problems and the context and to find out the solutions. As she demonstrates great talent in layouting, she has been entrusted with the responsibility for doing all of the design works for the team, including our logo,banner, team flag and poster. We are impressed by her wonderful performances and the positive attitude she holds as well. She is always our muse and our motivation engine. In order to finish our project, she communicated with the Mechanic Department to sketch the robot’s basis in order to let other team member to develop the concepts easier.
</p>
<a href=""><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="single_team_name">
<h4>Aurora Zelia</h4>
<p>Public Relationship Leader</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="team" class="team">
<div class="container">
<div class="row">
<div class="main_team_content text-center">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single_team wow fadeIn" data-wow-duration="1.5s">
<div class="single_team_img">
<img src="images/Adriana.jpg" alt="" />
<div class="single_team_overlay text-center">
<p>
Adriana is in charge of our daily annal. Sometimes, she took photographs and videos to record team ALPHA’s daily process.We are delighted that we have an intellectual and enthusiastic member like Adriana.
</p>
<a href=""><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="single_team_name">
<h4>Adriana Astral</h4>
<p>Engineering Notebook</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single_team wow fadeIn" data-wow-duration="2s">
<div class="single_team_img">
<img src="images/joe.jpg" alt="" />
<div class="single_team_overlay text-center">
<p>
Joe has expressed his burning passion for programming and building robot since primary school. He is the member whom we all appreciate a lot as he has also demonstrated his high self-discipline as well as enriched creativity.
</p>
<a href=""><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="single_team_name">
<h4>Joe Au</h4>
<p>Program</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single_team wow fadeIn" data-wow-duration="2.5s">
<div class="single_team_img">
<img src="images/long.jpg" alt="" />
<div class="single_team_overlay text-center">
<p>
Jack always stays energetic and friendly. He is the most diligent and ardent member of the team. He is responsible for building and we enjoy discussing problems with him as he is also inspiring and humorous.
</p>
<a href=""><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="single_team_name">
<h4> Jack Guetta</h4>
<p>Program</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single_team wow fadeIn" data-wow-duration="2.8s">
<div class="single_team_img">
<img src="images/adriano.jpg" alt="" />
<div class="single_team_overlay text-center">
<p>
Adriano always stays energetic and friendly. He is responsible for writing Engineering Notebook. He is experienced and working hard in a high speed, without him, the team would not finish the project smoothly.
PS: He tells great jokes and brings joy to our team at the same time. </p>
<a href=""><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="single_team_name">
<h4>Adriano AI</h4>
<p>Mechanic</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="footer" class="footer">
<div class="container">
<div class="row">
<div class="main_footer text-center wow zoomIn" data-wow-duration="1s">
<p>Made by Alpha85302. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<!-- STRAT SCROLL TO TOP -->
<div class="scrollup">
<a href="#"><i class="fa fa-chevron-up"></i></a>
</div>
</section>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/nivo-lightbox/nivo-lightbox.min.js"></script>
<script type="text/javascript" src="js/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery-easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/wow/wow.min.js"></script>
<!--<script type="text/javascript" src="js/counterup/counterup.min.js"></script>-->
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>-->
<!--<script type="text/javascript" src="js/counterup/jquery.counterup.min.js"></script>-->
<script type="text/javascript" src="js/isotop/isotope.min.js"></script>
<script type="text/javascript" src="js/isotop/isotop.function.js"></script>
<script type="text/javascript" src="js/masonry/masonry.min.js"></script>
<script type="text/javascript" src="js/mixitup/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="js/masonry/masonry.pkgd.min.js"></script>
</div>
</body>
</html>