forked from 9ColorDeer/9colordeer.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
376 lines (359 loc) · 16 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
368
369
370
371
372
373
374
375
376
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="深圳市九色鹿文化传媒有限公司" />
<meta name="author" content="Dengju Deng, Xiaoli Zhu" />
<meta name="generator" content="github page" />
<title>深圳市九色鹿文化传媒有限公司</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="./css/index.css?d=20190608" />
<style>
.portfolio-box{ cursor: default }
.project-category{ width: 50%; display: none }
#mainNav2{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
}
.hover\:shadow:hover {
-webkit-box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<nav class="navbar navbar-expand-lg navbar-dark" id="mainNav2">
<div class="container-fluid">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<img src="./img/logo.png" style="width: 150px" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#showcase">
经典案例
</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#aboutus">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#services">
服务范围
</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#workflow">
服务流程
</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">联系我们</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
cn <img style="width: 16px" src="https://lipis.github.io/flag-icon-css/flags/4x3/cn.svg" alt="简体中文">
<!-- <img style="width: 20px" src="https://lipis.github.io/flag-icon-css/flags/4x3/hk.svg" alt="繁體中文">
<img style="width: 20px" src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" alt="English"> -->
</a>
<!-- Here's the magic. Add the .animate and .slide-in classes to your .dropdown-menu and you're all set! -->
<div class="dropdown-menu dropdown-menu-right animate slideIn shadow border-0"
aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">
简体中文
</a>
<a class="dropdown-item" href="#">
繁體中文
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
English
</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- 着陆页 -->
<header id="about">
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://jiuselu-1257697918.cos.ap-guangzhou.myqcloud.com/%E6%96%B0%E5%A2%9E%E8%A7%86%E9%A2%91/%E6%8B%8D%E6%91%84%E8%8A%B1%E7%B5%AE%E5%89%AA%E8%BE%91-%E4%B9%9D%E8%89%B2%E9%B9%BF%E4%BC%A0%E5%AA%92.mp4" />
</video>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://jiuselu-1257697918.cos.ap-guangzhou.myqcloud.com/%E6%96%B0%E5%A2%9E%E8%A7%86%E9%A2%91/%E8%B0%AD%E6%9D%BE%E9%9F%B5X%E5%A5%BD%E9%BA%A6%E5%A4%9A1%E5%88%86%E9%92%9F%E6%AD%A3%E7%89%87%E6%9C%80%E7%BB%88%E8%BE%93%E5%87%BA1101final" />
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-8 text-white"><span class="ColorDeer">深圳市九色鹿文化传媒有限公司</span></h1>
<blockquote class="blockquote">
<p class="lead mb-0">
为企业提供专业的影视广告创意传播方案及制作服务，助力企业品牌升级！
</p>
</blockquote>
</div>
</div>
</div>
</header>
<!-- 关于我们 -->
<section id="aboutus">
<div class="container">
<!-- 标题 -->
<div class="pricing-header px-3 py-3 p-md-5 mx-auto text-center">
<h1 class="display-5"><span class="ColorDeer">#关于我们</span></h1>
<p class="lead">
您的每一份诉求，我们都会倾力而为，为您打造一流的企业品牌视频！
</p>
</div>
<!-- 公司介绍 -->
<div class="row">
<div class="col-md-12">
<div class="card p-5 border-0">
<blockquote class="blockquote mb-0 card-body">
<p class="font-weight-bolder">
深圳市九色鹿文化传媒有限公司 ，简称「九色鹿传媒」
</p>
<p class="font-weight-light">
九色鹿传媒创立于经济特区深圳，集结了一批实干有梦想有追求的精英团队，我们
长期服务于华为、网易、荣耀、TCL、电信等品牌企业，为企业提供专业的影视广告
创意方案及拍摄制作服务，我们始终以客户诉求为出发点，将客户的最初诉求
打造为极具创意和营收价值的影片，帮助客户抢占和巩固品牌领导者的位置。
</p>
</blockquote>
</div>
</div>
</div>
</div>
</section>
<!-- 经典案例 -->
<section id="showcase">
<div class="container">
<!-- 标题 -->
<div class="pricing-header px-3 py-3 p-md-5 mx-auto text-center">
<h1 class="display-5"><span class="ColorDeer">#经典案例</span></h1>
<p class="lead">
</p>
</div>
<!-- 正文 -->
<div id="showcase_block" class="row">
<!-- 动态渲染 -->
</div>
</div>
</section>
<!-- 服务范围 -->
<section id="services">
<!-- 标题 -->
<div class="pricing-header px-3 py-3 p-md-5 mx-auto text-center">
<h1 class="display-5"><span class="ColorDeer">#服务范围</span></h1>
<p class="lead">
我们的服务主要包括产品宣传片、企业宣传片、TVC广告、抖音短视频、
MG动画、微电影、活动大会视频。
</p>
</div>
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="#services">
<img class="img-fluid shadow"
src="https://jiuselu-1257697918.cos-website.ap-guangzhou.myqcloud.com/9ColorDeer/services/1.png" alt="" />
<div class="portfolio-box-caption">
<div class="project-name">
产品宣传片
</div>
<div class="project-category text-white-50">
产品宣传片主要展现产品的结构、功能、卖点等方面，画面上可以采用单独产品展示（实拍或结合MG动画、三维）、人物场景应用画面等突出产品的卖点和品牌价值。
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="#services">
<img class="img-fluid"
src="https://jiuselu-1257697918.cos-website.ap-guangzhou.myqcloud.com/9ColorDeer/services/2.png" alt="" />
<div class="portfolio-box-caption">
<div class="project-name">
企业宣传片
</div>
<div class="project-category text-white-50">
一部好的企业宣传片相当于上千个好的推销员，给公司起到好的一目了然的营销推广品牌效应。
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="#services">
<img class="img-fluid"
src="https://jiuselu-1257697918.cos-website.ap-guangzhou.myqcloud.com/9ColorDeer/services/3.png" alt="" />
<div class="portfolio-box-caption">
<div class="project-name">
TVC 广告
</div>
<div class="project-category text-white-50">
广告片简短精悍，方便电视/网络平台投放。通常在 15S 到 60S 的时长内，以一定的故事情节或者人物代言的方式突出产品核心卖点，达到快速营销的目的。
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="#services">
<img class="img-fluid"
src="https://jiuselu-1257697918.cos-website.ap-guangzhou.myqcloud.com/9ColorDeer/services/4.png" alt="" />
<div class="portfolio-box-caption">
<div class="project-name">
二维/三维动画
</div>
<div class="project-category text-white-50">
当实拍画面难以实现抽象概念的时候，可以采用二维或三维动画来展示。大部分应用于解决方案视频，产品 360 度材质展示视频。
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="#services">
<img class="img-fluid"
src="https://jiuselu-1257697918.cos-website.ap-guangzhou.myqcloud.com/9ColorDeer/services/5.jpg" alt="" />
<div class="portfolio-box-caption">
<div class="project-name">
微电影
</div>
<div class="project-category text-white-50">
企业推广、产品推广、城市推广等都可以使用微电影的形式，微电影可以通过一定的故事情节，人物设定，植入公司信息/产品信息达到软营销的目的。可以是企业微电影、产品微电影，人物微电影，故事微电影。
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="#services">
<img class="img-fluid"
src="https://jiuselu-1257697918.cos-website.ap-guangzhou.myqcloud.com/9ColorDeer/services/6.jpg" alt="" />
<div class="portfolio-box-caption p-3">
<div class="project-name">
活动大会视频
</div>
<div class="project-category text-white-50">
包括大会开场视频，活动花絮视频等。
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- 工作流程 -->
<section id="workflow">
<!-- 标题 -->
<div class="pricing-header px-3 py-3 p-md-5 mx-auto text-center">
<h1 class="display-5"><span class="ColorDeer">#服务流程</span></h1>
<p class="lead">
从需求整理，精准报价，视频制作，到项目交付我们始终以客户为中心。
</p>
<!-- <p class="lead">
规范化的服务流程，更加有助于您跟踪了解每一步环节，确保准确高效地实现您的需求。
</p> -->
</div>
<div class="container">
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="pricing">
<!-- 标题 -->
<div class="pricing-header px-3 py-3 p-md-5 mx-auto text-center">
<h1 class="display-5"><span class="ColorDeer">#联系我们</span></h1>
<p class="lead">
如有需求，我们随时欢迎您的咨询，并为您量身定制解决方案。
<p class="lead">
联系电话：13699794602 13802829492
</p>
</div>
<div class="container">
</div>
</section>
<!-- 底部版权 -->
<footer class="footer pt-4 pt-md-5 pb-md-5 border-top">
<div class="container">
<div class="row">
<div class="col-12 col-md">
<img class="mb-1" src="./img/logo.png" alt="" width="54" height="24" />
<small class="d-block mb-3 text-muted">© 2018-2021</small>
</div>
<div class="col-6 col-md">
<h5 class="text-white">九色鹿传媒</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">关于我们</a></li>
<li><a class="text-muted" href="#">项目案例</a></li>
<li><a class="text-muted" href="#">服务范围</a></li>
<li><a class="text-muted" href="#">服务流程</a></li>
<li><a class="text-muted" href="#">联系我们</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5 class="text-white">友情链接</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5 class="text-white">商务合作</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">电话：13699794602 13802829492</a></li>
<li><a class="text-muted" href="#">微信：13699794602</a></li>
<li><a class="text-muted" href="#">深圳市龙岗区万科第五园梧桐坊D202</a></li>
</ul>
</div>
<div class="col-12 col-md-12">
<p class="text-muted text-center">深圳市九色鹿文化传媒有限公司 @2021 版权所有</p>
</div>
<a class="col-12 col-md-12 text-muted text-center" href="https://ythzxfw.miit.gov.cn/index">粤ICP备19064721号</a>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="./js/scrolling-nav.js"></script>
<script src="./js/meiqia.js"></script>
<script>
$.getJSON('./datas/showcase_zxl.json', function (datas) {
document.getElementById('showcase_block').innerHTML = datas.map(function (item, index) {
return `<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 hover:shadow">
<a data-fancybox href="${item.video}" class="text-decoration-none">
<img
src="${item.post}"
class="card-img-top"
alt="${item.name}"
/>
<div class="card-body text-center">
<div class="card-text text-black-50 text-truncate">${item.name}</div>
</div>
</a>
</div>
</div>`
}).reduce(function (p, v) { return p + v; });
// 防止鼠标右键下载视频
$('video').bind('contextmenu', function() { return false; });
})
// 鼠标经过显示隐藏
$('.portfolio-box').on('mouseover', function(e) {
$('.project-category').hide();
$(this).find('.project-category').show();
})
</script>
</body>
</html>