-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
450 lines (439 loc) · 18.1 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
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轻松打造成长儿童房_设计狮爸爸</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="images/title.ico"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.min.css">
<link rel="stylesheet" href="css/header.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
</head>
<body style="opacity:0">
<header>
<div class="navbar-fixed-top" id="lthead" style="width: 100%;background-color: white;">
<div class="container bg_color">
<div class="col-md-12 col-sm-12">
<nav class="navbar-default" id="ltnav" style="height: 0px;padding-top:30px;background-color: white;">
<div class="container-fluid">
<!-- 适应后nav按钮 -->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#homenav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#"><img src="images/title.png"></a>
</div>
<!-- 适应后按钮指向的nav -->
<div id="homenav" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" id="ul_nav" style="background-color: white;">
<li class="act" id="li_nav" style="height:40px;">
<a class="nav-a" >首页</a>
</li>
<li>
<a href="Suite_design-first_page.html" class="nav-a" ><span>套房方案</span></a>
</li>
<li>
<a href="enhancement package.html" class="nav-a" ><span>配套增强包</span></a>
</li>
<li>
<a href="Brand_introduction.html" class="nav-a" ><span>品牌介绍</span></a>
</li>
<li>
<a href="custom_design.html" class="nav-a"><span>定制设计</span></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
<!-- 大图轮播区域 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/banner01.jpg" id="img-1">
<div class="gray-bg"></div>
<div class="slide_text">
<em class="wow" data-wow-delay="1s">如何帮助简历独立自主的意识？</em>
<h1 class="wow" data-wow-delay="1s">科学解决方案这里有</h1>
<h4 class="wow" data-wow-delay="1s">如何在陌生的空间里获得安全感和自信？如何在独处时保障最基本的人生安全？</h4>
</div>
</div>
<div class="swiper-slide"><img src="images/banner02.jpg" id="img-2">
<div class="gray-bg"></div>
<div class="slide_text">
<em class="wow " data-wow-delay="1s">房型再小也绝不“委屈”孩子</em>
<h1 class="wow" data-wow-delay="1s">4㎡+成长型儿童房</h1>
<h4 class="wow " data-wow-delay="1s">生二孩没空间、老人来要安排、刚分房要照顾、读书缺乏专注力</h4>
</div>
</div>
<div class="swiper-slide"><img src="images/banner03.jpg" id="img-3">
<div class="gray-bg"></div>
<div class="slide_text">
<em class="wow" data-wow-delay="1s">29项安全健康标准</em>
<h1 class="wow" data-wow-delay="1s">360式教育启蒙魔法</h1>
<h4 class="wow" data-wow-delay="1s">专注力读书角、安全感山洞、创造力氛围、益智逻辑角、户外游戏空间、科学教育角</h4>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- 正文text文本部分 -->
<div class="container">
<div class="center_text wow animated bounceInDown">
<em>由跨界设计师、儿童心理学家、医学专家共同组成</em>
<h2>致力于打造高标准儿童房</h2>
<h2 class="text_safe">让孩子安全地探险</h2>
</div>
</div>
<!-- 中文图像 -->
<div class="container center_img wow animated bounceInUp">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col xs-12">
<img src="images/explore.jpg" alt="探险房.jpg" width="100%">
</div>
</div>
</div>
<!-- 4*1图像排列 -->
<div class="row arrange_img wow animated bounceInLeft">
<div class="col-md-3 col-sm-6 col-xs-12 div_animate">
<img src="images/arrange-1.jpg" alt="一招解决学位房烦恼">
<div class="arrange_animale">
<p class="h4">一招解决<br>学位房<br>烦恼</p>
</div>
<div class="h4"><a href="">4㎡易整理舒适<br>公主房</a></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 div_animate">
<img src="images/arrange-2.jpg" alt="给她一个独立天地">
<div class="arrange_animale">
<p class="h4">给她<br>一个<br>独立天地</p>
</div>
<div class="h4"><a href="#">6㎡安全培养型<br>女孩房</a></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 div_animate">
<img src="images/arrange-3.jpg" alt="勇气与自信的城堡">
<div class="arrange_animale">
<p class="h4">勇气<br>与自信<br>的城堡</p>
</div>
<div class="h4"><a href="#">8㎡陪睡收纳型<br>男孩房</a></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 div_animate">
<img src="images/arrange-4.jpg" alt="二孩升级魔法">
<div class="arrange_animale">
<p class="h4">二孩<br>升级<br>魔法</p>
</div>
<div class="h4 an"><a href="#">8㎡独立培养型<br>二孩房</a></div>
</div>
</div>
<!-- 下文text部分 -->
<div class="container wow animated bounceInRight">
<div class="center_text">
<em>专业定制设计，无忧整装到家，24小时入住</em>
<h2>四步轻松打造成长儿童房</h2>
</div>
</div>
<!-- 选择套房方案 -->
<div class="container">
<div class="row center_text wow animated bounceInLeft">
<div class="col-md-3 col-sm-6 border">
<img src="images/icon01_h.png" alt="套房方案">
<h4>1、选择套房方案</h4>
<em>国际顶级设计师，从不同年龄的儿童生活路径、心智成长需求、启蒙个性发展为出发，结合色彩心理学，提供整体儿童房解决方案</em>
</div>
<div class="col-md-3 col-sm-6 border">
<img src="images/icon02_h.png" alt="定制设计">
<h4>2、免费微定制设计</h4>
<em>客户把实际户型图提供给平台设计顾问，专人进行一对一微定制设计服务，3天内拿到设计图</em>
</div>
<div class="col-md-3 col-sm-6 border">
<img src="images/icn03_h.png" alt="上门服务">
<h4>3、约定上门服务时间</h4>
<em>设计顾问给出套房整包交期，客户根据自己方便，和设计顾问约定上门整装时间</em>
</div>
<div class="col-md-3 col-sm-6 border">
<img src="images/icon04_h.png" alt="上门包装">
<h4>4、整包上门安装</h4>
<em>平台整装团队“包师傅”于约定时间整包送货上门进行整装，3天内完成全房布装；“干净一加一”承诺保证干净整洁完工</em>
</div>
</div>
</div>
<!-- 立即报名 -->
<div class="apply-up wow animated slideDown">
<div class="gary_color">
<div class="container">
<div class="apply-up-div">
<h4>我们正在寻找：1、生活美学鉴赏型爸妈；2、设计师爸妈；3、火眼金睛话唠型爸妈</h4>
<h4>第一时间获得新品试用资格，还能获得额外的优惠哦</h4>
<h1>邀你一起测试、选品，打造高标准儿童房</h1>
<div class="btn">立即报名</div>
<br><br><br>
</div>
</div>
</div>
</div>
<!-- 正文text文本部分 -->
<div class="container">
<div class="center_text">
<div class="wow animated bounceInRight">
<em>全球流行主题搭配，独立心智培养</em>
<h2>配套增强包</h2>
<h2 class="text_safe">满足不同家庭需求，支持不同个性孩子</h2>
</div>
<div class="wow animated bounceInLeft">
<div class="btn btn_a ba1" id="b1">全部</div>
<div class="btn btn_left a2" id="b2">兴趣培育包</div>
<div class="btn btn_left a3" id="b3">心智培育包</div>
<div class="btn btn_left a4" id="b4">基本功能包</div>
<div class="btn btn_left a5" id="b5">氛围搭配宝</div>
</div>
</div>
</div>
<!-- 增强包图片区 4-->
<div class="row strong wow animated bounceInUp">
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-1">
<img src="images/strong01.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">无忧健康的沉睡天使</a></h4>
<h5>睡眠包</h5>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-2">
<img src="images/strong02.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">色彩主题是最直接的心理暗示</a></h4>
<h5>睡眠氛围包</h6>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-3">
<img src="images/strong03.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">儿童房的整洁魔法</a></h4>
<h5>收纳包</h5>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-4">
<img src="images/strong04.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">学习好靠的是专注力</a></h4>
<h5>学习包</h5>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-5">
<img src="images/strong05.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">陪伴一生的优雅习惯</a></h4>
<h5>阅读包</h5>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-6">
<img src="images/strong06.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">朋友一般的亲密关系</a></h4>
<h5>亲子包</h5>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-7">
<img src="images/strong07.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">不让镜片纠缠孩子终生</a></h4>
<h5>护眼照明包</h5>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-8">
<img src="images/strong08.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">自信来源于小时候的充足安全感</a></h4>
<h5>安全感培养包</h5>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-9">
<img src="images/strong09.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">为他开启一扇灵感之门</a></h4>
<h5>创造力培养包</h5>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-10">
<img src="images/strong10.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">小贝多芬的发掘路径</a></h4>
<h5>音乐才艺培育包</h5>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-11">
<img src="images/strong11.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">西方最重视的教育</a></h4>
<h5>财商培育包</h5>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 strong_animate" id="sh-12">
<img src="images/strong12.jpg">
<div class="strong_border"></div>
<div class="strong_div">
<h4><a href="#">3岁开始逻辑认知敏感期</a></h4>
<h5>益智逻辑培育包</h5>
</div>
</div>
</div>
<!-- 29设计标准 -->
<div class="wow animated slideDown">
<div class="gary_color">
<div class="container designer_29">
<h1>29</h1>
<em>设计标准</em>
</div>
</div>
</div>
<!-- 设计师的话 -->
<div class="container">
<div class="center_text wow animated bounceInRight">
<em>最新设计师作品巡礼</em>
<h2>设计师的话</h2>
</div>
</div>
<!-- 空间魔法 -->
<div class="container div_re">
<div class="row designer_talk wow animated bounceInLeft">
<div class="col-lg-4 col-md-4" >
<div class="amazing_animate">
<img src="images/designer01.jpg" alt="">
<div class="amazing_border"></div>
<h4>4㎡空间魔法</h4>
<div class="amazing_bottom">
<img src="images/people01.png" alt=""><br>
<em class="p-display">当我低下身尝试从孩子的角度看世界才发现</em>
<h4>孩子的世界不止二维，从高度上延展</h4>
<p>就能让孩子拥有更大的成长空间</p>
<p class="p-display">4㎡=2m³睡眠+1m³收纳+1.5m³学习+1m³阅读与亲子+3m³活动+10成长留白+4㎡创意</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="amazing_animate">
<img src="images/designer02.jpg" alt="">
<div class="amazing_border"></div>
<h4>棉花糖的温柔</h4>
<div class="amazing_bottom">
<img src="images/people03.png" alt=""><br>
<em class="p-display">粉色在视觉上传达的是可爱与温馨</em>
<h4>粉嫩而梦幻的色系空气感十足充满了棉花糖般的温柔</h4>
<p>明亮而跳跃的黄色和蓝色点缀更是可以刺激儿童视觉神经</p>
<p class="p-display">明亮的色系可以让内向的儿童变的更活泼开朗渴望交流</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="amazing_animate">
<img src="images/designer03.jpg" alt=""><br>
<div class="amazing_border"></div>
<h4>男孩空间动线</h4>
<div class="amazing_bottom">
<img src="images/people02.png" alt=""><br>
<em class="p-display">房间划分为四大区域，学习、阅读、睡眠、活动有效区隔</em>
<h4>培养专注力的同时，也留有足够的活动空间</h4>
<p>中部的娱乐区域形成一个足够发挥创造力的空间</p>
<p class="p-display">避免了因为阻碍物过多而导致的受伤和意外</p>
</div>
</div>
</div>
</div>
</div>
<!-- 尾部 -->
<!-- 广告点击切换 -->
<div class="change">
<div class="container">
<div class="col-md-12">
<div class="swiper-containers">
<div class="swiper-wrapper">
<div class="swiper-slide wow fadeIn" id="qiehuan" style="margin-left: 3%;">
<img src="images/bottom1.png" style="width: 200px;height: 100px;"></div>
<div class="swiper-slide wow fadeIn">
<img src="images/bottom2.png" style="width: 200px;height: 100px;"></div>
<div class="swiper-slide wow fadeIn">
<img src="images/bottom3.png" style="width: 200px;height: 100px;"></div>
<div class="swiper-slide wow fadeIn">
<img src="images/bottom4.png" style="width: 200px;height: 100px;"></div>
<div class="swiper-slide wow fadeIn">
<img src="images/bottom5.png" style="width: 200px;height: 100px;"></div>
<div class="swiper-slide wow fadeIn">
<img src="images/bottom6.png" style="width: 200px;height: 100px;"></div>
<div class="swiper-slide wow fadeIn">
<img src="images/bottom7.png" style="width: 200px;height: 100px;"></div>
<div class="swiper-slide wow fadeIn">
<img src="images/bottom8.png" style="width: 200px;height: 100px;"></div>
<div class="swiper-slide wow fadeIn">
<img src="images/bottom9.png" style="width: 200px;height: 100px;"></div>
<div class="swiper-slide wow fadeIn">
<img src="images/bottom10.png" style="width: 200px;height: 100px;"></div>
</div>
<!--切换的按钮-->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="col-md-3 col-sm-6 wow animated slideInLeft" id="foot1" style="margin-top:40px;">
<h2>设计狮爸爸成长实验室</h2>
<p>广州市·祈福新村A区五街63号</p>
<p>预约体验电话：020-31146031</p>
</div>
<div class="col-md-3 col-sm-6 wow animated slideInUp" id="foot2">
<h5>定制设计·购买咨询请戳</h5>
<p>设计顾问羊丫（微信：yangbingling2462）</p>
<p>设计师爸爸公众号（微信：kidshomepapa）</p>
</div>
<div class="col-md-3 col-sm-6 wow animated slideInUp" id="foot3">
<h5>斯格伦室内装饰工程有限公司</h5>
<button >首页</button>
<button href="Suite_design-first_page.html">套房方案</button>
<button href="enhancement package.html">配套增强包</button>
<button href="Brand_introduction.html">品牌介绍</button>
<button href="custom_design.html">定制设计</button>
</div>
<div class="col-md-3 col-sm-6 wow slideInDown" id="foot4">
<h5>关于我们</h5>
<p>［设计狮爸爸］是由跨界设计师、儿童心理学家、医学专家、工程师共同打造的儿童房解决方案平台。<br>我们专业针对3-10岁学龄前后儿童打造［模块化儿童套房］，集聚全球优秀儿童房理念，与资深设计师团队联合创造兼具专业与时尚美学的儿童房空间方案。<br></p>
</div>
<div class="col-md-12 col-sm-4" id="foot5">
<p><span class="cloud">| 云服务：
<a href="http://www.h5site.cn/" target="_blank">H5建站云</a>
</span></p>
</div>
</div>
</footer>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/btn-animate.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.min.js"></script>
<script type="text/javascript">
setTimeout(function () {
document.body.style.opacity = "1";
},100);
</script>
</body>
</html>