-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
328 lines (319 loc) · 13.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
<!DOCTYPE html>
<html lang="en">
<head>
<!--google analytics-->
<script type="text/javascript" src="js/ga.js"></script>
<meta charset="UTF-8"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta property="og:title" content="NCTU-Frontier, a team helping you developping your website"/>
<meta property="og:type" content="WebSite Design, Programming, Software"/>
<meta property="og:url" content="www.nctu-frontier.com.tw"/>
<meta property="og:image" content="http://museum.lib.nctu.edu.tw/share/mark.gif"/>
<meta property="og:description" content="WebSite Design, Programming, Software, Student team"/>
<meta property="og:site_name" content="NCTU-Frontier"/>
<link rel="shortcut icon" type="image/x-icon" href="img/icon.png"/>
<title>Frontier</title>
<!-- Import Google Icon Font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/cwtexhei.css">
<!-- Import materialize.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<link rel="stylesheet" href="css/styles.css"/>
<script src="https://use.fontawesome.com/3e37146c77.js"></script>
</head>
<body>
<!-- Header -->
<div class="navbar-fixed">
<nav class="light-blue">
<div class="nav-wrapper container">
<a href="./index.html" class="brand-logo">Frontier</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#author">Team</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#project">Project</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</div>
</nav>
</div>
<!-- Body -->
<!-- Top Background Picture -->
<div class="main">
<div class="parallax-container">
<div class="parallax">
<div class="type-font typed-layout" align="center">
<div id="typed-strings">
<p>Hi, we are Frontier.<br>A Web Design Team who </p>
</div>
<span id="typed" style="white-space:pre;"></span>
</div>
<img src="http://cdn1.bestpsdfreebies.com/wp-content/uploads/2014/03/blueprint-pattern-4.jpg">
</div>
</div>
<!-- Author -->
<div class="row author scrollspy section1" id="author">
<div class="col s12 m12 l12 header center"><p>成員組織</p></div>
<div class="col s12 m6 l4">
<div id="card-1">
<div class="front circle">
<img src="./img/profile/calee.jpg" alt="calee">
</div>
<div class="back circle">
<div class="name-position">
<h4 class="name">Gavin Lee</h4>
<p class="position">職稱: PM</p>
</div>
<p class="more"><a href="#calee">Click</a></p>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div id="card-2">
<div class="front circle">
<img src="./img/profile/fuyu.gif" alt="fuyu">
</div>
<div class="back circle">
<div class="name-position">
<h4 class="name">Fuyu Fu</h4>
<p class="position">職稱: CTO</p>
</div>
<p class="more"><a href="#fuyu">Click</a></p>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div id="card-3">
<div class="front circle">
<img src="./img/profile/OAlienO.jpg" alt="OAlienO">
</div>
<div class="back circle">
<div class="name-position">
<h4 class="name">OAlienO</h4>
<p class="position">職稱: 前端首席執行長</p>
</div>
<p class="more"><a href="#oalieno">Click</a></p>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div id="card-4">
<div class="front circle">
<img src="./img/profile/Steven.jpg" alt="Steven">
</div>
<div class="back circle">
<div class="name-position">
<h4 class="name">Steven Lin</h4>
<p class="position">職稱: QC</p>
</div>
<p class="more"><a href="#steven">Click</a></p>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div id="card-5">
<div class="front circle">
<img src="./img/profile/FrozenKP.jpg" alt="FrozenKP">
</div>
<div class="back circle">
<div class="name-position">
<h4 class="name">Yi-Hsien Chen</h4>
<p class="position">職稱: CIO</p>
</div>
<p class="more"><a href="#frozen">Click</a></p>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div id="card-6">
<div class="front circle">
<img src="./img/profile/Kaiyeh.jpg" alt="Kaiyeh">
</div>
<div class="back circle">
<div class="name-position">
<h4 class="name">Kaiyeh Lue</h4>
<p class="position">職稱: MIS</p>
</div>
<p class="more"><a href="#kaiyeh">Click</a></p>
</div>
</div>
</div>
</div>
<!-- details -->
<!-- calee -->
<div id="calee" class="modal">
<div class="modal-content">
<h4>Gavin Lee</h4>
<p>職稱: PM</p>
<p>經歷:
</p>
<p>部落格: </p>
<p>專案: </p>
<p>Email: <a href="mailto: sz110010@gmail">sz110010@gmail</a></p>
</div>
</div>
<!-- fuyu -->
<div id="fuyu" class="modal">
<div class="modal-content">
<h4>Fuyu Fu</h4>
<p>職稱: CTO</p>
<p>經歷:
</p>
<p>部落格: </p>
<p>專案: </p>
<p>Email: <a href="mailto: sz110010@gmail">sz110010@gmail</a></p>
</div>
</div>
<!-- oalieno -->
<div id="oalieno" class="modal">
<div class="modal-content">
<h4>OAlienO</h4>
<p>職稱: 前端首席執行長</p>
<p>經歷:
</p>
<p>部落格: <a href="https://oalieno.github.io/">https://oalieno.github.io/</a></p>
<p>專案: </p>
<p>Email: <a href="mailto: sz110010@gmail">sz110010@gmail</a></p>
</div>
</div>
<!-- steven -->
<div id="steven" class="modal">
<div class="modal-content">
<h4>Steven Lin</h4>
<p>職稱: QC</p>
<p>經歷:
</p>
<p>部落格: </p>
<p>專案: </p>
<p>Email: <a href="mailto: sz110010@gmail">sz110010@gmail</a></p>
</div>
</div>
<!-- frozen -->
<div id="frozen" class="modal">
<div class="modal-content">
<h4>Yi-Hsien Chen</h4>
<p>職稱: CIO</p>
<p>經歷:
</p>
<p>部落格: </p>
<p>專案: </p>
<p>Email: <a href="mailto: sz110010@gmail">sz110010@gmail</a></p>
</div>
</div>
<!-- kaiyeh -->
<div id="kaiyeh" class="modal">
<div class="modal-content">
<h4>Kaiyeh Liu</h4>
<p>職稱: MIS</p>
<p>經歷:
</p>
<p>部落格: </p>
<p>專案: </p>
<p>Email: <a href="mailto: sz110010@gmail">sz110010@gmail</a></p>
</div>
</div>
<!-- Service -->
<div id="process" class="scrollspy section2">
<h3 class="header center">工作流程</h3>
<p>ToolBox 的標準工作流程為：需求釐清、系統架構規劃、定期確認進度、事後維護分析。我們用最嚴謹的程序、最先進的資料科學與前後端開發技術，將最大的價值交付予客戶。</p>
<div class="row">
<div class="col s6 m6 l6">
<div class="card small">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="./img/process/request.jpg"/>
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">需求釐清<i class="material-icons right">more_vert</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">需求釐清<i class="material-icons right">close</i></span>
<p>在案前，盡可能詳細的了解客戶的需求、預算、使用者、預期效果等資訊，減少開始工作後的溝通成本。</p>
</div>
</div>
</div>
<div class="col s6 m6 l6">
<div class="card small">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="./img/process/structure.png"/>
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">架構規劃<i class="material-icons right">more_vert</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">架構規劃<i class="material-icons right">close</i></span>
<p>包含 前端設計、系統架構、Database 的設計，我們都會在規劃架構時與客戶確認，力求最友善的 UI、UX 設計及最有好的後端效能，待客戶確認後才會開始動工。</p>
</div>
</div>
</div>
<div class="col s6 m6 l6">
<div class="card small">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="./img/process/87.png"/>
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">進度確認<i class="material-icons right">more_vert</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">進度確認<i class="material-icons right">close</i></span>
<p>以 Agile Scrum 的開發模式，定期與客戶報告進度及確認設計，同時也期望客戶將其想法與我們溝通，讓專案不會與客戶的想法脫節。</p>
</div>
</div>
</div>
<div class="col s6 m6 l6">
<div class="card small">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="./img/process/maintain.jpg"/>
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">維護分析<i class="material-icons right">more_vert</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">維護分析<i class="material-icons right">close</i></span>
<p>在專案上線後，我們將提供一個月免費的維護、分析及修改，若需要更多的維護分析服務，亦可與我們商談案後的續約。</p>
</div>
</div>
</div>
</div>
</div>
<!-- Project -->
<div id="project" class="scrollspy section1">
<h3 class="header center">完成 / 進行中 專案</h3>
<div class="collection">
<a target="_blank" href="http://food.nctu.me" class="collection-item">NCTU Food Ordering System</a>
<a target="_blank" href="#!" class="collection-item">ToolBox Ordering System</a>
<a target="_blank" href="https://github.com/a0919610611/MCFB" class="collection-item">2016 HackNTU, MCFB</a>
<a target="_blank" href="https://github.com/NCTU-ToolBox/meichu-tagtoo" class="collection-item">2016 Mei-Chu Hackathon</a>
<a target="_blank" href="#!" class="collection-item">NCTU Library</a>
</div>
</div>
<!-- Contact us -->
<div id="contact" class="row scrollspy section2 center">
<h3 class="header center">聯絡我們</h3>
<div class="col l6"><a href="https://www.facebook.com/%E4%B8%8D%E5%B0%88%E6%A5%AD%E9%98%BF%E5%AE%85%E7%9A%84%E7%A7%91%E6%8A%80%E5%B0%8F%E8%AD%98-1564897363824637/"><i class="fa fa-facebook-official" aria-hidden="true" style="font-size: 100px"></i></a></div>
<div class="col l6"><a href="mailto: [email protected]"><i class="fa fa-envelope-o" aria-hidden="true" style="font-size: 100px"></i></a></div>
</div>
<!-- Contract -->
<div id="contract" class="scrollspy"></div>
</div>
<!-- Footer -->
<footer class="page-footer light-blue">
<div class="footer-copyright">
<div class="container center">
© 2016 Frontier Copyright
<!--<a class="grey-text text-lighten-4 right" href="#!">More Links</a>-->
</div>
</div>
</footer>
<!-- Import jQuery before materialize.js -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Import typed.js -->
<script type="text/javascript" src="js/typed.js"></script>
<!-- Import flip.js -->
<script src="js/flip.js"></script>
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>