forked from LiangcaiSu/SSSTA2018
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
595 lines (557 loc) · 25.1 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
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SS::STA 2018 School of Software :: Science & Technology Association</title>
<!-- Bootstrap core CSS -->
<link href="static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="static/css/sssta2018.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">SS::STA</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#introduction">introduction</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Group</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Join</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome To SS::STA!</div>
<div class="intro-heading text-uppercase">It's Nice To Meet You</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#introduction">Tell Me More</a>
</div>
</div>
</header>
<!-- Introduction -->
<section id="introduction">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Introduction</h2>
<h3 class="section-subheading text-muted">软院科协介绍</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-users fa-stack-1x fa-inverse"></i>
</span>
<h4 class="introduction-heading">Group</h4>
<p class="text-muted">软院实行分组制度。也就是各位学员通过对各个组的了解，选出一个自己喜欢的，热衷于为此奋斗的小组。</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="introduction-heading">导师制</h4>
<p class="text-muted">进入科协后，在双方自由选择的前提下，你们与学长将会组成导师-学员的关系。 导师将负责适当指导其学员前期基础知识的学习，适当布置学习任务，联系学员与其他学长的交流。简单地说，导师制就是学长带你飞。</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-comments fa-stack-1x fa-inverse"></i>
</span>
<h4 class="introduction-heading">Discuss</h4>
<p class="text-muted">我们鼓励多讨论、多交流。交流的不仅仅是技术，可能更是情怀，可能更是态度。你可以畅所欲言。</p>
</div>
</div>
</div>
</section>
<!-- Group -->
<section class="bg-light" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Groups</h2>
<h3 class="section-subheading text-muted">分组介绍</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="static/img/group/01.png" alt="">
</a>
<div class="portfolio-caption">
<h4>Web</h4>
<p class="text-muted">在黑白字母间创造绚丽的页面，简洁的命令行背后是海量的数据</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="static/img/group/game-small.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Game</h4>
<p class="text-muted">创造你所向往的世界<br>不再遥不可及</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="static/img/group/acm-small.png" alt="">
</a>
<div class="portfolio-caption">
<h4>ACM</h4>
<p class="text-muted">当拿到一道算法难题的时候，你在考虑什么？</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="static/img/group/04-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>移动开发组</h4>
<p class="text-muted">做自己喜欢的事情，<br>任何时候都不会太晚。</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="static/img/group/design-small.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>设计</h4>
<p class="text-muted">将想法付诸于实践，<br>将创作应用于现实</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="static/img/group/06.png" alt="">
</a>
<div class="portfolio-caption">
<h4>Chose</h4>
<p class="text-muted">人生中每一个选择都很重要。<br>学会选择，是一种成长。</p>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">About</h2>
<h3 class="section-subheading text-muted">关于如何加入科协</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="static/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>First Step</h4>
<h4 class="subheading">认识科协</h4>
</div>
<div class="timeline-body">
<p class="text-muted">趁暑假，了解软院科协组织，<br>对各个分组进行一定的了解。 <br>加入SS::STA 2018 迎新群：<b>829585735</b>，<br>与各位前辈谈笑风生。</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="static/img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Second Step</h4>
<h4 class="subheading">自主学习</h4>
</div>
<div class="timeline-body">
<p class="text-muted"> 想要“搞事情”，自然是需要一定的能力支撑。你的能力需要配得上你的野心。大致明确自己的分组，通过学长的指导，有方向的学习。</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="static/img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Third Step</h4>
<h4 class="subheading">解免试题</h4>
</div>
<div class="timeline-body">
<p class="text-muted">科协的学长们为你们精心准备了免试题，成功回答即可免面试进入SS:STA 2018.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="static/img/about/4.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Fourth Step</h4>
<h4 class="subheading">迎接面试</h4>
</div>
<div class="timeline-body">
<p class="text-muted">没有通过特殊渠道进入科协的同学，将在2018年9月15日前后参加面试。不用太紧张，学长们都很善良。</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>Be Part
<br>Of Our
<br>SS:STA!</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Clients -->
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<a href="#">
<img class="img-fluid d-block mx-auto" src="static/img/logos/logo_0.png" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#">
<img class="img-fluid d-block mx-auto" src="static/img/logos/logo_1.png" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#">
<img class="img-fluid d-block mx-auto" src="static/img/logos/logo_3.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Join Us</h2>
<h3 class="section-subheading text-muted" style="margin-bottom: 25px;">加入软院科协，首先你要填写以下报名表</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<form id="contactForm" name="sentMessage" novalidate="novalidate">
<div class="row">
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<a id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="button" href="../sssta">立即报名</a>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">The website is designed by Slc and DF</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://jq.qq.com/?_wv=1027&k=5Lwhhbw">
<i class="fa fa-qq"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
<a href="../sssta2018/mi.html">神秘入口</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals -->
<!-- Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">Web组</h2>
<p class="item-intro text-muted">因特网，是迄今人类构建的最为庞杂的系统。可是你对他有多少了解呢？</p>
<img class="img-fluid d-block mx-auto" src="/static/img/group/01_2.jpg" alt="">
<p>在黑白字母间创造绚丽的页面，简洁的命令行背后是海量的数据；链接世界的因特网背后的秘密，搭建自己的网站向外人道说，窥探网页源码隐藏的彩蛋······加入我们，打开新世界的探寻之路
</p>
<ul class="list-inline">
<li>组长:党枫</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">Game组</h2>
<p class="item-intro text-muted">创造你所向往的世界 不再遥不可及</p>
<img class="img-fluid d-block mx-auto" src="/static/img/group/game-full.png" alt="">
<p>你是否早已厌倦了“去哪、杀几只”的空洞玩法； <br>
你是否常为了这世间没有令自己满意的游戏而失落； <br>
你心中是否又有一个美好世界，却担心自己技术太差无法构建？ <br>
来，加入我们吧 <br>
这里有最为丰富多彩的组内活动<br>
这里有对萌新极其友好的基础培训<br>
这里还有和学长一起征战ID@XBOX2019等各大比赛的机会<br>
Join Us , Build Our World！</p>
<ul class="list-inline">
<li>组长: 张伟</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">ACM</h2>
<p class="item-intro text-muted">当拿到一道算法难题的时候，你在考虑什么？</p>
<img class="img-fluid d-block mx-auto" src="/static/img/group/acm-full.png" alt="">
<p>当拿到一道算法难题的时候，你在考虑什么？困惑？害怕？想要退缩？
我在考虑的是“一位值得尊敬的对手，而我将抽出尖刀，插进他的喉咙。
</p>
<ul class="list-inline">
<li>组长: 孙可</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 4 -->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">移动开发组</h2>
<p class="item-intro text-muted">做自己喜欢的事情，<br>任何时候都不会太晚。</p>
<img class="img-fluid d-block mx-auto" src="/static/img/group/04-full.jpg" alt="">
<p>您想知道您每天使用的QQ微信等手机应用是如何开发的吗？<br>您想深入探索Android或iOS系统里的奥秘吗？<br>您想开发出一款属于自己的手机APP吗？<br>
如果您对移动开发感兴趣，如果您想了解更多关于手机等移动设备的知识，<br>我仅代表移动开发组真诚地邀请您加入我们！<br>在这里，有着众多的前辈高手为您导航，有着丰富的资源供您使用，不论您之前是否有过移动开发经验，只要您热爱，您就可以加入我们的队伍，和我们一起在Android和iOS的奇妙世界里畅游！
做自己喜欢的事情，任何时候都不会太迟。<br>欢迎你加入移动开发组，在这里写下你的第一行代码，<br>开启属于你全新世界的大门，创造属于你的辉煌</p>
<ul class="list-inline">
<li>组长:王纪科</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 5 -->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">设计</h2>
<p class="item-intro text-muted">将想法付诸于实践，<br>将创作应用于现实</p>
<img class="img-fluid d-block mx-auto" src="/static/img/group/design-full.jpg" alt="">
<p>你会冒出一些有趣的idea吗？<br>
你想要把自己的idea变成作品吗？<br>
你想体验和别人一起完成一个项目的成就感吗？<br>
这里不仅可以给你们一些基础的设计软件的教学，<br>
还有丰富的学习资源。<br>
这是一个轻松快乐的团体，期待你的加入！
</p>
<ul class="list-inline">
<li>组长:黄宁</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 6 -->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">选择</h2>
<p class="item-intro text-muted">人生中每一个选择都很重要。学会选择，是一种成长。</p>
<img class="img-fluid d-block mx-auto" src="/static/img/group/06_2.png" alt="">
<p>这不是一个分组。 不过我觉得此刻的你，一定很迷茫。不要慌张，每一条路都是最好的路。</p>
<ul class="list-inline">
<li>By Slc</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="/static/js/jqBootstrapValidation.js"></script>
<script src="/static/js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="/static/js/sssta2018.min.js"></script>
</body>
</html>