-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (161 loc) · 6.7 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
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>小明的一天</title>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="tl-wrapper">
<ul class="timeline">
<li class="tl-item" data-year="06:45<br>am">
<div class="tl-image"><img src=" https://i.imgur.com/WzEKlPS.gif"/></div>
<div class="tl-copy">
<h3 class="title">上午06:45</h3>
<div class="tl-description">
<h4><p>鬧鐘聲響起，小明伸個懶腰便起床了，新的一天正式開始。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="06:55<br>am">
<div class="tl-image"><img src="https://i.imgur.com/P38hbIr.gif"/></div>
<div class="tl-copy">
<h3 class="title">上午06:55</h3>
<div class="tl-description">
<h4><p>小明洗漱後開始吃早餐。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="07:30<br>am">
<div class="tl-image"><img src="https://i.imgur.com/q3AHtBn.gif"/></div>
<div class="tl-copy">
<h3 class="title">上午07:30</h3>
<div class="tl-description">
<h4><p>小明正在等候搭巴士回校，從巴士站的顯示屏可看到巴士到站時間。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="07:50<br>am">
<div class="tl-image"><img src="https://i.imgur.com/ppKY3uD.gif"/></div>
<div class="tl-copy">
<h3 class="title">上午07:50</h3>
<div class="tl-description">
<h4><p>巴士上的顯示屏可得知現時巴士途經的位置，小明在到站時下車並準時到達學校。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="08:00<br>am">
<div class="tl-image"><img src="https://i.imgur.com/FPRp5Gr.gif"/></div>
<div class="tl-copy">
<h3 class="title">上午08:00</h3>
<div class="tl-description">
<h4><p>小明到達學校上課，並進入課室與同學們一起上課。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="10:30<br>am">
<div class="tl-image"><img src="https://i.imgur.com/qpk6xAa.gif"/></div>
<div class="tl-copy">
<h3 class="title">上午10:30</h3>
<div class="tl-description">
<h4><p>下課鐘響起，小明利用小息時間到電腦室上網，他想利用網上地圖安排下週秋季旅行的路線。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="03:30<br>pm">
<div class="tl-image"><img src="https://i.imgur.com/SPkUY9G.gif"/></div>
<div class="tl-copy">
<h3 class="title">下午03:30</h3>
<div class="tl-description">
<h4><p>放學時, 小明在手機上收到朋友來的訊息。原來是同學想邀請小明一起到球場踢足球。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="03:30<br>pm">
<div class="tl-image"><img src="https://i.imgur.com/brp140V.gif"/></div>
<div class="tl-copy">
<h3 class="title">下午03:30</h3>
<div class="tl-description">
<h4><p>小明於是用手機地圖，看看界限街球場在哪裡。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="04:30<br>pm">
<div class="tl-image"><img src="https://i.imgur.com/ihK1nfb.gif"/></div>
<div class="tl-copy">
<h3 class="title">下午04:30</h3>
<div class="tl-description">
<h4><p>小明終於到達球場，他在界限街球場與友人踢足球。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="06:30<br>pm">
<div class="tl-image"><img src="https://i.imgur.com/ySemsw8.gif"/></div>
<div class="tl-copy">
<h3 class="title">下午06:30</h3>
<div class="tl-description">
<h4><p>小明踢完足球回到家中，接到母親的電話。原來媽媽今晚需要加班，她告訴小明自行預備晚餐。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="06:35<br>pm">
<div class="tl-image"><img src="https://i.imgur.com/QvVfWO6.gif"/></div>
<div class="tl-copy">
<h3 class="title">下午06:35</h3>
<div class="tl-description">
<h4><p>於是小明打開了外賣Apps，它列出在小明的家五公里範圍內的餐廳，小明從這些餐廳中點了自己和家人想吃的食物。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="06:55<br>pm">
<div class="tl-image"><img src="https://i.imgur.com/wiCWMpJ.gif"/></div>
<div class="tl-copy">
<h3 class="title">下午06:55</h3>
<div class="tl-description">
<h4><p>外賣速遞員很快就把食物從餐廳送到小明家中。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="07:30<br>pm">
<div class="tl-image"><img src="https://i.imgur.com/L72LrH9.gif"/></div>
<div class="tl-copy">
<h3 class="title">下午07:30</h3>
<div class="tl-description">
<h4><p>吃過飯後, 小明開始做作業。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="09:15<br>pm">
<div class="tl-image"><img src="https://i.imgur.com/IoyZh70.gif"/></div>
<div class="tl-copy">
<h3 class="title">下午09:15</h3>
<div class="tl-description">
<h4><p>做完作業後, 小明看了一會兒電視新聞。看到香港天文台將於午夜後改發3號風球。並在地圖上得知颱風的移動位置及何時會最接近本港。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="10:15<br>pm">
<div class="tl-image"><img src="https://i.imgur.com/QtGwQbF.gif"/></div>
<div class="tl-copy">
<h3 class="title">下午10:15</h3>
<div class="tl-description">
<h4><p>小明看完電視後便刷牙洗臉, 準備上床睡覺了。</p></h4>
</div>
</div>
</li>
<li class="tl-item" data-year="Q&A">
<iframe src="./Q&A/Q&A.html" frameborder="0" width="68%" height="100%"></iframe>
<div class="tl-copy">
<h3 class="title">請問小明哪些活動有使用空間數據？</h3>
<div class="tl-description">
<p></p>
</div>
</div>
</li>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>