fzx-design.github.io/keyplus.html at master · fzx-design/fzx-design.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78702312-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-78702312-1');
</script>

    <meta charset="UTF-8">
    <title>Evan Feng - Gallery - Key Plus</title>
    <link rel="stylesheet" type="text/css" href="css/evan_style.css" >
    <link rel="stylesheet" type="text/css" href="css/keyplus_style.css" >
    <link rel="icon" type="image/png" href="favicon.png" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.parallax-scroll.js"></script>
</head>

<body>
<div class="nav_bar"></div>

<div class="story_header_img story_header_hidden">
  <div class="story_container">
    <div id="story_title_box">
      <div id="gallery_info_container">
        <div id="keyplus_icon" class="gallery_icon"></div>
        <div id="gallery_info_text_area">
          <h4 style="font-size: 24px; color: #838383">Gallery</h4>
          <h4>Key Plus</h4>
          <div id="story_title_year">2014</div>
        </div>
      </div>

      <h1>Award-winning smart car mobile platform<h1>
    </div>
  </div>
</div>

<div id="story_first" class="story_container story_first_hidden">
  <div id="keyplus_screenshots_container" class="gallery_screenshots_container" data-parallax='{"y": -80, "smoothness": 5}'>
    <div id="keyplus_s_1" class="gallery_screenshot"></div>
    <div id="keyplus_s_2" class="gallery_screenshot"></div>
    <div id="keyplus_s_3" class="gallery_screenshot"></div>
  </div>

  <div class="story_content_box">
    <p>Key Plus was built on the PSA CEA car open platform to enable users to program their cars easily on the smartphone. With one tap on the phone, the app will set up your car to the best status for you automatically. The idea and the demo application were awarded First Prize in PSA Car Easy Apps Global Challenge.</p>
  </div>
</div>

<img class="story_img_canvas" src="src/keyplus_patches.jpg" />

<div class="story_container">
  <div class="story_content_box">
    <div class="story_img_annotation">
      <div class="story_img_annotation_arrow"></div>
      <div class="story_img_annotation_text">A variety of action patches with user-friendly design is provided to enable fully user customization for scenarios. </div>
    </div>
  </div>

  <div id="footer_nav">
    <a href="bmw.html"><div id="footer_nav_pre">
      <h5 class="footer_nav_title" style="font-family:'SF Normal'">Previous Story</h5>
      <div id="footer_nav_pre_cell"  class="footer_nav_area">
        <div id="keyplus_footer_tn_pre" class="footer_nav_thumbnail"></div>
        <div id="footer_nav_pre_text" class="footer_nav_text">
          <div>BMW</div>
          <div style="font-family:'SF Normal'">Designing for Global Markets with Satellite Teams</div>
        </div>
      </div>
    </div></a>

    <a href="cdi.html"><div id="footer_nav_next">
      <h5 class="footer_nav_title" style="text-align: right; font-family:'SF Normal'">Next</h5>
      <div id="footer_nav_next_cell"  class="footer_nav_area">
        <div id="keyplus_footer_tn_next" class="footer_nav_thumbnail"></div>
        <div id="footer_nav_next_text" class="footer_nav_text">
          <div>Gallery： CDI Soul</div>
          <div style="font-family:'SF Normal'">Experimenting sustainable smart space design</h4>
        </div>
      </div>
      </div>
    </div></a>
  </div>
</div>

<div id="footer"></div>

<script src="js/story.js"></script>
</body>
</html>