-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
426 lines (413 loc) · 21.9 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
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Get comfy... things are about to get Awkward</title>
<meta name="description" content="We are a tribe of creative micro-businesses working in the same studio in Brighton">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ee3040">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@studioawkward">
<meta name="twitter:creator" content="@studioawkward">
<meta property="og:url" content="https://getawkward.co.uk">
<meta property="og:title" content="Get comfy... things are about to get Awkward">
<meta property="og:description" content="We are a tribe of creative micro-businesses working in the same studio in Brighton">
<meta property="og:image" content="https://getawkward.co.uk/images/awkward.png">
<link rel="icon" href="images/awkward.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700%7CPlayfair+Display:400i">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/site.css">
</head>
<!--
Hello there!
This site has been put together with plain HTML and CSS to allow anyone in the studio to edit it with the minimum of fuss.
If you are interested in our code, take a look at:
https://github.com/studio-awkward/
-->
<body>
<header class="Hero u-BackgroundFlourish js-u-BackgroundFlourish" role="banner">
<div class="Hero-body">
<div class="Editorial">
<h1>Get comfy...</h1>
<h2>
things are about to get
<span class="Hero-ticker">
<span class="Hero-tickerWord js-Hero-tickerWord">Awkward</span>
<span class="Hero-tickerWord js-Hero-tickerWord">created</span>
<span class="Hero-tickerWord js-Hero-tickerWord">developed</span>
<span class="Hero-tickerWord js-Hero-tickerWord">designed</span>
<span class="Hero-tickerWord js-Hero-tickerWord">filmed</span>
<span class="Hero-tickerWord js-Hero-tickerWord">photographed</span>
<span class="Hero-tickerWord js-Hero-tickerWord">Lego'd</span>
<span class="Hero-tickerWord js-Hero-tickerWord">coded</span>
<span class="Hero-tickerWord js-Hero-tickerWord">discovered</span>
<span class="Hero-tickerWord js-Hero-tickerWord">branded</span>
<span class="Hero-tickerWord js-Hero-tickerWord">****ed up</span>
<span class="Hero-tickerWord js-Hero-tickerWord">copywritten</span>
<span class="Hero-tickerWord js-Hero-tickerWord">Trello'd</span>
</span>
</h2>
</div>
</div>
</header>
<main role="main">
<section class="Intro u-BackgroundFlourish js-u-BackgroundFlourish">
<div class="Flourish js-Flourish"></div>
<div class="Intro-body">
<p class="Intro-standFirst">
We are a tribe of creative micro-businesses working together in our Brighton studio.
</p>
<p class="Intro-detail">
We collaborate on projects, bringing together our specialist talents in the service of others. There's not much we can't do as a team, but if you want a quick list, we specialise in copywriting, coding, animation, branding, tone-of-voice, film-making, photography, workshops and all kinds of design - we're also pretty good at making websites.
</p>
</div>
</section>
<section class="Team u-BackgroundFlourish js-u-BackgroundFlourish">
<div class="Flourish js-Flourish"></div>
<div class="Team-body">
<div class="Team-members js-Team-members">
<div class="Team-member">
<div class="TeamMember js-TeamMember TeamMember--ed">
<div class="TeamMember-images">
<img class="TeamMember-photo" src="./images/team/team-ed-photo.jpg" alt="Photo of Ed">
<img class="TeamMember-portrait" src="./images/team/team-ed-portrait.jpg?v=2" alt="Shit portrait of Ed">
</div>
<div class="TeamMember-detail">
<div class="TeamMember-bio">
<div class="Editorial">
<h3>Ed Isaacs</h3>
<h4>Optimistic Fox</h4>
<p>
As the resident ‘Man with laptop’, Ed’s happiest when talking to clients or writing copy. Occasionaly creative & always loud, he laps up hip-hop & high-octane fuel (not literally, obvs). Suprisingly good cook.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="Team-member">
<div class="TeamMember js-TeamMember TeamMember--becky">
<div class="TeamMember-images">
<img class="TeamMember-photo" src="./images/team/team-becky-photo.jpg" alt="Photo of Becky">
<img class="TeamMember-portrait" src="./images/team/team-becky-portrait.jpg" alt="Shit portrait of Becky">
</div>
<div class="TeamMember-detail">
<div class="TeamMember-bio">
<div class="Editorial">
<h3>Rebecca Bailey</h3>
<h4>Optimistic Fox</h4>
<p>
Random acts of kindness giver, google search master, hoarder of browser tabs, screenshots & interestingly useless facts. Lover of ferrets and fast cars - not together, that would get messy.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="Team-member">
<div class="TeamMember js-TeamMember TeamMember--fran">
<div class="TeamMember-images">
<img class="TeamMember-photo" src="./images/team/team-fran-photo.jpg?v=2" alt="Photo of Fran">
<img class="TeamMember-portrait" src="./images/team/team-fran-portrait.jpg?v=2" alt="Shit portrait of Fran">
</div>
<div class="TeamMember-detail">
<div class="TeamMember-bio">
<div class="Editorial">
<h3>Francesca Swatton</h3>
<h4>Osomi</h4>
<p>
Fran designs like a goddess and has a fervent love of flamingos and Matt Sewell birds. She is also well known in the studio for eating things only in halves.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="Team-member">
<div class="TeamMember js-TeamMember TeamMember--ruth">
<div class="TeamMember-images">
<img class="TeamMember-photo" src="./images/team/team-ruth-photo.jpg" alt="Photo of Ruth">
<img class="TeamMember-portrait" src="./images/team/team-ruth-portrait.jpg" alt="Shit portrait of Ruth">
</div>
<div class="TeamMember-detail">
<div class="TeamMember-bio">
<div class="Editorial">
<h3>Ruth Watson</h3>
<h4>Osomi</h4>
<p>
When Ruth isn't Creative Directing like a boss she is mainly thinking about gold and pin badges, OOooh golden pin badges. She also does shit portraits. They are not that shit.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="Team-member">
<div class="TeamMember js-TeamMember TeamMember--sam">
<div class="TeamMember-images">
<img class="TeamMember-photo" src="./images/team/team-sam-photo.jpg" alt="Photo of Sam">
<img class="TeamMember-portrait" src="./images/team/team-sam-portrait.jpg" alt="Shit portrait of Sam">
</div>
<div class="TeamMember-detail">
<div class="TeamMember-bio">
<div class="Editorial">
<h3>Sam Waters</h3>
<h4>Osomi</h4>
<p>
Sam has one fan. And it blows his hair majestically whilst playing the best guitar solos on Instagram. He also enjoys a blast in Belinda CARlisle - his purple MX5.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="Team-member">
<div class="TeamMember js-TeamMember TeamMember--paul">
<div class="TeamMember-images">
<img class="TeamMember-photo" src="./images/team/team-paul-photo.jpg" alt="Photo of Paul">
<img class="TeamMember-portrait" src="./images/team/team-paul-portrait.jpg" alt="Shit portrait of Paul">
</div>
<div class="TeamMember-detail">
<div class="TeamMember-bio">
<div class="Editorial">
<h3>Paul Ferguson</h3>
<p>
When Paul's not cycling across continents he's a web dev. He grew up on a farm which may explain why he resorts to animal sounds in an attempt to avoid explaining himself in a professional manner. Meowww woof.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="Team-member">
<div class="TeamMember js-TeamMember TeamMember--natalie">
<div class="TeamMember-images">
<img class="TeamMember-photo" src="./images/team/team-natalie-photo.jpg" alt="Photo of Natalie">
<img class="TeamMember-portrait" src="./images/team/team-natalie-portrait.jpg" alt="Shit portrait of Natalie">
</div>
<div class="TeamMember-detail">
<div class="TeamMember-bio">
<div class="Editorial">
<h3>Natalie Hancock</h3>
<p>
Cakes. Crazy children. Curious explorer of rock pools and gardens. I love technology but technology does not like me. I prefer pencils, paints and getting messy.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="Team-quote js-Team-quote"><h4></h4></div>
<div class="Team-quote js-Team-quote"><h4></h4></div>
<div class="Team-quote js-Team-quote"><h4></h4></div>
<div class="Team-quote js-Team-quote"><h4></h4></div>
<div class="Team-quote js-Team-quote"><h4></h4></div>
</div>
</div>
</section>
<section class="Companies u-BackgroundFlourish js-u-BackgroundFlourish" data-flourish-direction="vert">
<div class="Flourish js-Flourish"></div>
<div class="Companies-body">
<div class="Companies-items">
<div class="Companies-item">
<div class="Company Company--osomi">
<div class="Company-brand">
<a class="Company-brandLink" href="http://osomi.co.uk" rel="external">
<img class="Company-brandLogo" src="./images/companies/osomi.png" alt="Osomi's logo">
</a>
</div>
<div class="Company-detail">
<div class="Editorial">
<h3>Osomi</h3>
<h4>Design & branding</h4>
<p>
We're a creatively curious team who believe in bold brand positioning, daring designs and courageous creativity.
</p>
</div>
<a class="Company-link" href="http://osomi.co.uk" rel="external">osomi.co.uk</a>
</div>
</div>
</div>
<div class="Companies-item">
<div class="Company Company--fox">
<div class="Company-brand">
<a class="Company-brandLink" href="http://optimisticfox.co.uk" rel="external">
<img class="Company-brandLogo" src="./images/companies/optimistic-fox.png" alt="Optimistic Fox's logo">
</a>
</div>
<div class="Company-detail">
<div class="Editorial">
<h3>Optimistic Fox</h3>
<h4>Copywriting & tone of voice</h4>
<p>
Specialising in brand & customer experience communication, we help organisations say & do the things they believe in.
</p>
</div>
<a class="Company-link" href="http://optimisticfox.co.uk" rel="external">optimisticfox.co.uk</a>
</div>
</div>
</div>
<div class="Companies-item">
<div class="Company Company--nh">
<div class="Company-brand">
<a class="Company-brandLink" href="http://nataliehancock.com/" rel="external">
<img class="Company-brandLogo" src="./images/companies/nh.png" alt="Natalie's logo">
</a>
</div>
<div class="Company-detail">
<div class="Editorial">
<h3>Natalie Hancock</h3>
<h4>Illustrator & designer</h4>
<p>
Part graphic designer and part illustrator, you'll find her work adorning tables, bottles, walls, windows, magazines, websites and even cakes!
</p>
</div>
<a class="Company-link" href="http://nataliehancock.com" rel="external">nataliehancock.com</a>
</div>
</div>
</div>
<div class="Companies-item">
<div class="Company Company--pf">
<div class="Company-brand">
<a class="Company-brandLink" href="http://paullferguson.com" rel="external">
<img class="Company-brandLogo" src="./images/companies/pf.png" alt="Paul's logo">
</a>
</div>
<div class="Company-detail">
<div class="Editorial">
<h3>Paul L Ferguson</h3>
<h4>Front-end web developer</h4>
<p>
Worker of UI systems for projects of various scales and technology, specialising in CSS and HTML.
</p>
</div>
<a class="Company-link" href="http://paullferguson.com" rel="external">paullferguson.com</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="Projects u-BackgroundFlourish js-u-BackgroundFlourish">
<div class="Flourish js-Flourish"></div>
<div class="Projects-body">
<div class="Projects-showcase">
<div class="Projects-showcaseVisual">
<a class="Projects-showcaseLink" href="http://www.whynotunlimited.com/" rel="external">
<img class="Projects-showcaseImage" src="./images/projects/peter-docker-featured.jpg?v=2" alt="A screenshot from our featured project">
</a>
</div>
<div class="Projects-showcaseDetail">
<div class="Editorial">
<h3>Showcase: Peter Docker | WhyNot</h3>
<p>Committed to helping shift the world of work to be a place where the vast majority of people go home fulfilled, energised & inspired by the work they do, Peter Docker enables people to be extraordinary so that they can do extraordinary things. As a speaker, teacher & Start With Why Igniter, Peter presents around the world, as well as facilitating international workshops and bespoke leadership programmes.</p>
<p>Peter asked us create a simple, human, experience-rich website from scratch to bring Peter, his content & his ideas to life in the digital world, so they can have purpose & value in the real world. We also gave him a new brand.</p>
<blockquote>
<p>
Everyone I have shown the website to has said “WOW, what a website!” which, of course, I completely agree with.
</p>
</blockquote>
</div>
<a class="Projects-link" href="http://www.whynotunlimited.com/" rel="external">Visit site</a>
</div>
</div>
<div class="Projects-items">
<div class="Projects-item">
<div class="Editorial">
<h3>Fraser Randall</h3>
<p>Running a brand discovery workshop to define the look, feel and tone-of-voice of their new brand, we implemented the results across all their printed and digital collateral focusing on their website to create a clean and clear platform to display their fantastic projects.</p>
</div>
<a class="Projects-link" href="http://www.fraserrandall.co.uk" rel="external">Visit site</a>
</div>
<div class="Projects-item">
<div class="Editorial">
<h3>AlchemyFlow</h3>
<p>Working with the enigmatic owner of AlchemyFlow Darren, we created the brand: Defined their look & feel, iconography & illustrations, created a suite of labels & packing and built an engaging website.</p>
</div>
<a class="Projects-link" href="http://alchemyflow.com" rel="external">Visit site</a>
</div>
<div class="Projects-item">
<div class="Editorial">
<h3>Arduino Spotify controller</h3>
<p>We wanted a way to randomly select music to play in the studio. We put this together with an Arduino, an old Wii nunchuk controller, an antique Mac mini and some Node.js magic.</p>
</div>
</div>
</div>
</div>
</section>
<section class="Gallery">
<div class="Gallery-columns js-Gallery-columns"></div>
</section>
<section class="Contact js-Contact">
<div class="Contact-body">
<div class="Contact-details">
<a class="Contact-email" href="mailto:all@getawkward.co.uk">
all@getawkward.co.uk
</a>
<address class="Contact-address">
Studio Awkward<br>
68 Middle Street<br>
Brighton, BN1 1AL
</address>
<p>
<a class="Contact-social Contact-social--twitter" href="https://twitter.com/studioawkward" rel="external">
studioawkward
</a>
</p>
<p>
<a class="Contact-social Contact-social--instagram" href="https://instagram.com/studio_awkward" rel="external">
studio_awkward
</a>
</p>
</div>
<form class="Contact-form js-Contact-form" method="post" action="contact/">
<fieldset class="Contact-fieldset">
<legend class="Contact-legend">Say hello</legend>
<p class="Contact-intro">
If you've got a project, if you can fill in the contact form, maybe, just maybe you can hire The A-(Awkward) Team
</p>
<label class="Contact-label u-visuallyHidden" for="name">name</label>
<input class="Contact-input Contact-input--name" type="text" id="name" name="name" placeholder="name">
<label class="Contact-label u-visuallyHidden" for="email">email</label>
<input class="Contact-input Contact-input--email" type="email" id="email" name="email" placeholder="email">
<label class="Contact-label u-visuallyHidden" for="phone">phone</label>
<input class="Contact-input Contact-input--phone" type="tel" id="phone" name="phone" placeholder="phone">
<label class="Contact-label u-visuallyHidden" for="message">say some stuff to us</label>
<textarea class="Contact-textarea" id="message" name="message" rows="3" cols="20" placeholder="say some stuff to us"></textarea>
<input class="Contact-input Contact-input--honeypot u-visuallyHidden" type="text" id="honeypot" name="honeypot" placeholder="One for the bots">
<button class="Contact-submit" type="submit">
Send message
<span class="Contact-states">
<span class="Contact-state Contact-state--loading js-Contact-state--loading">
↻
</span>
<span class="Contact-state Contact-state--success js-Contact-state--success">
✔
</span>
<span class="Contact-state Contact-state--error js-Contact-state--error">
✔
</span>
</span>
</button>
</fieldset>
</form>
</div>
</section>
</main>
<footer role="contentinfo" class="Footer">
<div class="Footer-body">
<p>You're a footer</p>
</div>
</footer>
<div class="Controls js-Controls">
<a href="#" class="Controls-link js-Controls-link Controls-link--refresh js-Controls-link--refresh">
<span class="Controls-text u-visuallyHidden">Refresh</span>
</a>
<a href="mailto:all@getawkward.co.uk" class="Controls-link js-Controls-link Controls-link--contact js-Controls-link--contact">
<span class="Controls-text u-visuallyHidden">Contact us</span>
</a>
</div>
<script src="js/site.js"></script>
</body>
</html>