-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
394 lines (311 loc) · 11.3 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
387
388
389
390
391
392
393
394
<!DOCTYPE html>
<!--© Copyright Loth Robotics 2021-->
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/c857a23705.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<title>Loth Robotics - SSAL</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header class="headerbackground" id="header">
<script>
$(window).on("scroll", function() {
if ($(this).scrollTop() > 100) {
$("header").css("background","#252525");
}
else {
$("header").css("background","#fff");
}
});
</script>
<img class="headerlogo" src="./lothlogo.svg" alt="Loth Robotics">
<div>
<a class="headerbutton" href="#about-us">ABOUT US</a>
<a class="headerbutton" href="#projects">PROJECTS</a>
<a class="headerbutton" href="#our-team">OUR TEAM</a>
<a class="headerbutton" href="#contactus">CONTACT</a>
</div>
</header>
<body class="body">
<div class="welcomediv">
<div class="welcomeh1div">
<h1 class="welcomeh1">Loth Robotics</h1>
<h1 class="welcomeh1">Robotics club of Sakıp Sabancı Anatolian High School</h1>
</div>
</div>
<h2 class="insideheader" id="about-us">ABOUT US</h2>
<p class="longparagraph">Loth Robotics was established in March 2019 by Sakıp Sabancı Anatolian High School students as an FRC team. In 2021, we decided to grow our team to become our school's robotics club. Today there are 46 members, 2 mentors and an administrative team consisting of a leader, 4 vice leaders and 2 general coordinators in our team.</p>
<h2 class="insideheader" id="projects">PROJECTS</h2>
<p class="paragraph">Here're our projects</p>
<div class="teamcards">
<div class="person">
<h3 class="name"><u>CyberFlight</u></h3>
<p class="persondescription">Our UAV team</p>
</div>
<div class="person">
<h3 class="name"><u>LothMaze</u></h3>
<p class="persondescription">Our Maze Solver team</p>
</div>
<div class="person">
<h3 class="name"><u>LothLine</u></h3>
<p class="persondescription">Our Line Tracker team</p>
</div>
<div class="person">
<h3 class="name"><u>LothToplaSAk</u></h3>
<p class="persondescription">Our Material Collecter team</p>
</div>
<div class="person">
<h3 class="name"><u>LothSumo</u></h3>
<p class="persondescription">Our Mini Sumo team</p>
</div>
<div class="person">
<h3 class="name"><u>LothEd</u></h3>
<p class="persondescription">Our Education Improvements team</p>
</div>
<div class="person">
<h3 class="name"><a class="link" target="_blank" href="https://lothrobotics.github.io/atolye/"><u>Atölye</u></a></h3>
<p class="persondescription">Hang in our workshop</p>
</div>
<div class="person">
<h3 class="name"><a class="link" target="_blank" href="https://lothrobotics.github.io/okul/"><u>Okul</u></a></h3>
<p class="persondescription">Run around our school</p>
</div>
</div>
<h2 class="insideheader" id="our-team" >OUR TEAM</h2>
<h2 class="insideheaderlight">Mentors</h2>
<div class="teamcards">
<div class="person">
<h3 class="name">Sabit Doğan</h3>
<p class="persondescription">Mentor</p>
</div>
<div class="person">
<h3 class="name">Berker Okan</h3>
<p class="persondescription">Mentor</p>
</div>
</div>
<h2 class="insideheaderlight">Administrative Staff</h2>
<div class="teamcards">
<div class="person">
<h3 class="name">Yahya Turhan</h3>
<p class="persondescription">Team leader</p>
</div>
<div class="person">
<h3 class="name">Zeynep Güler</h3>
<p class="persondescription">Team vice-leader</p>
</div>
<div class="person">
<h3 class="name">Yusuf Koymatoğlu</h3>
<p class="persondescription">Team vice-leader</p>
</div>
<div class="person">
<h3 class="name">Mehmet Akif Albayrak</h3>
<p class="persondescription">Team vice-leader</p>
</div>
<div class="person">
<h3 class="name">Hilal Tekin</h3>
<p class="persondescription">Team vice-leader</p>
</div>
<div class="person">
<h3 class="name">Baran Önen</h3>
<p class="persondescription">General coordinator</p>
</div>
<div class="person">
<h3 class="name">Emir Keskin</h3>
<p class="persondescription">General coordinator</p>
</div>
</div>
<h2 class="insideheaderlight">Members</h2>
<div class="teamcards">
<div class="person">
<h3 class="name">Burak Nezir Altun</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Abdullah Efe Atabek</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Kağan Zengin</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Halit Hamza Şeker</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Emir Karabulut</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Muhammed Bilal Öztürk</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Bekir Efe Kaya</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Bora Özüdoğru</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Çağla Yaman</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Derya Birsu İnan</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Doruk Doğru</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Ebrar Dinç</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Efe Aslan</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Elif Ünal</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Eray Güleşen</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Ahmet Kankılıç</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Elifnaz Çolfaoğlu</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">İbrahim Volkan Gök</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Yusuf Adıgüzel</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Deniz Arda Kozak</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Erdem Uyan</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Kadir Kayra Balaban</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Vefa Ceylan</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Efe Aslan Gürkan</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Özgür Ozan Güralp</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Sueda Aydın</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Doruk Cerit</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Burak Can Tarhan</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">İremnur Özcan</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Arda Akarsu</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Enes Salih Sezer</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Ayşe Ümmühan Yakıcı</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Kerem Özkul</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Enes Kayra Bayram</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Tarık Bilal Hızal</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Sueda Aydın</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">İrem Tüzüngüç</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Elif Hüma Yaşar</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Kartal Barış Özkan</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Nehir Elif Yeşildağ</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Efe Aslan Gürkan</h3>
<p class="persondescription">Team member</p>
</div>
<div class="person">
<h3 class="name">Bora Bulan</h3>
<p class="persondescription">Team member</p>
</div>
</div>
<h2 class="insideheader" id="contactus">CONTACT US</h2>
<p class="paragraph">Please fill <a class="link" href="https://forms.gle/wm8ksV3isSzYwc4G8"><u>this form</u></a> or <a class="link" href="mailto:[email protected]"><u>write an email</u></a> to contact us</p>
</body>
<footer class="footerdiv" id="footer">
<p class="footertext">© Loth Robotics 2020</p>
<div class="socialmedia">
<a class="footericon" href="https://www.instagram.com/lothrobotics/"><i class="fab fa-instagram"></i></a>
<a class="footericon" style="margin: 10px;" href="https://twitter.com/LothRobotics"><i class="fab fa-twitter"></i></a>
<a class="footericon" href="https://github.com/LothRobotics"><i class="fab fa-github"></i></a>
</div>
</footer>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</html>