This repository was archived by the owner on Aug 15, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
326 lines (326 loc) · 13.2 KB
/
index.html
File metadata and controls
326 lines (326 loc) · 13.2 KB
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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="./img/favicon.ico">
<title>北科程式設計研究社</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- my css -->
<link rel="stylesheet" type="text/css" href="style/index.min.css">
<link rel="stylesheet" type="text/css" href="style/button.min.css">
</head>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady
}});
}
function onPlayerReady() {
player.playVideo();
// Mute!
player.mute();
}
</script>
<body>
<!-- the navigation -->
<nav class="navbar navbar-default navbar-expand-md navBlack fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" width="50px">
</a>
<!-- Hamburger button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarItem" aria-controls="navbarItem"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- humburger Menu -->
<div class="collapse navbar-collapse" id="navbarItem">
<ul class="nav navbar-nav mr-auto LineBorder ml-auto">
<li class="nav-item active text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="AboutUs.html">About us</a>
</li>
<!-- use dropdown Menu -->
<li class="nav-item text-center">
<a class="nav-link" href="Project.html">Project</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="Course.html">Course</a>
</li>
</ul>
</div>
</div>
</nav>
<div style="height: 76px; background-color: black;"></div>
<div class="pb-5 pt-4" style="background-color: black;">
<div class="w-75 mx-auto">
<div class="embed-responsive embed-responsive-16by9 text-center">
<iframe id="ytplayer" class="embed-responsive-item" src="https://www.youtube.com/embed/5yb_9c6AP8w?rel=0&html5-1&enablejsapi=1&autoplay=1&loop=1&playlist=5yb_9c6AP8w"></iframe>
</div>
</div>
</div>
<!-- information -->
<div class="container-fluid p-5" id="information">
<h1>活動搶先看</h1>
<hr class="titleHr"/>
<div class="text-center">
<!-- tea -->
<div class="card mt-5 ml-5" style="display: inline-block; width: 25vw; background-color: #fff;">
<img class="card-img-top" src="./img/tea.jpg" height="250px">
<div class="card-body">
<h1 class="m-0">新生茶會</h1>
<button type="button" class="btn btn-info float-right my-3" data-toggle="modal" data-target="#dialogs1_1">了解更多</button>
<!-- Modal -->
<div class="modal fade" id="dialogs1_1" tabindex="-1" role="dialog" aria-labelledby="dialogs1_2" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered dialog-w" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dialogs1_2">新生茶會</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left">
<p>
Hey! 聽說...<br>
你還在猶豫要參加哪個社團嗎？<br>
想要踏入程式領域卻覺得自學難以入門嗎？<br>
沒關係！那就來我們的新生茶會，<br>
一起了解 北科程式設計研究社 到底都在做些什麼事情吧！<br>
</p>
<hr class="teadateHr mb-5">
<p>日期：107/9/18 (Tue.)</p>
<p>入場時間：p.m. 6:00 - 6:30</p>
<p>開始時間：p.m. 6:30</p>
<p>地點：綜合科館第二演講廳</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- video -->
<div class="card mt-5 ml-5" style="display: inline-block; width: 25vw; background-color: #fff;">
<img class="card-img-top" src="./img/video.png" height="250px">
<div class="card-body">
<h1 class="m-0">招生影片</h1>
<button type="button" class="btn btn-info float-right my-3" data-toggle="modal" data-target="#dialogs2_1">立即觀賞</button>
<!-- Modal -->
<div class="modal fade" id="dialogs2_1" tabindex="-1" role="dialog" aria-labelledby="dialogs2_2" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dialogs2_2">招生影片</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe width="100%" height="550px" src="https://www.youtube.com/embed/5yb_9c6AP8w?html5=1" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- course -->
<div class="card mt-5 ml-5" style="display: inline-block; width: 25vw; background-color: #fff;">
<img class="card-img-top" src="./img/course.jpg" height="250px">
<div class="card-body">
<h1 class="m-0">社課時間</h1>
<button type="button" class="btn btn-info float-right my-3" data-toggle="modal" data-target="#dialogs3_1">馬上了解</button>
<!-- Modal -->
<div class="modal fade" id="dialogs3_1" tabindex="-1" role="dialog" aria-labelledby="dialogs3_2" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered dialog-w" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dialogs3_2">最近一次社課時間</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left">
<p>鑒於 去年度的檢討</p>
<p>本學期的社課改為 讀書會 - 分組 之形式</p>
<p>使 新生 能選擇 更多有興趣之領域</p>
<p>並帶領社員 從基礎 走向 專案</p>
<p>另外 本社團加開基礎課程 - python</p>
<p>讓零基礎的新生能夠更快速地入門</p>
<hr class="teadateHr" />
<p>時間: 10/02</p>
<p>地點: 科研 1223</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- About Us -->
<div>
<div class="content1">
<div class="all">
<div class="widthSize1 img">
<!-- the picture -->
<a href="AboutUs.html">
<img class="InheritImg About" src="img/NPC.jpg">
</a>
</div>
<div class="widthSize2 text mt-2">
<div class="row m-0">
<div class="col-8 offset-2">
<h2>About Us</h2>
<p>
為了使更多人能夠體會程式的魅力，我們致力於北科校園推廣資訊技術，開設不同語言的課程。<br>
不僅如此，更加開基礎課程，讓初學者能夠更快速地上手，同時，我們也有讀書會分組形式的社課，讓社員能夠團隊合作，並在最後進入專案的開發。<br>
對程式有興趣的你，趕快加入我們的夢想藍圖吧！</p>
</div>
</div>
</div>
</div>
</div>
<div class="content2">
<div class="all">
<div class="img">
<a href="AboutUs.html">
<img class="InheritImg About" src="img/NPC.jpg">
</a>
</div>
<div class="text mt-5">
<div class="row m-0">
<div class="col-10 offset-1 text-center">
<h1 class="mt-2 mb-2">About Us</h1>
<p class="mb-5 text-left">
為了使更多人能夠體會程式的魅力，我們致力於北科校園推廣資訊技術，開設不同語言的課程。<br>
不僅如此，更加開基礎課程，讓初學者能夠更快速地上手。<br>
同時，我們也有 讀書會分組形式 的社課，讓社員能夠團隊合作，並在最後進入專案的開發。<br>
對程式有興趣的你，趕快加入我們的夢想藍圖吧！
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project -->
<div id="Project">
<div class="content1">
<div class="all">
<div class="widthSize2 text">
<div class="row m-0">
<div class="col-8 offset-2">
<h2>Project</h2>
<p>
所有社員在期末前都會做出屬於自己的專案,並存放在 GitHub 上。<br>
GitHub 是一個 全世界最大的開源程式碼社群，同時也可以做版本控制，種種因素使得 GitHub 為全球帶來百億商機。<br>
未來也極有可能是 IT人 的考核之一。
</p>
</div>
</div>
</div>
<div class="widthSize1 img">
<!-- the picture -->
<a href="Project.html">
<img class="InheritImg Project" src="img/Project.jpg">
</a>
</div>
</div>
</div>
<div class="content2">
<div class="all">
<div class="img w-100">
<!-- the picture -->
<a href="Project.html">
<img class="InheritImg Project" src="img/Project.jpg">
</a>
</div>
<div class="text mt-5">
<div class="row m-0">
<div class="col-10 offset-1 text-center">
<h1 class="mt-2">Project</h1>
<p class="text-left mb-5">所有社員在期末前都會做出屬於自己的專案,並存放在 GithHub 上。<br>
GitHub 是一個 全世界最大的開源程式碼社群，同時也可以做版本控制，種種因素使得 GitHub 為全球帶來百億商機。<br>
未來也極有可能是 IT人 的考核之一。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Course -->
<div id="Course">
<div class="content1">
<div class="all">
<div class="widthSize1 img">
<!-- the picture -->
<a href="Course.html">
<img class="InheritImg Course" src="img/CourseContent.jpg">
</a>
</div>
<div class="widthSize2 text">
<div class="row m-0">
<div class="col-8 offset-2">
<h2>Course</h2>
<p>學習程式，並不是為了成為「程式設計師」，而是為了開拓更寬廣的學習途徑</p>
<p class="float-right">——— Mitch Resnick</p>
</div>
</div>
</div>
</div>
</div>
<div class="content2">
<div class="all">
<div class="img w-100">
<!-- the picture -->
<a href="Course.html">
<img class="InheritImg Course" src="img/CourseContent.jpg">
</a>
</div>
<div class="text mt-5">
<div class="row m-0">
<div class="col-10 offset-1 text-center">
<h1 class="mt-2">Course</h1>
<p class="text-left">學習程式，並不是為了成為「程式設計師」，而是為了開拓更寬廣的學習途徑</p>
<p class="float-right mb-5">——— Mitch Resnick</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- contact -->
<div id="contact" class="p-3">
<div class="ContactLink text-center">
<h1>Follow Us</h1>
<button class="mybtn" value="Facebook">Facebook</button>
<button class="mybtn" value="CTF">NPC CTF</button>
</div>
</div>
<footer>
<p class="m-0" style="font-size: 0.9em">© 2018 by NTUT Programming Club</p>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- parallax.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<!-- my script -->
<script src="js/jquery.bootstrap-autohidingnavbar.min.js"></script>
<script src="js/main.min.js"></script>
</body>
</html>