-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
217 lines (180 loc) · 8.42 KB
/
home.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="SODA Challenge Landing">
<meta name="author" content="SODA">
<title>SODA Challenges</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/index.css" rel="stylesheet">
<link rel="icon" type="image/png" href="/static/favicon.ico">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<section id="topNavBar" class="nav-wrapper transparent red">
<div class="container-fluid">
<div id="menuzord" class="menuzord red">
<ul class="menuzord-menu menuzord-right menuzord-indented scrollable">
<li class="active"><a href="http://sodachallenges.com">中文版</a>
</li>
<li><a href="http://sodachallenges.com/en">English</a>
</li>
<li style="height: 1px" class="scrollable-fix">
</li>
</ul>
</div>
</div>
</section><!--/nav-wrapper-->
<!-- Full Width Image Header -->
<header class="header-image" data-vide-bg="video/video">
<ul id="scene">
<li class="layer" data-depth="0.0" style="z-index: 9;">
<div class="headline">
<div class="container">
<div id="header-title">
<img src="img/about/17logo.png" class="img-responsive">
</div>
</div>
</div>
</li>
</ul>
</header>
<section id="about" class="banner text-center">
<h2>
SODA是什么？
</h2>
</section>
<!-- Page Content -->
<!-- <hr class="featurette-divider"> -->
<section id="about">
<div class="big-arrow-down"></div>
<div class="container">
<!-- First Featurette -->
<div class="row featurette" id="about-1">
<div class="col-lg-5 col-md-6 col-xs-6 pad-top20">
<h3>打开瓶盖，释放数据的能量
<!-- <span class="text-muted">Will Catch Your Eye</span> -->
</h3>
<br>
<p>
SODA是Sino Open Data Apps（中国开放数据创新应用大赛）的英文首字母缩写，寓意着开放的数据就像气泡水中释放的能量。
</p>
<p>
你知道吗？政府、企事业单位手中蕴藏了大量与城市生活息息相关的数据。这些数据就像封装在玻璃瓶里的苏打水，看上去安静平稳，悄无声息，但只要一打开瓶盖，就能瞬间迸发出无穷的能量！
</p>
</div>
<div id="bottle">
<img src="img/about/bottle.png" class="img-responsive">
</div>
<div id="bottle-cap">
<img src="img/about/bottle_cap.png" class="img-responsive">
</div>
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="black-bg bubble-bg">
<div class="container">
<!-- Second Featurette -->
<div class="row featurette" id="about-2">
<div id="thermo-img" class="col-lg-4 col-md-6 col-xs-6" style="position: relative; overflow: hidden;">
<div id="thermo">
<img class="img-responsive" id="thermo-in" src="img/about/thermo_in_g.png">
</div>
<img class="img-responsive" src="img/about/thermo.png">
</div>
<div class="col-lg-offset-3 col-lg-5 col-md-6 col-xs-6 pad-top20">
<h3>你！可以把数据转换成温度</h3>
<br>
<p>然而，数据只是一堆冰冷的数字，如何将数据转换成温度，来温暖我们的城市？</p>
<p>我们的城市不是一个大公司，所有的数据都等着经理们来为我们分析处理。城市的智慧，来源于大众的智慧。SODA邀请你一起来挖掘城市数据的价值，通过对数据的深度理解/增值开发和创新应用，来解决我们城市中的问题，服务于我们的城市。</p>
</div>
</div>
</div>
</div>
<div class="container" style="position: relative;">
<!-- Third Featurette -->
<div class="row featurette" id="about-3">
<div class="col-lg-5 col-md-6 col-xs-6 pad-top20">
<h3>SODA是一个公众参与的开放平台</h3>
<br>
<p>
开放数据，众创协作，可以把我们的城市变成一个活的有机体；城市中的每一个人都是这个有机体的组成部分。开放数据把我们连接起来，把我们的城市变成一个包容、有趣的创新空间！
</p>
<p>
城市的未来，为你而来。你心中对于未来城市的想象，也许可以通过SODA来实现，让便捷、绿色、平等、高效、安全 的城市愿景变成现实！
</p>
</div>
</div>
</div>
<div class="black-bg bubble-bg">
<div class="container">
<!-- Second Featurette -->
<div class="row featurette" id="about-4">
<div class="col-lg-5 col-md-6 col-xs-6 pad-top20">
<h3>
SODA关注的领域<!-- <span class="text-muted">Is Pretty Cool Too.</span> -->
</h3>
<p>SODA大赛自2017年起将着重围绕未来商业、智慧交通、绿色发展和健康医疗四大创新板块，链接不同城市，解锁数据，激发创新。</p>
<p>你，也可以成为改变城市未来的数据英雄，加入SODA，为城市创新增添动力!</p>
<div class="button-block">
<p>
<a href="#" class="btn btn-default">敬请期待</a>
</p>
</div>
</div>
<div class="col-lg-offset-1 col-lg-4 col-md-6 col-xs-6 video">
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="black-bg">
<div class="footer-qr">
<img src="img/about/qr.jpg" class="img-responsive">
</div>
<div class="container footer-info text-center">
<a href="http://www.miitbeian.gov.cn/">沪ICP备17018055号-1</a>
</div>
</footer>
<!-- jQuery -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
window.jQuery || document.write('<script type="text/javascript" src="scripts/vendor/jquery-1.11.3.min.js"><\/script>')
</script>
<script type="text/javascript" src="scripts/vendor/jquery.vide.js"></script>
<!--<script src="js/jquery-1.11.3.min.js"></script>-->
<script src="scripts/vendor/parallax.min.js"></script>
<script src="scripts/vendor/mobile-detect.min.js"></script>
<script src="scripts/vendor/main.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="scripts/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/vendor/smoothscroll.js"></script>
<script type="text/javascript" src="scripts/vendor/multilayer-parallax.min.js"></script>
<!-- Add Parallax -->
<script type="text/javascript">
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
<script src='/scripts/vendor/validator.min.js' type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#list .project-block .inner').each(function(item){
var src = $(this).attr('data-src');
if(src){
$(this).css('background-image', 'url('+src+')');
}
});
});
</script>
</body>
</html>