/
index.html
199 lines (186 loc) · 7.99 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
<!DOCTYPE HTML>
<!--
Landed by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>HGISC-home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body class="landing">
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1 id="logo"><a href="index.html">Home</a></h1>
<nav id="nav">
<ul>
<li><a href="course-teacher.html">課程&老師介紹</a></li>
<li><a href="activity-friendclub.html">活動&友社</a></li>
</li>
<li><a href="https://www.facebook.com/%E7%AB%B9%E5%A5%B3%E8%B3%87%E7%A0%941st-1432581630163375/" class="button special">我愛粉專</a></li>
</ul>
</nav>
</header>
<!-- Banner -->
<section id="banner">
<div class="content">
<header>
<h2>竹女資研 HGISC 1st</h2>
<p>用 VPN 隱藏自己 IP 好像有點酷?<br />
為什麼他破解了Wi-Fi自己玩得很開心?<br />
想知道怎麼擁有強大的資訊力嗎?快來加資研吧!</p>
</header>
<span class="image"><img src="images/pic01.jpg" alt="" /></span>
</div>
<a href="#one" class="goto-next scrolly">Next</a>
</section>
<!-- One -->
<section id="one" class="spotlight style1 bottom">
<span class="image fit main"><img src="images/pic02.jpg" alt="" /></span>
<div class="content">
<div class="container">
<div class="row">
<div class="4u 12u$(medium)">
<header>
<h2>加資研六大理由</h2>
<p>Joining HGISC is your best choice.</p>
</header>
</div>
<div class="4u 12u$(medium)">
<h3>1.程式的思維可重新釐清邏輯思考</h3>
<h3>2.學到的技巧、寫出的作品以利學測推甄</h3>
<h3>3.從0開始進入資訊新世界🔜逐漸培養資訊視野</h3>
</div>
<div class="4u$ 12u$(medium)">
<h3>4.學習架設網頁🔜擁有個人風格的網站</h3>
<h3>5.參加活動認識各校大神,互相切磋技巧🔜彼此交流學到更多程式的花樣</h3>
<h3>6.優質的師資讓你發問各種問題🔜快速進步成長</h3>
</div>
</div>
</div>
</div>
<a href="#two" class="goto-next scrolly">Next</a>
</section>
<!-- Two -->
<section id="two" class="spotlight style2 right">
<span class="image fit main"><img src="images/pic03.jpg" alt="" /></span>
<div class="content">
<header>
<h2>創社小故事</h2>
<p>一份屬於青春的熱情與勇氣</p>
</header>
<p>"我知道自己玩資訊很快樂很自在,但我也知道不是每個同學都有幸藉觸到這些..."</br>
一年的時光中,養精蓄銳參加資訊迎新、SITCON計算機年會、INFAS高中生學術聯展、茶會等,
與許多資訊社團結下良好關係,並從一年的探索中以一個更全面的角度經營我們的社團。</br>
歡迎你的加入,為竹女資研 HGISC 1st創造無限可能~</p>
<ul class="actions">
</ul>
</div>
<a href="#three" class="goto-next scrolly">Next</a>
</section>
<!-- Three -->
<section id="three" class="spotlight style3 left">
<span class="image fit main bottom"><img src="images/pic04.jpg" alt="" /></span>
<div class="content">
<header>
<h2>一年中我們會有的活動</h2>
<p>爆炸多的活動供你選擇,全部自由參加喔~</p>
</header>
<p>迎新(認識桃竹區友社成員的好時機)</br>
企業參訪(了解資訊產業的工作情形&參訪大型企業)</br>
寒訓(聯合外縣市資訊社一起出遊,讓你交到超多志同道合的朋友)</br>
籌辦INFAS高中學術聯展(深刻體會資訊社群的運作方式)
</p>
<ul class="actions">
<li><a href="activity-friendclub.html" class="button">Learn More</a></li>
</ul>
</div>
<a href="#four" class="goto-next scrolly">Next</a>
</section>
<!-- Four -->
<section id="four" class="wrapper style1 special fade-up">
<div class="container">
<header class="major">
<h2>小主題大探索</h2>
<p>除了我們的網頁主要課程,為了滿足大家對資訊的好奇我們也會穿插一些有趣的小課程喔^^</p>
</header>
<div class="box alt">
<div class="row uniform">
<section class="4u 6u(medium) 12u$(xsmall)">
<span class="icon alt major fa-area-chart"></span>
<h3>翻牆小技巧</h3>
<p>如何利用VPN安全取得他國IP位址? shadowsocks在大陸也能穩定上網?</p>
</section>
<section class="4u 6u$(medium) 12u$(xsmall)">
<span class="icon alt major fa-comment"></span>
<h3>鍵盤側錄</h3>
<p>你知道當你按下鍵盤的剎那,遙遠的一端可能接受到你所有的軌跡嗎?</p>
</section>
<section class="4u$ 6u(medium) 12u$(xsmall)">
<span class="icon alt major fa-flask"></span>
<h3>人工智慧&物聯網</h3>
<p>AI?物聯網?傳說中的新趨勢,讓我們用最簡單的方式一探究竟吧^^</p>
</section>
<section class="4u 6u$(medium) 12u$(xsmall)">
<span class="icon alt major fa-paper-plane"></span>
<h3>遊戲</h3>
<p>甚麼是遊戲外掛? 用簡單的python,VB就可以寫出屬於自己的小遊戲?</p>
</section>
<section class="4u 6u(medium) 12u$(xsmall)">
<span class="icon alt major fa-file"></span>
<h3>美圖軟體</h3>
<p>是真是假?Photoshop,電繪顛覆你我的小宇宙~</p>
</section>
<section class="4u$ 6u$(medium) 12u$(xsmall)">
<span class="icon alt major fa-lock"></span>
<h3>Wordpress</h3>
<p>想用不斷開源更新的網誌系統嗎?Wordpress絕對是你最佳的選擇~</p>
</section>
</div>
</div>
<footer class="major">
<ul class="actions">
<li><a href="mailto:hgisc1st@gmail.com" class="button">我還有idea</a></li>
</ul>
</footer>
</div>
</section>
<!-- Five -->
<section id="five" class="wrapper style2 special fade">
<div class="container">
<header>
<h2>聯絡我們</h2>
</header>
<ul class="icons">
<li><a href="https://www.facebook.com/%E7%AB%B9%E5%A5%B3%E8%B3%87%E7%A0%941st-1432581630163375/" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="https://www.instagram.com/rwqlisa/?hl=zh-tw" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://github.com/lisasasasa/HGISC-homepage" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
<li><a href="mailto:hgisc1st@gmail.com" class="icon alt fa-envelope"><span class="label">Email</span></a></li>
</ul>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<ul class="copyright">
<li>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>