-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·715 lines (552 loc) · 28 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
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>钱柳轻轻，轻饮轻心</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/main.css">
<!-- script
================================================== -->
<script src="js/modernizr.js"></script>
<script src="js/pace.min.js"></script>
<!-- favicons
================================================== -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body id="top">
<!-- header
================================================== -->
<header class="s-header">
<div class="header-logo">
<a class="site-logo" href="index.html">
<img src="images/logo.png" alt="Homepage">
</a>
</div>
<nav class="header-nav">
<a href="#" class="header-nav__close" title="close"><span>Close</span></a>
<div class="header-nav__content">
<h3>Navigation</h3>
<ul class="header-nav__list">
<li class="current"><a class="smoothscroll" href="#home" title="home">首页</a></li>
<li><a class="smoothscroll" href="#about" title="about">关于我们</a></li>
<li><a class="smoothscroll" href="#services" title="services">产品服务</a></li>
<li><a class="smoothscroll" href="#works" title="works">近期工作</a></li>
<li><a class="smoothscroll" href="#clients" title="clients">项目进展</a></li>
<li><a class="smoothscroll" href="#contact" title="contact">联系我们</a></li>
</ul>
<p>中国药科大学钱柳轻轻项目组成立轻乾健康管理（南京）有限公司并统筹管理项目发展和规划，并由中国药科大学为项目组提供初期资金支持。</p>
</div> <!-- end header-nav__content -->
</nav> <!-- end header-nav -->
<a class="header-menu-toggle" href="#">
<span class="header-menu-text">Menu</span>
<span class="header-menu-icon"></span>
</a>
</header> <!-- end s-header -->
<!-- home
================================================== -->
<section id="home" class="s-home target-section" data-parallax="scroll" data-image-src="images/hero-bg.jpg"
data-natural-width=3000 data-natural-height=2000 data-position-y=center>
<div class="overlay"></div>
<div class="shadow-overlay"></div>
<div class="home-content">
<div class="row home-content__main">
<h3>欢迎来到钱柳轻轻！</h3>
<h1>
我们以真心与爱心 <br>
关注中国女性健康 <br>
融合科学塑身与药膳代餐美食 <br>
赋能新时代女性健康独立新风尚
</h1>
<div class="home-content__buttons">
<a href="#contact" class="smoothscroll btn btn--stroke">
申请内测
</a>
<a href="#about" class="smoothscroll btn btn--stroke">
关于我们
</a>
</div>
</div>
<div class="home-content__scroll">
<a href="#about" class="scroll-link smoothscroll">
<span>了解更多</span>
</a>
</div>
<div class="home-content__line"></div>
</div> <!-- end home-content -->
</section> <!-- end s-home -->
<!-- about
================================================== -->
<section id='about' class="s-about">
<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead subhead--dark">HELLO!</h3>
<h1 class="display-1 display-1--light">我们是钱柳轻轻团队</h1>
</div>
</div> <!-- end section-header -->
<div class="row about-desc" data-aos="fade-up">
<div class="col-full">
<p>
我们致力于开发一款针对年轻群体的一站式健康身材管理产品。线下推出以青钱柳提取物为中心成分的天然RTD（即饮）代餐饮料，线上开发一款智能健康身材管理小程序。线上线下相结合，为用户提供科学系统的塑身解决方案。
</p>
</div>
</div> <!-- end about-desc -->
<div class="row about-stats stats block-1-4 block-m-1-2 block-mob-full" data-aos="fade-up">
<div class="col-block stats__col ">
<div class="stats__count">1252</div>
<h5>售出数量</h5>
</div>
<div class="col-block stats__col">
<div class="stats__count">782</div>
<h5>好评数</h5>
</div>
<div class="col-block stats__col">
<div class="stats__count">18</div>
<h5>奖项</h5>
</div>
<div class="col-block stats__col">
<div class="stats__count">2925</div>
<h5>理念影响人数</h5>
</div>
</div> <!-- end about-stats -->
<div class="about__line"></div>
</section> <!-- end s-about -->
<!-- services
================================================== -->
<section id='services' class="s-services">
<div class="row section-header has-bottom-sep" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">What We Do</h3>
<h1 class="display-2">Qing 轻健康是一款为女性打造的一站式健康身材管理产品</h1>
<span>主要产品为“Qing 饮”和“Qing 心”</span>
</div>
</div> <!-- end section-header -->
<div class="row services-list block-1-2 block-tab-full">
<div class="col-block service-item" data-aos="fade-up">
<div class="service-icon">
<i class="icon-juice"></i>
</div>
<div class="service-text">
<h3 class="h2">Qing 饮</h3>
<p>以药食同源植物青钱柳为核心功能性成分并融合多种健康原料的一款功能性代餐饮料，具有调节代谢紊乱型肥胖、调整膳食等多种作用。
</p>
</div>
</div>
<div class="col-block service-item" data-aos="fade-up">
<div class="service-icon">
<i class="icon-group"></i>
</div>
<div class="service-text">
<h3 class="h2">Qing 心</h3>
<p>为了解决用户渴望塑身但自制力不够、光靠代餐容易厌弃、且单一方式见效慢等问题而打造的一款智能健康身材管理小程序，具有习惯养成辅助、热量管理、健康生活规划、社群互助等功能。
</p>
</div>
</div>
<div class="col-block service-item" data-aos="fade-up">
<div class="service-icon">
<i class="icon-lego-block"></i>
</div>
<div class="service-text">
<h3 class="h2">创新研发</h3>
<p>实验组依托中国药科大学天然药化重点实验室，致力于创新青钱柳叶片有效活性成分提取工艺，为Qing饮配方研发提供技术支持。实验组希望通过奋进和创新为每一个追求“健康与美”的新时代女性保驾护航。
</p>
</div>
</div>
<div class="col-block service-item" data-aos="fade-up">
<div class="service-icon">
<i class="icon-earth"></i>
</div>
<div class="service-text">
<h3 class="h2">软件开发</h3>
<p>依托中国药科大学药学院与理学院信息管理与信息系统专业，在项目中主要负责项目组官网和“Qing心”微信小程序的开发。该小程序是与实验组的产品相配套的线
上智能健康管理应用，主要包括食物热量计算、运动耗能计算、个性化健康计划以及社群等若干模块。“Qing心“将与我们的代餐饮料一起构成一套线上线下相互配合的女性身材管理解决方案。
</p>
</div>
</div>
<div class="col-block service-item" data-aos="fade-up">
<div class="service-icon">
<i class="icon-cube"></i>
</div>
<div class="service-text">
<h3 class="h2">美术设计</h3>
<p>媒体组负责IP形象绘制和维护；品牌LOGO的制作和修改；产品包装设计；商业答辩、路演、宣传等美编材料的制作；公司商业材料的美编与板式校对。致力于塑造钱柳轻轻品牌形象，展现团队奋进创新的风采。
</p>
</div>
</div>
<div class="col-block service-item" data-aos="fade-up">
<div class="service-icon"><i class="icon-megaphone"></i></div>
<div class="service-text">
<h3 class="h2">商业推广</h3>
<p>商业组在项目中主要负责市场调研、制定营销战略、建立完整的商业模式、负责公司的建立与整体运营、帮助实现产品商业落地、提供产品改进建议，同时负责项目组的各项文案工作。
</p>
</div>
</div>
</div> <!-- end services-list -->
</section> <!-- end s-services -->
<!-- works
================================================== -->
<section id='works' class="s-works">
<div class="intro-wrap">
<div class="row section-header has-bottom-sep light-sep" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">Recent Photos</h3>
<h1 class="display-2 display-2--light">我们的近照</h1>
</div>
</div> <!-- end section-header -->
</div> <!-- end intro-wrap -->
<div class="row works-content">
<div class="col-full masonry-wrap">
<div class="masonry">
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<div class="thumb-link" title="Shutterbug"
data-size="1050x700">
<img src="images/qlqq_img/debate.JPG"
alt="">
</div>
</div>
<div class="item-folio__text">
<h3 class="item-folio__title">
-- 钱柳轻轻项目组成员比赛现场 --
</h3>
<!--<p class="item-folio__cat">
Branding
</p>-->
</div>
<div class="item-folio__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde
dolorem corrupti neque nisi.</p>
</div>
</div>
</div> <!-- end masonry__brick -->
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<div class="thumb-link" title="Woodcraft"
data-size="1050x700">
<img src="images/qlqq_img/lab_1.jpg"
alt="">
</div>
</div>
<div class="item-folio__text">
<h3 class="item-folio__title">
-- 新实验大楼 --
</h3>
</div>
<div class="item-folio__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde
dolorem corrupti neque nisi.</p>
</div>
</div>
</div> <!-- end masonry__brick -->
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<div class="thumb-link"
title="The Beetle Car" data-size="1050x700">
<img src="images/qlqq_img/lab_2.jpg"
alt="">
</div>
</div>
<div class="item-folio__text">
<h3 class="item-folio__title">
-- 样品生产车间 --
</h3>
</div>
<div class="item-folio__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde
dolorem corrupti neque nisi.</p>
</div>
</div>
</div> <!-- end masonry__brick -->
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<div class="thumb-link" title="Grow Green"
data-size="1050x700">
<img src="images/qlqq_img/lizhu.jpg"
alt="">
</div>
</div>
<div class="item-folio__text">
<h3 class="item-folio__title">
-- 丽珠创业基金答辩现场 --
</h3>
</div>
<div class="item-folio__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde
dolorem corrupti neque nisi.</p>
</div>
</div>
</div> <!-- end masonry__brick -->
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<div class="thumb-link" title="Guitarist"
data-size="1050x700">
<img src="images/qlqq_img/meeting.JPG"
alt="">
</div>
</div>
<div class="item-folio__text">
<h3 class="item-folio__title">
-- 钱柳轻轻会议讨论现场 --
</h3>
</div>
<div class="item-folio__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde
dolorem corrupti neque nisi.</p>
</div>
</div>
</div> <!-- end masonry__brick -->
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<div class="thumb-link" title="Palmeira"
data-size="1050x700">
<img src="images/qlqq_img/products.JPG"
alt="">
</div>
</div>
<div class="item-folio__text">
<h3 class="item-folio__title">
-- Qing饮样品展示 --
</h3>
</div>
<div class="item-folio__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde
dolorem corrupti neque nisi.</p>
</div>
</div>
</div> <!-- end masonry__brick -->
</div> <!-- end masonry -->
</div> <!-- end col-full -->
</div> <!-- end works-content -->
</section> <!-- end s-works -->
<!-- clients
================================================== -->
<section id="clients" class="s-clients">
<div class="row section-header" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">Recent Progress</h3>
<h1 class="display-2">Qing 心与 Qing 饮正在校园和校友会中内部测试</h1>
</div>
</div> <!-- end section-header -->
<div class="row clients-testimonials" data-aos="fade-up">
<div class="col-full">
<div class="testimonials">
<div class="testimonials__slide">
<p>钱柳轻轻希望给足每一个女性追求健康与美的勇气和自信，
新时代女性价值观将在不远的未来因我们而隽永生辉。</p>
<img src="images/avatars/qqq.jpg" alt="Author image" class="testimonials__avatar">
<div class="testimonials__info">
<span class="testimonials__name">戚巧巧</span>
<span class="testimonials__pos">研发组，组长</span>
</div>
</div>
<div class="testimonials__slide">
<p>让传统文化与新时代文化对撞，
用火花推动新时代年轻女性健康发展。</p>
<img src="images/avatars/lhq.jpg" alt="Author image" class="testimonials__avatar">
<div class="testimonials__info">
<span class="testimonials__name">刘翯齐</span>
<span class="testimonials__pos">开发组，组长</span>
</div>
</div>
<div class="testimonials__slide">
<p>希望各位精诚团结赴一致，愿项目组辽阔高远！</p>
<img src="images/avatars/wzy.jpg" alt="Author image" class="testimonials__avatar">
<div class="testimonials__info">
<span class="testimonials__name">王作宇</span>
<span class="testimonials__pos">商业推广组，组长</span>
</div>
</div>
<div class="testimonials__slide">
<p>保持无限的勇气和激情，化蝶成路，阳光常伴，偶有风雨，心无阻，脚不停。
振奋精神扎实苦干，致力于帮助女性维护自尊、提高自信，消除生活不便。
</p>
<img src="images/avatars/xzj.png" alt="Author image" class="testimonials__avatar">
<div class="testimonials__info">
<span class="testimonials__name">邢芝郡</span>
<span class="testimonials__pos">媒体创意组，组长</span>
</div>
</div>
</div><!-- end testimonials -->
</div> <!-- end col-full -->
</div> <!-- end client-testimonials -->
</section> <!-- end s-clients -->
<!-- contact
================================================== -->
<section id="contact" class="s-contact">
<div class="overlay"></div>
<div class="contact__line"></div>
<div class="row section-header" data-aos="fade-up">
<div class="col-full">
<h3 class="subhead">Contact Us</h3>
<h1 class="display-2 display-2--light">联系我们吧！</h1>
</div>
</div>
<div class="row contact-content" data-aos="fade-up">
<div class="contact-primary">
<h3 class="h6">留个口信</h3>
<form name="contactForm" id="contactForm" method="post" action="" novalidate="novalidate">
<fieldset>
<div class="form-field">
<input name="contactName" type="text" id="contactName" placeholder="你的名字" value="" minlength="2"
required="" aria-required="true" class="full-width">
</div>
<div class="form-field">
<input name="contactEmail" type="email" id="contactEmail" placeholder="电子邮箱" value=""
required="" aria-required="true" class="full-width">
</div>
<div class="form-field">
<input name="contactSubject" type="text" id="contactSubject" placeholder="主题" value=""
class="full-width">
</div>
<div class="form-field">
<textarea name="contactMessage" id="contactMessage" placeholder="留言" rows="10" cols="50"
required="" aria-required="true" class="full-width"></textarea>
</div>
<div class="form-field">
<button class="full-width btn--primary">提交</button>
<div class="submit-loader">
<div class="text-loader">发送中...</div>
<div class="s-loader">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</div>
</fieldset>
</form>
<!-- contact-warning -->
<div class="message-warning">
哎呀，什么地方出错了，要不再试一遍吧
</div>
<!-- contact-success -->
<div class="message-success">
您的信息已成功发送，谢谢！<br>
</div>
</div> <!-- end contact-primary -->
<div class="contact-secondary">
<div class="contact-info">
<h3 class="h6 hide-on-fullwidth">联系信息</h3>
<div class="cinfo">
<h5>找到我们</h5>
<p>
中国 江苏省 南京市 江宁区<br>
龙眠大道639号 中国药科大学药学院 钱柳轻轻项目组
</p>
</div>
<div class="cinfo">
<h5>Email</h5>
<p>
<a href="mailto:[email protected]">[email protected]</a><br>
</p>
</div>
<div class="cinfo">
<h5>社交平台</h5>
<p>
钱柳轻轻官Q：1922929194<br>
</p>
</div>
</div> <!-- end contact-info -->
</div> <!-- end contact-secondary -->
</div> <!-- end contact-content -->
</section> <!-- end s-contact -->
<!-- footer
================================================== -->
<footer>
<div class="row footer-main">
<div class="col-six tab-full left footer-desc">
<div class="footer-logo"></div>
中国药科大学钱柳轻轻项目组成立轻乾健康管理（南京）有限公司并统筹管理项目发展和规划，由中国药科大学为项目组提供初期资金支持。
</div>
<div class="col-six tab-full right footer-subscribe">
<h4>温馨提示</h4>
<p>如果你因为商业合作等原因需要联系我们，你可以直接投递电子邮件到我们的官方邮箱 [email protected]。你还可以关注我们的官Q“钱柳轻轻官Q”来获悉我们近期的活动。</p>
</div>
</div> <!-- end footer-main -->
<div class="row footer-bottom">
<div class="col-twelve">
<div class="copyright">
<span>© Copyright by 轻乾健康管理（南京）有限公司 2022</span>
<span>ICP备案号： <a href="https://beian.miit.gov.cn/">苏ICP备2022030014号</a></span>
</div>
<div class="go-top">
<a class="smoothscroll" title="Back to Top" href="#top"><i class="icon-arrow-up" aria-hidden="true"></i></a>
</div>
</div>
</div> <!-- end footer-bottom -->
</footer> <!-- end footer -->
<!-- photoswipe background
================================================== -->
<div aria-hidden="true" class="pswp" role="dialog" tabindex="-1">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title=
"Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title=
"Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title=
"Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div> <!-- end photoSwipe background -->
<!-- preloader
================================================== -->
<div id="preloader">
<div id="loader">
<div class="line-scale-pulse-out">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<!-- Java Script
================================================== -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>