-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
192 lines (192 loc) · 10.6 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
<!DOCTYPE html>
<html>
<head>
<title>yangtze</title>
<meta charset="UTF-8">
<link rel="icon" href="images/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/core.js"></script>
</head>
<body>
<div id="slider">
<div class="slide slide-feature active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12 animated flipInX swing" style="background:#a9a9a9;border-radius:50px;margin-top:80px;opacity:0.8;padding:20px;">
<h1 class="animated zoomIn">长江</h1>
<h2 class="animated zoomInLeft">Yangtze River, Changjiang</h2>
<p class="animated rotateIn">Victor Truong | Period 6 | Chinese 2 | March 20, 2016</p>
<p class="animated bounce" style="font-size:16px;">
Simply the <strong>worst presentation</strong> out of them all.
</p>
</div>
</div>
</div>
</div>
<div class="slide" style="background:#ff9999;">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 class="animated flip">四个城市</h1>
<p class="animated lightSpeedIn">
长江起源于中国的青海省从<strong>西</strong>向<strong>东</strong>， 流经重庆，武汉，
南京和上海等大城市，从上海流入东海。长江全长六千三百多公里，是世界第三，中国<strong>第一</strong>大河。
</p>
</div>
<div class="slide-img col-xs-7 animated swing"><img src="images/slide/2.png"></div>
</div>
</div>
</div>
<div class="slide" style="background:#ffad99;">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 class="animated flip">南京</h1>
<p class="animated lightSpeedIn">
<strong>春天</strong>的时候不太冷。气温在五十二到六十八度左右。今天是六十一度，有云。你因该穿多一点儿衣服。
三个名胜是紫金山，南京博物院，和玄武湖。
</p>
</div>
<div class="slide-img col-xs-7 animated wobble"><img src="images/slide/3.png"></div>
</div>
</div>
</div>
<div class="slide" style="background:#ffcc99;">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 class="animated flip">上海</h1>
<p class="animated lightSpeedIn">
<strong>夏天</strong>的时候很热，你因该穿少一点衣服。温度在八十二度左右。今天的气温是六十七度，没有云。
三个名胜是新天地，外滩，和豫園。
</p>
</div>
<div class="slide-img col-xs-7 animated jello"><img src="images/slide/4.png"></div>
</div>
</div>
</div>
<div class="slide" style="background:#ffd699;">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 class="animated flip">武汉</h1>
<p class="animated lightSpeedIn">
<strong>秋天</strong>的时候很暖。你可以穿短衫，但是晚间的时候你要穿长衫。温度在六十八到八十二度左右。今天是七十度，有一点儿云。
三个名胜是黄鹤楼，湖北省博物馆，和东湖。
</p>
</div>
<div class="slide-img col-xs-7 animated bounce"><img src="images/slide/5.png"></div>
</div>
</div>
</div>
<div class="slide" style="background:#ffe699;">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 class="animated flip">重庆</h1>
<p class="animated lightSpeedIn">
<strong>冬天</strong>的时候很冷。温度是从四十六度到五十四度。你出门的时候因该穿大衣。今天气温是五十度，有太阳。
三个名胜是大足石刻，丰都县，和瞿塘峡。
</p>
</div>
<div class="slide-img col-xs-7 animated rollIn">
<img src="images/slide/6.png">
</div>
</div>
</div>
</div>
<div class="slide" style="background:#ffff99;">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 class="animated flip">位置</h1>
<p class="animated lightSpeedIn">
长江从<strong>昆仑山</strong> (Kunlun Mtns.) 到<strong>东海</strong>。南京 (Nanjing) 和上海
(Shanghai) 都在长江的南岸，武汉 (Wuhan) 和重庆 (Chongqing) 在长江的北岸。
</p>
</div>
<div class="slide-img col-xs-7 animated zoomInUp"><img src="images/slide/7.png"></div>
</div>
</div>
</div>
<div class="slide" style="background:#e6ff99;">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 class="animated flip">人口</h1>
<ul class="animated lightSpeedIn">
<li><strong>重庆</strong>: 九百六十九万 (~9.69 million)</li>
<li><strong>武汉</strong>: 八百三十一万 (~8.31 million)</li>
<li><strong>南京</strong>: 三百六十二万 (~3.62 million)</li>
<li><strong>上海</strong>: 一千四百三十五万 (~14.35 million)</li>
</ul>
</div>
<div class="slide-img col-xs-7 animated rotateIn"><img src="images/slide/8.png"></div>
</div>
</div>
</div>
<div class="slide" style="background:#ddff99;">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 class="animated flip">污染</h1>
<p class="animated lightSpeedIn">河流已经改变了在过去的五十年。以前的水很清，你可以看到底，但是现在的水不能喝。</p>
</div>
<div class="slide-img col-xs-7 animated pulse">
<img src="images/slide/9.1.png">
<img src="images/slide/9.2.png">
</div>
</div>
</div>
</div>
<div class="slide" style="background:#99ff99;">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 class="animated flip">事实</h1>
<ul class="animated lightSpeedIn">
<li><strong>尼罗河</strong>和<strong>亚马逊</strong>两个都长过长江。</li>
<li>长江三峡大坝没年做出<strong>一百多TBh</strong>得电。</li>
<li>长江河有很多不同宗的动物。</li>
<li>长江河有很多交通。</li>
</ul>
</div>
<div class="slide-img col-xs-7 animated tada"><img src="images/slide/10.png"></div>
</div>
</div>
</div>
<div class="slide" style="background:#000000;">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 class="animated fadeInUpBig" style="color:#ffffff;font-size:96px;text-align:center;">结束。</h1>
</div>
</div>
</div>
</div>
</div>
<div id="slider-nav">
<a href="#" class="arrow-prev"><img src="images/arrow-prev.png"></a>
<ul id="dots">
<li class="dot active-dot">▪</li>
<li class="dot">▪</li>
<li class="dot">▪</li>
<li class="dot">▪</li>
<li class="dot">▪</li>
<li class="dot">▪</li>
<li class="dot">▪</li>
<li class="dot">▪</li>
<li class="dot">▪</li>
<li class="dot">▪</li>
<li class="dot">▪</li>
</ul>
<a href="#" class="arrow-next"><img src="images/arrow-next.png"></a>
</div>
© 2016 Gamecrafter |
<a href="#" onclick="toggleFullscreen();">Toggle fullscreen</a> |
<a href="#" onclick="playSlideshow();">Autoplay</a>
</body>
</html>