forked from changene/changene.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
397 lines (361 loc) · 17.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>中國互聯網產業實習計畫</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<link href="css/modal.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<a href="#top">Changene</a>
</li>
<li>
<a href="#top">首頁</a>
</li>
<li>
<a href="#about">計畫簡介</a>
</li>
<li>
<a href="#services">計畫特色</a>
</li>
<li>
<a href="#portfolio">經驗分享</a>
</li>
<li>
<a href="#footer">聯絡我們</a>
</li>
</ul>
</nav>
<!-- Header -->
<header id="top" class="header">
<div class="text-vertical-center">
<h1>成為能夠走出台灣的軟體人才</h1>
<h3>互聯網產業海外實習計畫</h3>
<br>
<a href="#about" class="btn btn-dark btn-lg">了解更多</a>
</div>
</header>
<!-- About -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>"Changene" - 改變你的軟體基因</h2>
<!--<p class="lead">-->
<p style="color:#666; font-size:1.8rem;">
我們是一群熱愛教育的軟體人，有感於台灣的資訊教育仍以學術、研究為主。<br>
不少學生從資工/資管系畢業後，離真正的實作能力還有段距離，<br>
因此我們特別策劃了這個培訓實習計畫，希望能夠培養出具有軟體思維、實戰經驗與國際視野的新一代軟體人才！
</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Services -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>計畫特色</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cloud fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>實戰培訓</strong>
</h4>
<p>現今的資工系的教授內容，大部分與20年前的內容差不多，雖然基礎，但早已與業界需求脫離太遠。在這裡我們將以實戰為目標，進行軟體思維及技巧的培訓！</p>
<!-- <a href="#" class="btn btn-light">Learn More</a> -->
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-compass fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>海外實習</strong>
</h4>
<p>培訓結束後，我們將依結業成績學員意願分發單位，媒合合適的互聯網企業，進行約4~6週的產業實習活動。</p>
<!-- <a href="#" class="btn btn-light">Learn More</a> -->
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flask fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>接軌業界</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<!-- <a href="#" class="btn btn-light">Learn More</a> -->
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-shield fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>文化交流</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<!-- <a href="#" class="btn btn-light">Learn More</a> -->
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Callout -->
<aside class="callout">
<div class="text-vertical-center">
<!--<h1>Vertically Centered Text</h1>-->
<h2><i>“成為人才，先要有世界觀跟跨領域能力！”</i></h2>
<p>- 李開復 (2015年 ETtoday專訪)</p>
</div>
</aside>
<!-- Portfolio -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>2016 北京實習分享</h2>
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="portfolio-item">
<a href="https://medium.com/@chihchengliang/%E5%88%B0%E5%8C%97%E4%BA%AC%E5%AF%A6%E7%BF%92-%E6%84%9F%E5%8F%97%E4%BA%92%E8%81%AF%E7%B6%B2%E7%94%A2%E6%A5%AD%E5%A4%A7%E8%A1%9D%E6%93%8A-8b4ede42b1a4#.4go42d8qs">
<img class="img-portfolio img-responsive" src="img/chicheng.jpg">
<div class="description-box">
<h4>
<strong>到北京實習 感受互聯網產業大衝擊</strong>
<small>(台大財金 梁智程)</small>
</h4>
<p>這次很幸運，雖然只有兩個星期半時間，但都有扎實的項目可以做。我們得知當地還非常的缺人才，尤其是工程師。因此實習容易接觸真實企業問題...</p>
</div>
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="https://medium.com/@iriswang_tw/%E5%8C%97%E4%BA%AC-%E5%9C%8B%E7%BE%8E%E5%AF%A6%E7%BF%92-31b0e5a770f#.ep0pah5kd">
<img class="img-portfolio img-responsive" src="img/yuhui.jpg">
<div class="description-box">
<h4>
<strong>北京國美實習</strong>
<small>(台科大資管 王郁卉)</small>
</h4>
<p>前面提到我擅長的是Android APP對於前端開發沒有概念，透過這次的機會學習到前端最基本的Html、CSS，並透過套用bootstrap與jQuery製作簡單的頁面...</p>
</div>
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="https://medium.com/@swrev5741/fb5469b56b2b#.etqb6nlcm">
<img class="img-portfolio img-responsive" src="img/boru.jpg">
<div class="description-box">
<h4>
<strong>北京實習-微信公眾號頁面設計與開發</strong>
<small>(台科大資管 黃柏儒)</small>
</h4>
<p>我這次的工作是做個放在微信上的推廣頁面。簡單來說就是寫一個手機版網頁。比較麻煩的是Android上微信用是用Native的瀏覽器來開網頁，有些神奇的排版錯位很令人傷腦筋...</p>
</div>
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/kaifeng.jpg">
<div class="description-box">
<h4>
<strong>凱風優格包青天</strong>
<small>(台大電機 陳凱風)</small>
</h4>
<p>404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404 404...</p>
</div>
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
<a href="#" class="btn btn-dark">其他實習花絮</a>
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Call to Action -->
<aside class="call-to-action bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>2016暑假再度出行，名額僅限24位，請馬上預約！</h3>
<a href="#" class="btn btn-lg btn-light">計畫時程</a>
<a href="#" class="btn btn-lg btn-dark" data-toggle="modal" data-target="#register-modal">搶先預約</a>
</div>
</div>
</div>
</aside>
<!-- Map -->
<section id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/d/u/0/embed?mid=zTX46KVLBoXE.k-j_Ucxve4RE"></iframe>
<br />
<small>
<a href="https://www.google.com/maps/d/edit?mid=zTX46KVLBoXE.k-j_Ucxve4RE&usp=sharing"></a>
</small>
</iframe>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h4><strong>Changene 互聯網企業海外實習計畫</strong>
</h4>
<p>100 台北市中正區<br>羅斯福路二段66巷2號12F-2</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw"></i> (02) 2358-2392</li>
<li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-dribbble fa-fw fa-3x"></i></a>
</li>
</ul>
<hr class="small">
<p class="text-muted">Copyright © <strong>Changene</strong> 2016</p>
</div>
</div>
</div>
</footer>
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3>要離開了嗎？請給我們一分鐘！</h3>
</div>
<div class="modal-body">
<p>感謝你的觀看!</p>
<p>無論您是學生或是家長，點進這個網頁想必代表您對於此計畫有一定的興趣，是否方便請您留下寶貴資料，給我們一個提供資訊的機會呢？</p>
<form>
<input type="text" placeholder="[email protected]">
<input type="submit" value="幫我保留機會 »">
<p class="form-notice">*this is a fake form</p>
</form>
</div>
<div class="modal-footer">
<p>不用了</p>
</div>
</div>
</div>
<div id="register-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">你好，我是一個Modal</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-primary">送出</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Increase your landing page conversion rates. -->
<script src="js/ouibounce.min.js"></script>
<!-- Custom Theme JavaScript -->
<script>
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
ouibounce(document.getElementById('ouibounce-modal'));
$('body').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
});
</script>
</body>
</html>