-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
261 lines (207 loc) · 8.79 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
<!DOCTYPE HTML>
<!--
Solarize by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
Design:TEMPLATED
Images:Unsplash
-->
<html>
<head>
<title>與綠樹共舞</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="icon/homepage.ico" />
<script src = "js/fb_like.js"></script>
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<script src = "js/treeGrow.js"></script>
<script src = "js/ourEffect.js"></script>
<!--網頁滑動-->
<script src="js/jquery-latest.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div class="wrapper style1">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1><a href="index.html" id="logo">Green Earth</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<!--<li class="active"><a href="index.html">與綠樹共舞</a></li>-->
<li><a id="top_friends" class="top_friends" href="#friends">綠樹朋友</a></li>
<li><a id="top_tree" href="#tree">我的樹苗</a></li>
<li><a id="top_qanda" href="#qanda">綠色問答</a></li>
<li><a id="top_news" href="#news">綠園世界</a></li>
<li><a id="top_co2" href="#co2">碳の足跡</a></li>
</ul>
</nav>
</div>
</div>
<!-- Banner -->
<div id="banner">
<section class="container">
<h2><a href = "index.html">與綠樹共舞</a></h2>
<span>－Green Earth－</span>
<p>從現在開始！ 讓我們帶您進入綠色世界，與綠樹共舞。</p>
</section>
</div>
</div>
<div id = "friends" class="wrapper style2 index">
<div id ="friendsShow">
<section class="container">
<header class="major">
<h2>您熟悉保護地球的大功臣嗎？</h2>
</header>
<p>趕快進來認識新朋友吧！</p>
<a href="introduction.html" class="button">綠樹朋友</a>
</section>
</div>
</div>
<!-- Section One -->
<div id = "tree" class="wrapper style3 index">
<div id = "treeShow" >
<section class="container">
<header class="major">
<h2>知道一棵綠樹要花多少年成長嗎？</h2>
</header>
<p>馬上種一棵屬於自己的綠樹吧！</p>
<input id = "startGrow" type = "button" value = "我的樹苗" class="button alt">
<a href="#treeArea" class="button"></a>
</input>
</section>
</div>
</div>
<!-- Section Tree -->
<div id = "treeArea" class="wrapper style4">
<div id = "treeAreaShow">
<section class="container">
<header class="major">
<h2>請常常來看它喔!</h2>
<span class="byline">不然可能會枯死的喔!</span>
</header>
<div id = "tree" class = "tree" >
<img src="images/blank.jpg" id="treeImage" class="treeImage" alt="treeImage" width="100" />
</div>
<input id = "reset" type = "button" value = "reset" class="button"></input>
</section>
</div>
</div>
<!-- Section Two -->
<div id = "qanda" class="wrapper style2 index">
<div id = "qandaShow">
<section class="container">
<header class="major">
<h2>您擁有愛護環境的知識嗎？</h2>
</header>
<p>來看看您了解環境多少吧！</p>
<a href="questions.html" class="button">綠色問答</a>
</section>
</div>
</div>
<div id = "news" class="wrapper style3 news" >
<div id = "newsShow" class="wrapper style3">
<section class="container">
<header class="major">
<h2>世界各地的綠色資訊您都掌握了嗎？</h2>
</header>
<p>立即成為愛護環境的地球人吧！</p>
<a href="sharingnews.html" class="button alt">綠園世界</a>
</section>
</div>
</div>
<div id = "co2" class="wrapper style2 index">
<div id = "co2Show" >
<section class="container">
<header class="major">
<h2>想知道您每天產生多少碳足跡嗎？</h2>
</header>
<p>進來為地球盡一份心力吧！</p>
<a href="footprint.html" class="button">碳の足跡</a>
</section>
</div>
</div>
<!-- Section Three -->
<div id ="postNews"class="wrapper style4">
<div id ="postNewsShow"class="wrapper style4">
<section class="container">
<header class="major">
<h2>想傳達您對地球環境的想法或理念嗎？</h2>
<span class="byline">我們提供世界各地對地球環境有想法的您一個能將您的想法分享出來進行交流的舞台，將您的故事分享給大家吧！</span>
</header>
<details>
<summary>不知道如何分享嗎？</summary>
<ul><li>只要將您的想法撰寫在以下的輸入框中，再按下"Post"即可張貼到版面(<a href = "sharingnews.html">here</a>)上！</li></ul>
</details><br>
<div class="row flush">
<label>Topic:</label>
<input type = "text" placeholder = " Place your topic here!" style = "width: 100%"></input>
<label>Source:</label>
<input type = "text" placeholder = " Please tell us where your article comes from!" style = "width: 100%"></input><br>
<label>Article:</label><br>
<textarea rows = "15" placeholder=" Share your story here for us!" style = "width: 100%"></textarea><br>
<input id = "guestPost" type = "button" value = "Post"></input>
<input id = "guestClear" type = "button" value = "Clear"></input>
</div>
</section>
</div>
</div>
<!-- Team -->
<div class="wrapper style5">
<section id="team" class="container">
<header class="major">
<h2>本次專案製作人員</h2>
<span class="byline">點擊可以觀看個人資料</span>
</header>
<div class="row" >
<div class="3u">
<a href="https://www.facebook.com/bo.wn.shi" class="image"><img src="https://scontent.ftpe4-2.fna.fbcdn.net/v/t1.0-1/p160x160/18813742_1236153713162049_9013584084976277518_n.jpg?_nc_cat=100&_nc_ohc=swH-z7fNoNgAX_sAjeF&_nc_ht=scontent.ftpe4-2.fna&_nc_tp=6&oh=d81a40ce431a348cbe789864e25ed20d&oe=5ECBC691" alt = "Bo-Wun Shih"></a>
<h3>施博文</h3>
<p>00257111</p>
</div>
<div class="3u">
<a href="https://www.facebook.com/joseph.larry.7547" class="image"><img src="https://scontent.ftpe4-2.fna.fbcdn.net/v/t31.0-1/p160x160/19238013_1906245099598630_6271501236810224054_o.jpg?_nc_cat=102&_nc_ohc=mdQuxkxkPUQAX_qyv0A&_nc_ht=scontent.ftpe4-2.fna&_nc_tp=6&oh=184d8adbd8bb8625fc6a1690015d241d&oe=5EBCA7DF" alt="Joseph Larry"></a>
<h3>藍孟彬</h3>
<p>00257112</p>
</div>
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">
<section class="container">
<header class="major">
<div><img src= "images/greenEarth.png" alt= "green earth" width = "64%"></div><br>
<h2>聯絡我們</h2>
<span class="byline">您可以透過下列連結關注我們！</span>
</header>
<ul class="icons">
<li class="active"><a href="https://www.facebook.com/" class="fa fa-facebook"><span>Facebook</span></a></li>
<li><a href="https://twitter.com/" class="fa fa-twitter"><span>Twitter</span></a></li>
<li><a href="https://www.pinterest.com/" class="fa fa-dribbble"><span>Pinterest</span></a></li>
<li><a href="https://plus.google.com/" class="fa fa-google-plus"><span>Google＋</span></a></li>
</ul>
</section>
<!-- Copyright -->
<div id="copyright">
<p>－網頁程式設計期末專案－</p>
<a href = "readme/00257111+00257112.pdf" target = "_blank">網站說明文件</a><br>
<div class="fb-like" style = "margin-left: 19%" data-href="index.html" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
</div>
</body>
</html>