-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
308 lines (306 loc) · 14.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Yorkshire Interactive | Web design and app development studio based in Portland, Oregon</title>
<meta name="description" content="Yorkshire Interactive is a web design and app development studio based in Portland, Oregon">
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68928418-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://use.typekit.net/hzp0icq.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" type="text/css" media="all" href="assets/css/main.css">
<link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/ico/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/ico/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/ico/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/ico/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/ico/favicon-16x16.png">
<link rel="manifest" href="assets/ico/manifest.json">
<script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>
<meta name="msapplication-TileColor" content="#28292A">
<meta name="msapplication-TileImage" content="assets/ico/ms-icon-144x144.png">
<meta name="theme-color" content="#28292A">
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KZXRDT"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KZXRDT');</script>
<!-- End Google Tag Manager -->
<!--Top Bar - Visible as you scroll down the page-->
<div class="top-bar">
<div class="inner-wrapper">
<p class="logotype"><img src="assets/img/logotype-full.svg" /></p>
<p class="cta">We are currently taking new projects!<a class="btn-hire-us">Hire Us</a></p>
</div>
</div>
<!-- End Top Bar -->
<!-- Billboard -->
<div class="splash-image big-splash">
<!-- This image is the background but sites like Facebook that pull images
for previews don't check for CSS backgrounds. We put this one here and hide
it so that the image will be pulled in when sharing links to this site -->
<img src="http://res.cloudinary.com/piggybank/image/upload/v1444888085/bridge_hkp6iq.jpg" class="site-image-hide">
<div class="big-splash-inner-wrapper">
<div class="vert-wrap">
<img class="mark" src="assets/img/pigeon-white.svg" />
<h1>We build great ideas.</h1>
<h2>UI Design + Engineering + Consulting</h2>
<a class="btn-hire-us">Hire Us</a>
</div>
<a id="Read-More" class="btn-more"><span>Read More</span></a>
</div>
</div>
<!-- End Billboard -->
<!-- Introduction-->
<div id="intro-block" class="wide-block">
<div class="inner-wrapper">
<h3>Yorkshire Interactive creates friendly user interfaces for digital products.</h3>
<p>We specialize in helping startup businesses put ideas into motion, getting real products to market as quickly as possible.</p>
<div class="services-blocks">
<div class="plus">+</div>
<div class="block-service left">
<div class="circle">
<img src="assets/img/icn-design.svg" />
</div>
<h4>Design</h4>
<p>We design beautiful and functional websites and user interfaces across all platforms. Your users will have an engaging experience, whether they’re viewing your application from their desktop, laptop, or mobile device. We design web and native experiences, alike.</p>
</div>
<div class="block-service right">
<div class="circle">
<img src="assets/img/icn-brackets.svg" />
</div>
<h4>Engineering</h4>
<p>We’ll make your idea come to life with clean, efficient, well-written code, We’ll do whatever it takes to bring your web, iOS or Android application to market. Our team has built banking, ride-hailing, mapping, e-commerce, social, enterprise and government software.</p>
</div>
</div>
</div>
</div>
<!-- End Introduction-->
<!-- Team Bio -->
<div id="who-we-are" class="wide-block">
<div id="team-wrapper" class="inner-wrapper">
<h3>Who We Are</h3>
<div class="team-member-blocks">
<div class="team-member">
<img src="assets/img/jason.jpg" />
<h4>Jason Bennett</h4>
<h5>Managing Partner, Designer</h5>
<p>Jason’s background is in design. He is the former Creative Director at Graybox and has worked for digital creative agencies for over a decade.</p>
</div>
<div class="team-member">
<img src="assets/img/oscar.jpg" />
<h4>Oscar Godson</h4>
<h5>Founding Partner, Engineer</h5>
<p>Oscar's background is in design and engineering. He’s the former CEO and co-founder of Piggybank, previously working at Yammer and Simple.</p>
</div>
<div class="team-member">
<img src="assets/img/adam.jpg" />
<h4>Adam Bickford</h4>
<h5>Founding Partner, Engineer</h5>
<p>Adam's background is in engineering. He’s the former CTO and co-founder of Piggybank. Previously he was an independent web contractor for several years.</p>
</div>
</div>
</div>
</div>
<!-- End Team Bio -->
<!-- Portfolio -->
<div id="what-were-building" class="wide-block">
<div class="inner-wrapper">
<h3>What We're Building</h3>
<p class="component-description">
We've partnered with some truly innovative clients to build some amazing things. We work with clients of all sizes, and with technical and non-technical people alike on projects that inspire us.
</p>
<div id="project-list">
<div class="project-profile">
<div class="logo-container">
<img src="assets/img/logos/[email protected]" />
</div>
<p class="business-list-item-description">
BatchGeo enables users to easily create interactive maps from datasets. Yorkshire Interactive provides ongoing development services for a variety of advanced mapping tools built on top of BatchGeo's existing platform, leveraging Google Maps APIs.
</p>
<a class="btn btn-secondary" href="https://batchgeo.com">batchgeo.com</a>
</div>
<div class="project-profile">
<div class="logo-container">
<img src="assets/img/logos/logo-inverted.svg" />
</div>
<p class="business-list-item-description">
Vault is a modern investment platform that provides 401(k) and retirement plans for businesses. Yorkshire Interactive has partnered with Vault to lead development and infrastructure, providing ongoing development and consulting services.
</p>
<a class="btn btn-secondary" href="http://getvault.com">getvault.com</a>
</div>
</div>
</div>
</div>
<!-- End Portfolio -->
<!-- Call To Action -->
<div id="cta-block" class="wide-block">
<div class="inner-wrapper">
<div>
<h3>What do you need help building?</h3>
<p>We have design and development resources available to start your project right away.</p>
<a class="btn-hire-us">Hire Us</a>
</div>
</div>
</div>
<!-- End Call To Action -->
<!-- Contact Modal -->
<div id="hire-us-wrapper">
<div id="hire-us" class="inner-wrapper">
<a class="modal-dismiss-btn">X</a>
<div class="component-list-wrapper">
<h3>Let's Rock.</h3>
<p class="business-list-item-description">
Hire us to help get your great idea to market. Fill out the
contact form or send us an email at
<a href="mailto:[email protected]">[email protected]</a>.
</p>
<ul>
<li class="component-list-item">
<form id="hire-us-form" name="form1" class="wufoo topLabel page" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate="" action="https://yorkshireinteractive.wufoo.com/forms/z75s0nf101ilq2/#public">
<ul>
<li id="foli18" class="notranslate full-name">
<label class="desc" id="title18" for="Field18">
Name
</label>
<div class="full-name-inputs">
<input placeholder="First" id="Field18" name="Field18" type="text" class="field text fn" value="" tabindex="1">
<input placeholder="Last" id="Field19" name="Field19" type="text" class="field text ln" value="" tabindex="2">
</div>
</li>
<li id="foli21" class="notranslate ">
<label class="desc" id="title21" for="Field21">
Email
<span id="req_21" class="req">*</span>
</label>
<div>
<input placeholder="[email protected]" id="Field21" name="Field21" type="email" spellcheck="false" class="field text large" value="" maxlength="255" tabindex="3" required="">
</div>
</li>
<li id="fo1li23" class="notranslate ">
<label class="desc" id="title23" for="Field23">
Phone
</label>
<div>
<input id="Field23" class="field text large" name="Field23" tabindex="4" type="tel" maxlength="255" value="" />
</div>
</li>
<li id="foli10" class="notranslate ">
<label class="desc" id="title10" for="Field10">
Message
<span id="req_10" class="req">*</span>
</label>
<div>
<textarea placeholder="Tell us about your project" id="Field10" name="Field10" class="field textarea medium" spellcheck="true" rows="6" cols="50" tabindex="4" onkeyup="" required=""></textarea>
</div>
</li>
<li id="foli13" class="notranslate ">
<label class="desc" id="title13" for="Field13">
Project Budget
</label>
<div>
<div class="styled-select">
<select placeholder="How much?" id="Field13" name="Field13" class="field select large" tabindex="5">
<option value="" selected="selected"></option>
<option value="Less than $5,000">
Less than $5,000
</option>
<option value="$5,000-$10,000" selected="selected" >
$5,000-$10,000
</option>
<option value="$10,001-$25,000">
$10,001-$25,000
</option>
<option value="$25,001-$50,000">
$25,001-$50,000
</option>
<option value="$50,001-$100,000">
$50,001-$100,000
</option>
<option value="More than $100,000">
More than $100,000
</option>
</select>
</div>
</div><!--end styled select-->
</li>
<li id="foli12" class="date notranslate ">
<label class="desc" id="title12" for="Field12">
Project due by
</label>
<span>
<input placeholder="MM" id="Field12-1" name="Field12-1" type="text" class="field text month" value="" size="3" maxlength="2" tabindex="6">
</span>
<span class="symbol">/</span>
<span>
<input placeholder="DD" id="Field12-2" name="Field12-2" type="text" class="field text day" value="" size="3" maxlength="2" tabindex="7">
</span>
<span class="symbol">/</span>
<span>
<input placeholder="YYYY" id="Field12" name="Field12" type="text" class="field text year" value="" size="4" maxlength="4" tabindex="8">
</span>
<span id="cal12">
</span>
</li>
<li class="buttons ">
<div>
<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Submit">
</div>
</li>
<li class="hide">
<label for="comment">Do Not Fill This Out</label>
<textarea name="comment" id="comment" rows="1" cols="1"></textarea>
<input type="hidden" id="idstamp" name="idstamp" value="UmoBGA61EQfAYFBpO5r92qOFl6xKz1QUdyxgx7fsDog=">
</li>
</ul>
</form>
</li>
</ul>
</div>
</div>
</div>
<!-- End Contact Modal-->
<!-- Footer -->
<div id="footer-wrapper">
<footer>
<div class="">
<ul class="social">
<li><a href="https://www.facebook.com/yorkshireinteractive">Facebook</a></li>
<li><a href="https://twitter.com/yorkshireinc">Twitter</a></li>
<li><a href="https://github.com/yorkshireinteractive">Github</a></li>
</ul>
</div>
<p class="copyright">
© 2017 Yorkshire Interactive. All Rights Reserved<br />
<span>Disclaimer: no data is stored on our site or by Yorkshire Interactive. User analytics are stored by Google and contact form submissions are stored by Wufoo.</span>
</p>
</footer>
</div>
<!-- End Footer-->
<!-- Scripts -->
<script src="assets/js/libs/jquery.min.js"></script>
<script src="assets/js/libs/jquery.fittext.js"></script>
<script src="assets/js/main.js"></script>
<!-- End Scripts -->
</body>
</html>