Website/index.html at master · iOS10-KIT/Website · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    <meta name="description" content="Apple's iOS 10 UI elements in Sketch">
    <meta name="abstract" content="Apple's iOS 10 UI elements in Sketch">
    <meta name="subject" content="iOS design">
    <meta name="summary" content="">
    <meta name="url" content="https://puzzles.design">
    <meta name="distribution" content="Global">
    <meta name="rating" content="General">
    <meta property="og:title" content="iOS 10 UI" />
    <meta property="og:description" content="The Open Source iOS 10 UI Kit to empower your designs." />
    <meta property="og:image" content="http://puzzles.design/resources/cover_II.jpeg" />
    <meta property="og:image:secure_url" content="http://puzzles.design/resources/cover_II.jpeg" />
    <meta property="og:url" content="http://puzzles.design" />

    <title>Puzzles - iOS 10</title>
    <link rel="stylesheet" type="text/css" href="static/style.css">
    <link rel="icon" href="resources/favicon.ico">
    <script type="text/javascript" src="static/app.js"></script>
  </head>
  <body>
    <header id="hero-header"></header>
    <div id="hero-explanation">
      <h1 id="hero-title">iOS&nbsp;10&nbsp;UI</h1>
      <div class="separator"></div>
      <h4 id="hero-description">iOS 10 is here, and we would
        like to present you the ultimate kit for it. Get screens, apps, icons,
        effects and much more from the new delightfully designed operating
        system&nbsp;by&nbsp;Apple.</h4>
      <div id="hero-button-container">
        <a id="download-button"
        href="https://github.com/iOS10-KIT/UI/archive/master.zip"
        download="iOS 10 UI Kit.zip">
          <button class="button" id="download-button">Download</button></a>
        <p class="general-text" id="last-updated"><u><a id="last-updated-link" href="https://github.com/iOS10-KIT/UI" target="_blank">Updated</a></u> 03/07/2016</p>
      </div>
    </div>
    <div id="parallax-wrapper"></div>
    <div id="key-points-table">
      <div>
        <img class="key-point-images" src="resources/icons/symbols_2x.png" />
        <p class="key-point-explanations"><b>Symbols.</b> Every new UI element
          uses Sketch's Symbols for easy customisation and re-use.</p>
      </div>

      <div>
        <img class="key-point-images" src="resources/icons/ui_2x.png" />
        <p class="key-point-explanations"><b>All-new UI.</b> Designed pixel-perfect
          to an exhausting amount of detail.</p>
      </div>

      <div>
        <img class="key-point-images" src="resources/icons/templates_2x.png" />
        <p class="key-point-explanations"><b>Templates.</b> Start designing for
          iOS 10 with the all-new widgets and notifications templates.</p>
      </div>

      <div>
        <img class="key-point-images" src="resources/icons/open_source_2x.png" />
        <p class="key-point-explanations"><b>Open source.</b> Make tweaks and contribute on <a href="https://github.com/iOS10-KIT/UI">GitHub!</a> Let's make this the standard iOS UI kit.</p>
      </div>

      <div>
        <img class="key-point-images" src="resources/icons/updates_2x.png" />
        <p class="key-point-explanations"><b>Updates.</b> Keep the kit up-to-date
          as soon as new UI changes appear in iOS 10.</p>
      </div>

      <div>
        <img class="key-point-images" src="resources/icons/vectorized_2x.png" />
        <p class="key-point-explanations"><b>Vectorized.</b> Of course, everything
          in the kit is cleanly scalable and resizeable.</p>
      </div>
    </div>
    <footer>
      <div id="footer-wrapper">
        <img class="footer-images" id="footer-image-left"
        src="resources/music_screen.png" />
        <img class="footer-images" id="footer-image-right"
        src="resources/health_screen.png" />

        <div id="credit-container">
          <table id="share-table">
            <tr>
              <td><a href="https://plus.google.com/share?url=https://puzzles.design" target="_blank">
                <img class="share-images" src="resources/google_share.png" /></a></td>
              <td>
              <a href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fpuzzles.design%2F&ref_src=twsrc%5Etfw&text=Enjoying%20the%20iOS%2010%20UI%20Kit!&tw_p=tweetbutton&url=https%3A%2F%2Fpuzzles.design" target="_blank">
                <img class="share-images" src="resources/twitter_share.png" />
              </a></td>
              <td><a href="https://github.com/iOS10-KIT/UI" target="_blank">
                <img class="share-images" src="resources/github_share.png" /></a></td>
              <td><a href="http://www.facebook.com/share.php?u=https://puzzles.design" target="_blank">
                <img class="share-images" src="resources/facebook_share.png" /></a></td>
            </tr>
          </table>
          <h3>Brought to you by <a href="https://twitter.com/cjmlgrto" target="_blank">Carlos</a>
             &amp; <a href="https://twitter.com/RamonGilabert" target="_blank">Ramon</a></h3>
        </div>
      </div>
    </footer>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-79512990-1', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
</html>