-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
231 lines (213 loc) · 11.4 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Tiny Matter Studio">
<meta name="keywords" content="Tiny Matter Studio,Tiny Matter">
<meta name="description" content="Tiny Matter is a London-based digital design and development team creating awesome digital products for web and mobile.">
<title>Tiny Matter – An award-winning digital product studio</title>
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/manifest.json">
<link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon/favicon.ico" type="image/x-icon">
<meta name="msapplication-TileColor" content="#2F3B40">
<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#2F3B40">
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<nav data-0="background-color:rgba(47,59,64,0); padding: 30px 50px;" data-300="background-color:rgba(47,59,64,1); padding: 15px 50px;">
<a href="/"><img src="/img/logo.svg" /></a>
<ul>
<li class="">
<a href="/about">About</a>
</li>
<li class="">
<a href="/case-studies">Work</a>
</li>
<li class="">
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
<section class="hero short">
<div class="container">
<div class="center">
<h1 data-0="opacity:1; top:0vh;" data-top="opacity:0; top:15vh;">We work with you to create elegant digital solutions from brilliant ideas.</h1>
</div>
<video playsinline autoplay muted loop poster="/img/hero-poster.jpg" id="bgvideo">
<source src="/video/hero-showcase.webm" type="video/webm">
<source src="/video/hero-showcase.mp4" type="video/mp4">
</video>
</div>
<a href="#target" class="button-box scroll-down">
<svg class="arrow pulse" xmlns="http://www.w3.org/2000/svg" width="28" height="33" viewBox="0 0 28 33">
<path fill="rgba(245,49,112,1)" fill-rule="evenodd" d="M63.0502525,590.292893 L70.9497475,582.393398 C71.7307961,581.61235 72.997126,581.61235 73.7781746,582.393398 C74.5592232,583.174447 74.5592232,584.440777 73.7781746,585.221825 L62.4644661,596.535534 C61.6834175,597.316582 60.4170876,597.316582 59.636039,596.535534 L48.3223305,585.221825 C47.5412819,584.440777 47.5412819,583.174447 48.3223305,582.393398 C49.1033791,581.61235 50.369709,581.61235 51.1507576,582.393398 L59.0502525,590.292893 L59.0502525,566.979185 C59.0502525,565.874615 59.945683,564.979185 61.0502525,564.979185 C62.154822,564.979185 63.0502525,565.874615 63.0502525,566.979185 L63.0502525,590.292893 Z" transform="translate(-47 -565)"/>
</svg>
</a>
</section>
<section class="statement dark short" id="target">
<div class="container statement-text">
<span><img class="icon" src="/img/icon-bird.svg" /></span>
<h2>We craft websites, apps and digital services that have a meaningful impact on your business.</h2>
<!-- <p>Keep scrolling to see some of our award-winning work.</p> -->
</div>
</section>
<section class="case-studies ">
<div class="container">
<a href="/case-studies/football-survivor" class="work-box case-study-1">
<div class="background-image case-study-1"></div>
<div class="copy">
<h2>Football Survivor <span class="arrow-appear"><svg class="arrow pulse" xmlns="http://www.w3.org/2000/svg" width="28" height="33" viewBox="0 0 28 33">
<path fill="rgba(245,49,112,1)" fill-rule="evenodd" d="M63.0502525,590.292893 L70.9497475,582.393398 C71.7307961,581.61235 72.997126,581.61235 73.7781746,582.393398 C74.5592232,583.174447 74.5592232,584.440777 73.7781746,585.221825 L62.4644661,596.535534 C61.6834175,597.316582 60.4170876,597.316582 59.636039,596.535534 L48.3223305,585.221825 C47.5412819,584.440777 47.5412819,583.174447 48.3223305,582.393398 C49.1033791,581.61235 50.369709,581.61235 51.1507576,582.393398 L59.0502525,590.292893 L59.0502525,566.979185 C59.0502525,565.874615 59.945683,564.979185 61.0502525,564.979185 C62.154822,564.979185 63.0502525,565.874615 63.0502525,566.979185 L63.0502525,590.292893 Z" transform="translate(-47 -565)"/>
</svg>
</span></h2>
<p class="project-description">Play against your friends in this battle for Premier League survival.</p>
<p class="project-tag"><span>Responsive web</span><span>React</span></p>
<p class="view-link">View project</p>
<img class="case-study-logo" src="/img/logo-football-survivor-light.svg" />
</div>
</a>
<a href="/case-studies/disney-animated" class="work-box case-study-2">
<div class="background-image case-study-2"></div>
<div class="copy">
<h2>Disney Animated <span class="arrow-appear"><svg class="arrow pulse" xmlns="http://www.w3.org/2000/svg" width="28" height="33" viewBox="0 0 28 33">
<path fill="rgba(245,49,112,1)" fill-rule="evenodd" d="M63.0502525,590.292893 L70.9497475,582.393398 C71.7307961,581.61235 72.997126,581.61235 73.7781746,582.393398 C74.5592232,583.174447 74.5592232,584.440777 73.7781746,585.221825 L62.4644661,596.535534 C61.6834175,597.316582 60.4170876,597.316582 59.636039,596.535534 L48.3223305,585.221825 C47.5412819,584.440777 47.5412819,583.174447 48.3223305,582.393398 C49.1033791,581.61235 50.369709,581.61235 51.1507576,582.393398 L59.0502525,590.292893 L59.0502525,566.979185 C59.0502525,565.874615 59.945683,564.979185 61.0502525,564.979185 C62.154822,564.979185 63.0502525,565.874615 63.0502525,566.979185 L63.0502525,590.292893 Z" transform="translate(-47 -565)"/>
</svg>
</span></h2>
<p class="project-description">Discover how Disney make their animated movies.</p>
<p class="project-tag"><span>iPad</span></p>
<p class="view-link">View project</p>
<img class="case-study-logo" src="/img/logo-disney-light.svg" />
</div>
</a>
<a href="/case-studies/qiktionary" class="work-box">
<div class="background-image case-study-3"></div>
<div class="copy">
<h2>Qiktionary <span class="arrow-appear"><svg class="arrow pulse" xmlns="http://www.w3.org/2000/svg" width="28" height="33" viewBox="0 0 28 33">
<path fill="rgba(245,49,112,1)" fill-rule="evenodd" d="M63.0502525,590.292893 L70.9497475,582.393398 C71.7307961,581.61235 72.997126,581.61235 73.7781746,582.393398 C74.5592232,583.174447 74.5592232,584.440777 73.7781746,585.221825 L62.4644661,596.535534 C61.6834175,597.316582 60.4170876,597.316582 59.636039,596.535534 L48.3223305,585.221825 C47.5412819,584.440777 47.5412819,583.174447 48.3223305,582.393398 C49.1033791,581.61235 50.369709,581.61235 51.1507576,582.393398 L59.0502525,590.292893 L59.0502525,566.979185 C59.0502525,565.874615 59.945683,564.979185 61.0502525,564.979185 C62.154822,564.979185 63.0502525,565.874615 63.0502525,566.979185 L63.0502525,590.292893 Z" transform="translate(-47 -565)"/>
</svg>
</span></h2>
<p class="project-description">An easily-learnt, not-so-easily-mastered word game with BBC‘s QI quiz show.</p>
<p class="project-tag"><span>iPhone</span><span>iPad</span><span>iMessage</span><span>Android</span></p>
<p class="view-link">View project</p>
<img class="case-study-logo" src="/img/logo-qi-light.svg" />
</div>
</a>
</div>
</section>
<section class="testimonials short dark">
<div class="container">
<div>
<span><img class="icon" src="/img/icon-quote.svg" /></span>
<h2>Working with Tiny Matter was a pleasure. I was impressed by their attention to detail and quick communication. I’d happily recommend them and look forward to working with the guys again soon.</h2>
<p>James Tattersfield, CEO Clarity Impact</p>
</div>
</div>
</section>
<section class="clients ">
<div class="container">
<h2>We’ve produced digital products with some of the world’s leading brands:</h2>
<ul class="">
<li>
<div class="client itv"></div>
</li>
<li>
<div class="client bbc"></div>
</li>
<li>
<div class="client bmw"></div>
</li>
<li>
<div class="client nike"></div>
</li>
<li>
<div class="client disney"></div>
</li>
<li>
<div class="client qi"></div>
</li>
<li>
<div class="client pepsi"></div>
</li>
<li>
<div class="client nbc"></div>
</li>
</ul>
</div>
</section>
<section class="testimonials short dark">
<div class="container">
<div>
<span><img class="icon" src="/img/icon-quote.svg" /></span>
<h2>I’ve had the pleasure of working with Tiny Matter on the design and development of Qiktionary. Their game-development expertise is amazing. It has resulted in us being featured a number of times by Apple and securing over 250,000 downloads.</h2>
<p>Alex Johnston, CEO Four Letter Works</p>
</div>
</div>
</section>
<section class="stats">
<div class="container">
<h2>We build successful products:</h2>
<ul class="grid-6">
<li>
<h3>2</h3>
<p>Apple iPad App of the Year awards</p>
<span class="icon-stat apple"></span>
</li>
<li>
<h3>1</h3>
<p>BAFTA award</p>
<span class="icon-stat bafta"></span>
</li>
<li>
<h3>9</h3>
<p>Apple Editors’ Choice awards</p>
<span class="icon-stat apple"></span>
</li>
<li>
<h3>1</h3>
<p>business acquisition</p>
<span class="icon-stat acquisition"></span>
</li>
<li>
<h3>9+</h3>
<p>million app downloads</p>
<span class="icon-stat downloads"></span>
</li>
</ul>
</div>
</section>
<section class="contact short">
<div class="container">
<h2>Do you have a project you’d like to collaborate on?</h2>
<p>Get in touch: <a href="mailto:[email protected]" class="dark">[email protected]</a></p>
</div>
</section>
<footer>
<p>Copyright © Tiny Matter Ltd 2018. All rights reserved.</p>
<span><a class="dark" href="/contact">Get in touch</a> 👋</span>
</footer>
<script type="text/javascript" src="/js/main-min.js"></script>
<script type="text/javascript">
var s = skrollr.init({ forceHeight: false });
if (s.isMobile()) {
s.destroy();
}
</script>
</body>
</html>