-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
296 lines (253 loc) · 13 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
<!DOCTYPE HTML>
<!--
Directive by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-153596096-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-153596096-1');
</script>
<title>Calibre | Digital Innovation and Product Development Studio</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body class="is-preload">
<header class="header">
<div class="container header__container">
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item">
<a href="./index.html">Home</a>
</li>
<li class="header__nav-item">
<a href="#portfolio">Portfolio</a>
</li>
<li class="header__nav-item">
<a href="#culture">Culture</a>
</li>
<li class="header__nav-item">
<a href="#enquire">Enquire</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Header -->
<div id="header">
<span class="logo icon fa-rocket"></span>
<h1>We are Calibre</h1>
<!-- <p>Code that means business</p> -->
<p>Better code
<br/>Faster delivery
<br/>Driving growth</p>
<!-- <p>Making it more accessible for you to get creative and code the web!</p> -->
</div>
<!-- Main -->
<div id="main">
<!-- Calibre was founded upon one core curiosity: "How smart can we get about making Digital Products?"
We're smart and lazy so you'd expect us to spot quick-wins. You wouldn't expect us to give those shortcuts to you
With a wealth of experience as a founder, freelancer, and agency owner, we created a studio that revolves around the question "Why?". Once we're satisfied with the answer, we'll work with you to aggressively pursue the best solution.
You'll usually find our Shoreditch studio working with senior managers or founders, because
We let our testimonials from clients at the Financial Times, the European Space Agency, and the companies we shouldn’t talk about too publicly speak for itself.
-->
<header class="major container medium">
<h3>WE HELP BIG-PICTURE THINKERS CHASE<br/> AMBITIOUS WEBSITE PROJECTS</h3>
<p>Project updates arrive at the same time each week, we share our expertise openly, and our sprints are on time, every time.</p>
<p>As you develop trust in our delivery, your focus will shift to creativity, strategy, and profitability with each successive project.</p>
</header>
<div class="row greyscaleLogoRow">
<div class="col-3 col-6-mobilep">
<img class="greyscaleLogoImg" src="images/Berenberg_Logo_Grey.png" alt="Berenberg Bank">
</div>
<div class="col-3 col-6-mobilep">
<img class="greyscaleLogoImg" src="images/ESA_Logo_Grey.png" alt="European Space Agency">
</div>
<div class="col-3 col-6-mobilep">
<img class="greyscaleLogoImg" src="images/DeepMind_Logo_Grey.png" alt="Google DeepMind">
</div>
<div class="col-3 col-6-mobilep">
<img class="greyscaleLogoImg" src="images/FinancialTimes_Logo_Grey.png" alt="Financial Times">
</div>
</div>
<!-- <header class="major container medium"> -->
<!-- <h3>Digital savvy, on tap</h3> -->
<!-- </header> -->
<!-- What this means for you is quicker iterations, less overheads, and a clearer ROI; sprint after sprint after sprint -->
<header class="major container medium">
<h3>WHAT MAKES A CALIBRE TEAM</h3>
<p>Unlike other agencies, our Project Managers are full-stack technologists who can read code, create designs, and understand your business needs. This means when our developers get to their desk, they've got all the information they need in one place, so they can focus on writing modular, robust, and flexible code.</p>
<p><!-- No juggling multiple tasks waiting for a response, no design adjustments within a development environment full of code, and no time is spent looking for non-existent bugs. --> It's little things like this that mean Calibre can turn around projects in a month, where a normal agency engagement takes three.</p>
<p>Well, actually our record for bespoke design + development of a website is a week, end to end. Check out the final result on our <a href="https://calibrestaging-vwtico.netlify.com/" target="_blank">staging site</a>.</p>
</header>
<section class="special">
<div class="box container">
<h2>Our Services</h2>
<br/>
<div class="row">
<div class="col-6 col-12-mobilep">
<img class="half-width-images" src="images/MajedieUIDesignIterations.png" alt="Majedie UI Design Iterations">
<strong>Digital Product Management</strong><br/>
<ul>
<li>Web Design</li>
<li>Human-centred Design</li>
<li>Digital Product Workshops</li>
</ul>
</div>
<div class="col-6 col-12-mobilep">
<img class="half-width-images" src="images/SublimeScreenshot_NuccoBtn.png" alt="Web Development Code Editor Screenshot">
<strong>Bespoke Web Development</strong><br/>
<ul>
<li>Web Applications</li>
<li>Serverless Static Sites</li>
<li>Bespoke WordPress Themes</li>
</ul>
<!-- <br/> -->
</div>
</div>
<!-- <div class="row">
<p style="width:80%; margin:auto;"><strong>Did you know...</strong><br/>
We've also done client work with React.js, Vue.js, Polymer.js, Drupal, Artificial Intelligence and NLP, and talent acquisition.</p>
</div> -->
</div>
</section>
<!-- We work with the smartest contractors in London and beyond. -->
<div class="box alt container" id="portfolio">
<section class="special">
<div class="box container">
<h2>Portfolio highlights</h2> <!-- Add "2019" when TrendWatching is published, then remove: FT, Rockpool -->
<!-- <p>Projects we're proud of</p> -->
</div>
</section>
<section class="feature left">
<a class="image"><img src="images/ESA_Logo_Copy.png" alt="" /></a>
<div class="content">
<h3>European Space Agency</h3>
<p>The European Space Agency | Business Applications were looking to gain a 70% increase in grant applications in the UK, but didn't have the in-house expertise to achieve this efficiently.</p>
<a href="./casestudy-esa.html">Case Study</a>
</div>
</section>
<section class="feature right">
<a class="image"><img src="images/DeepMind_Logo_Copy.png" alt="" /></a>
<div class="content">
<h3>Google DeepMind</h3>
<p>DeepMind is one of the world's leading (and most secretive) AI organisations, and is likely to play a significant role in the future of humanity. Calibre was brought in to support with an internal corporate communications initiative.</p>
</div>
</section>
<section class="feature left">
<a class="image"><img src="images/Berenberg_Logo_Copy.png" alt="" /></a>
<div class="content">
<h3>Berenberg</h3>
<p>The world's oldest merchant bank is living up to its legacy as it explores how to leverage digital to stay competative into the future. Calibre collaborates with Berenberg's head of innovation on Product Strategy, and then builds React.js components to realise their vision.</p>
</div>
</section>
<section class="feature right">
<a class="image"><img src="images/Rockpool_Logo_Copy.png" alt="" /></a>
<div class="content">
<h3>Rockpool Investments</h3>
<p>We rebranded the company's logo, offices, print & digital assets, but we're most proud of their bespoke Gutenberg page editor. It's as dynamic as the company itself and we love reopening their site to notice major changes they implemented without our help.</p>
</div>
</section>
<section class="feature left">
<a class="image"><img src="images/ESCLabs_Logo_Copy.png" alt="" /></a>
<div class="content">
<h3>Subutai</h3>
<p>Subutai was building version 4 of their product, and it had to transform the company from no revenue to a profitable business. We also developed this <a href="https://esc.co" target="_blank">animated website</a> for them.</p>
<a href="./casestudy-subutai.html">Case Study</a>
</div>
</section>
<section class="feature right">
<a class="image"><img src="images/NuccoBrain_Logo_Copy.png" alt="" /></a>
<div class="content">
<h3>Nucco Brain</h3>
<p>We coached Nucco Brain's graphic designers to understand how to design for Web, as part of a strategy to sell unique websites to clients, leveraging their own illustration styles.<br/>
Then, whenever they redesign <a href="https://nuccobrain.com" target="_blank">their website</a>, we deliver pixel-perfect code within two weeks.</p>
</div>
</section>
<section class="feature left">
<a class="image"><img src="images/FinancialTimes_Logo_Copy.png" alt="" /></a>
<div class="content">
<h3>Financial Times</h3>
<p>As the FT was bought by the Japanese bank Nikkei recently, strategic thinking has been more relevant than ever. We were involved as technologists in a series of workshops around strengthening their brand in the business traveller segment through new app ideas.</p>
</div>
</section>
<section class="feature right">
<a class="image"><img src="images/casestudies/pharmaforesight/pfdtlogo.png" alt="" /></a>
<div class="content">
<h3>PharmaForesight.ai</h3>
<p>PharmaForesight needed a frontend to demo their disruptive AI algorithm to drugs manufacturers in just three weeks, and didn’t have the design or frontend development skills in the machine learning team.</p>
<a href="./casestudy-pharmaforesight.html">Case Study</a>
</div>
</section>
</div> <!-- end box alt container div -->
<header class="major container medium" id="culture">
<h3>MISSION</h3>
<p>Our mission is to enable our partners to move confidently in a digital landscape, and we offer the latest techniques, and the evergreen mindsets, that will get you there.</p>
<p><strong>Contact us to discover more ways you can leverage technology to grow your company.</strong></p>
</header>
</div> <!-- end main div -->
<!-- Footer -->
<div id="footer">
<div class="container medium" id="enquire">
<header class="major last">
<h2>Questions or comments?</h2>
</header>
<p>You know the drill.</p>
<form method="post" action="https://formspree.io/jerome@calibre.digital">
<div class="row">
<div class="col-6 col-12-mobilep">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="col-6 col-12-mobilep">
<input type="email" name="email" placeholder="Email" />
</div>
<div class="col-6 col-12-mobilep">
<input type="text" name="referrer" placeholder="Who connected you to us?" />
</div>
<div class="col-6 col-12-mobilep">
<select name="enquiry type">
<option value="other">What are you enquiring about?</option>
<option value="newbiz">We've got a project for you</option>
<option value="officehours">I'd love to pick your brain</option>
<option value="bizdev">Partnership Opportunity</option>
</select>
</div>
<div class="col-12">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
<div class="col-12">
<ul class="actions special">
<li><input type="submit" value="Send Message" /></li>
</ul>
</div>
</div>
</form>
<!--
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
</ul> -->
<ul class="copyright">
<li>Website created in a day, the Calibre Digital way</li>
<li>Calibre Digital Limited - Company Number: <a href="https://beta.companieshouse.gov.uk/company/10869672">10869672</a></li>
</ul>
</div>
</div>
<!-- Scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/breakpoints.min.js"></script>
<script src="js/util.js"></script>
<script src="js/main.js"></script>
</body>
</html>