-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
367 lines (349 loc) · 17.8 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
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.12.1/css/all.css">
<link rel="stylesheet" href="libs/glide/glide.core.min.css">
<link rel="stylesheet" href="libs/glide/glide.theme.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico" />
<link rel="shortcut icon" href="favicon.ico"/>
<script src="libs/scrollReveal/scrollreveal.min.js"></script>
<title>维达科技 愿原力与你同在</title>
</head>
<body>
<header class="open">
<div class="logo">
<img src="images/darth-vader.png" class="vader">
<!-- <div class="vader1">Vader</div> -->
</div>
<nav>
<a href="#home">首页</a>
<a href="#about-us">解决方案</a>
<a href="#showcases">成功案例</a>
<a href="#service">资源与服务</a>
<a href="#cmap">基础设施</a>
<a href="#team-intro">团队介绍</a>
<a href="#"><i class="fas fa-search"></i></a>
</nav>
<!-- 折叠导航按钮，屏幕缩小时使用 -->
<div class="burger">
<div class="burger-line1"></div>
<div class="burger-line2"></div>
<div class="burger-line3"></div>
</div>
</header>
<!-- 定义轮播图 -->
<div id="home" class="glide">
<!-- 轮播图轨迹 -->
<div class="glide__track" data-glide-el="track">
<div class="glide__slides">
<!-- 第一个轮播图 -->
<div class="glide__slide">
<!-- 标题 -->
<div class="slide-caption">
<h1>用创新点缀人生，让科技融入理想。</h1>
<h3>科技创新大平台，智慧生活新引擎。依靠科技进步推进经济跨越式发展。用创新点缀人生，让科技融入理想。</h3>
<button class="explore-btn">探索更多</button>
</div>
<!-- 背景遮罩 -->
<div class="backdrop"></div>
<!-- 轮播图片 -->
<img src="images/people-in-couch-1024248.jpg" alt=""/>
</div>
<!-- 第二个轮播图 -->
<div class="glide__slide">
<!-- 标题 -->
<div class="slide-caption">
<h1>科技改变世界</h1>
<h3>立足科技发展，着力自主创新。加速科技进步，为全市经济社会发展提供有力支撑。凝聚科技创新，成就创新梦想。</h3>
<button class="explore-btn">探索更多</button>
</div>
<div class="backdrop"></div>
<!-- 视频静音自动播放循环播放 -->
<video src="videos/working-man.mp4" muted autoplay loop></video>
</div>
</div>
</div>
<!-- 切换轮播图按钮 -->
<div class="glide__arrows" data-glide-el="controls">
<!-- 上一张 -->
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">
<
</button>
<!-- 下一张 -->
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">
>
</button>
<!-- 圆点 -->
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
</div>
</div>
</div>
<div class="content-wrapper">
<section id="about-us" class="about-us">
<h2 class="title1">解决方案</h2>
<p class="intro">
维达科技(Vader)具有全面、落地的AI开放、安全的Big Data持续、先进的Cloud技术,支持192个业务场景的全栈解决方案。
</p>
<div class="features">
<div class="feature">
<i class="fas fa-gamepad"></i>
<h4 class="feature-title">游戏</h4>
<p class="feature-content">维达为游戏行业提供一系列解决方案，涵盖开发、运维、运营等领域和场景。针对不同类型的游戏提供灵活而稳定的部署方案。</p>
</div>
<div class="feature">
<i class="fab fa-youtube"></i>
<h4 class="feature-title">视频</h4>
<p class="feature-content">维达拥有覆盖全球的视频发布网络和音视频领域数十年的深厚技术积淀，提供直播、点播、云通信等产品，为视频应用提供一站式解决方案。</p>
</div>
<div class="feature">
<i class="fab fa-internet-explorer"></i>
<h4 class="feature-title">网站</h4>
<p class="feature-content">维达可为企业、政府和非营利性组织等提供一站式的网站服务。对任何网站，维达都可根据需求提供对应的网站服务，解决所有问题。</p>
</div>
<div class="feature">
<i class="fas fa-store"></i>
<h4 class="feature-title">电商</h4>
<p class="feature-content">维达为电商客户提供高效便捷、安全可靠的云服务产品，支持多种部署模式，可帮助企业快速搭建电商平台、完成资源的创建和配置。</p>
</div>
<div class="feature">
<i class="fas fa-file-invoice-dollar"></i>
<h4 class="feature-title">金融</h4>
<p class="feature-content">维达金融云解决方案，满足最严苛的设计要求，兼容传统金融业务架构，助您无负担快速迁云；个性化定制及灵活扩展，让您专注业务领域。</p>
</div>
<div class="feature">
<i class="fas fa-database"></i>
<h4 class="feature-title">大数据</h4>
<p class="feature-content">维达为客户提供完善的大数据处理平台和大数据分析服务。帮助客户对数据进行收集、存储、处理、分析和可视化，有效提高企业数据资产管理效率。</p>
</div>
</div>
</section>
<section id="showcases" class="showcases section-bg">
<h2 class="title1">成功案例</h2>
<div class="filter-btns">
<button class="filter-btn active" data-filter="*">全部</button>
<button class="filter-btn" data-filter=".web">web</button>
<button class="filter-btn" data-filter=".science">科研</button>
<button class="filter-btn" data-filter=".mobile">移动</button>
</div>
<div class="cases">
<div class="case-item web science">
<img src="images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
</div>
<div class="case-item web science">
<img src="images/photo-of-imac-near-macbook-1029757.jpg" alt="">
</div>
<div class="case-item web mobile">
<img src="images/apple-laptop-notebook-office-39284.jpg" alt="">
</div>
<div class="case-item web mobile">
<img src="images/apple-apple-device-design-desk-285814.jpg" alt="">
</div>
<div class="case-item mobile science">
<img src="images/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg" alt="">
</div>
<div class="case-item mobile science">
<img src="images/person-holding-a-smartphone-892757.jpg" alt="">
</div>
<div class="case-item web">
<img src="images/blur-close-up-code-computer-546819.jpg" alt="">
</div>
<div class="case-item mobile">
<img src="images/bokeh-photography-of-person-holding-turned-on-iphone-1440727.jpg" alt="">
</div>
</div>
</section>
<section id="service" class="service">
<h2 class="title1">资源与服务</h2>
<p class="intro">
维达云与云市场众多优秀第三方服务供应商合作，<br>
<br>
为您提供
<i>50+</i>
品类，超过
<i>6.7K+</i>
商品，以更多的选择满足不同的业务需求
</p>
<div class="services">
<div class="service-item">
<i class="fas fa-terminal"></i>
<h2 class="service-title">开发者中心</h2>
<p class="service-content">维达为开发者提供了一套完整的API和相关文档，方便开发者调用维达云资源。</p>
</div>
<div class="service-item">
<i class="fas fa-shield-alt"></i>
<h2 class="service-title">数据保障</h2>
<p class="service-content">维达非常重视客户的数据和基础设施的安全性，确保所有的产品和服务符合《通用数据保护条例》(GDPR)规定。</p>
</div>
<div class="service-item">
<i class="fas fa-sitemap"></i>
<h2 class="service-title">运维服务</h2>
<p class="service-content">运维服务是维达服务团队为客户提供了一系列专业服务产品，覆盖了业务的整个生命周期，保障了客户业务能够稳定运行。</p>
</div>
<div class="service-item">
<i class="fas fa-graduation-cap"></i>
<h2 class="service-title">培训课程</h2>
<p class="service-content">维达架构师带来的众多云产品的介绍和操作演示，帮助您学习和使用云产品。</p>
</div>
<div class="service-item">
<i class="fas fa-compass"></i>
<h2 class="service-title">备案服务</h2>
<p class="service-content">维达为您提供专业、高效、便捷的ICP网站备案服务</p>
</div>
<div class="service-item">
<i class="fas fa-school"></i>
<h2 class="service-title">专家服务</h2>
<p class="service-content">7*24技术支持，90s快速响应，一对一架构指导，伴随您业务发展的每一步。</p>
</div>
</div>
</section>
<section id="cmap" class="map">
<h2 class="title1">维达云基础设施</h2>
<p class="intro">
开放33个地理区域，拥有500多个加速节点，为更多企业提供强有力的技术支持，助力业务飞速拓展。
</p>
<img src="images/cmap.png" class="cmap">
</section>
<section id="data-section" class="data-section">
<div class="data-piece">
<i class="fas fa-user-secret"></i>
<div class="data-desc">抵御攻击</div>
<div class="num">477300288</div>
</div>
<div class="data-piece">
<i class="fas fa-satellite"></i>
<div class="data-desc">技术专利</div>
<div class="num">288</div>
</div>
<div class="data-piece">
<i class="fas fa-server"></i>
<div class="data-desc">服务器数</div>
<div class="num">4237429</div>
</div>
<div class="data-piece">
<i class="fas fa-user-tie"></i>
<div class="data-desc">开发者数</div>
<div class="num">1532145</div>
</div>
</section>
<section id="team-intro" class="team-intro section-bg">
<h2 class="title1">团队介绍</h2>
<div class="team-members">
<div class="team-member">
<div class="photo">
<img src="images/Palpatine.jpg" alt="">
</div>
<h4 class="name">Sheev Palpatine</h4>
<p class="position">CEO</p>
<ul class="social-links">
<li><a href="#"><li class="fab fa-weixin"></i></a></li>
<li><a href="#"><li class="fab fa-weibo"></i></a></li>
<li><a href="#"><li class="fab fa-github"></i></a></li>
<li><a href="#"><li class="fab fa-linkedin"></i></a></li>
</ul>
</div>
<div class="team-member">
<div class="photo">
<img src="images/vader.jpg" alt="">
</div>
<h4 class="name">Darth Vader</h4>
<p class="position">CTO</p>
<ul class="social-links">
<li><a href="#"><li class="fab fa-weixin"></i></a></li>
<li><a href="#"><li class="fab fa-weibo"></i></a></li>
<li><a href="#"><li class="fab fa-github"></i></a></li>
<li><a href="#"><li class="fab fa-linkedin"></i></a></li>
</ul>
</div>
<div class="team-member">
<div class="photo">
<img src="images/asuok.jpg" alt="">
</div>
<h4 class="name">Ahsoka Tano</h4>
<p class="position">CSO</p>
<ul class="social-links">
<li><a href="#"><li class="fab fa-weixin"></i></a></li>
<li><a href="#"><li class="fab fa-weibo"></i></a></li>
<li><a href="#"><li class="fab fa-github"></i></a></li>
<li><a href="#"><li class="fab fa-linkedin"></i></a></li>
</ul>
</div>
<div class="team-member">
<div class="photo">
<img src="images/pademei.jpg" alt="">
</div>
<h4 class="name">Padmé Amidala</h4>
<p class="position">CFO</p>
<ul class="social-links">
<li><a href="#"><li class="fab fa-weixin"></i></a></li>
<li><a href="#"><li class="fab fa-weibo"></i></a></li>
<li><a href="#"><li class="fab fa-github"></i></a></li>
<li><a href="#"><li class="fab fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<div class="footer-menus">
<div class="contact-us">
<p class="menu-title">联系我们</p>
<p>地址：科洛桑圣殿界区绝地圣殿</p>
<p>电话：+12334562345111</p>
<p>传真：+12334562345111</p>
<p>电子邮箱：[email protected]</p>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">服务概览</p>
<ul class="menu-items">
<li><a href="#">网站建设</a></li>
<li><a href="#">CES服务器</a></li>
<li><a href="#">云数据库</a></li>
<li><a href="#">AI智能</a></li>
</ul>
</div>
<div class="showcase-menu footer-menu">
<p class="menu-title">成功案例</p>
<ul class="menu-items">
<li><a href="#">Kamino</a></li>
<li><a href="#">Tatooine</a></li>
<li><a href="#">Naboo</a></li>
<li><a href="#">Coruscant</a></li>
</ul>
</div>
<div class="activity-menu footer-menu">
<p class="menu-title">公司动态</p>
<ul class="menu-items">
<li><a href="#">信息公开</a></li>
<li><a href="#">最近新闻</a></li>
<li><a href="#">最新博客</a></li>
</ul>
</div>
<div class="help-menu footer-menu">
<p class="menu-title">帮助与支持</p>
<ul class="menu-items">
<li><a href="#">支持中心</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">文档资源</a></li>
</ul>
</div>
<p class="icp-info">科洛桑备案11002000001号</p>
<p class="rights">
©Copyright 2020 维达科技 版权所有
</p>
<div class="scrollToTop">
<a href="#home"><i class="fas fa-chevron-up"></i></a>
</div>
</div>
</footer>
<script src="libs/anime/anime.min.js"></script>
<script src="libs/glide/glide.min.js"></script>
<script src="libs/isotope/isotope.pkgd.min.js"></script>
<script src="libs/smooth-scroll/smooth-scroll.polyfills.min.js"></script>
<script src="index.js"></script>
</body>
</html>