-
Notifications
You must be signed in to change notification settings - Fork 14
/
portfolio.html
269 lines (252 loc) · 21.8 KB
/
portfolio.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
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is where you can see examples of apps that dwyl have built, solving real world problems for real people.">
<meta name="author" content="@dwyl">
<meta name="robots" content="noarchive">
<meta name="base" content="https://www.dwyl.com">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:500" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
<link rel="stylesheet" href="css/dwyl.css">
<link rel="shortcut-icon" href="/img/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/img/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/img/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/img/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/img/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="manifest" href="/img/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/img/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>Portfolio | Responsive Web and Mobile Applications | dwyl</title>
<script defer data-domain="dwyl.com" src="https://analytics.dwyl.com/js/script.js"></script>
</head>
<body>
<nav class="w-100 bg-white tc dwyl-dark-gray relative fixed shadow-5 z-3">
<input type="checkbox" id="burger" class="absolute top-2 right-1 dn">
<label for="burger" class="dn-l pointer absolute top-1 right-1">
<i class="fa fa-bars dwyl-dark-gray dib f2"></i>
</label>
<ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l">
<li class="absolute top-1 static-l ph4 mh2 fw3 di-l pt1 pb3 pv3-l">
<a href="/" class="dwyl-dark-gray link">
<img src="./img/common/dwyl-heart-only-logo.png" alt="dwyl heart logo" class="w1-plus"/>
dwyl
</a>
</li>
<li class="ph4 pt5 pb2 tl dn-l"><a href="/" class="dwyl-dark-gray link">Home</a></li>
<li class="ph4 di-l pv2 tl pv0-l"><a href="/values.html" class="dwyl-dark-gray link">Values</a></li>
<li class="ph4 di-l pv2 tl pv0-l"><a href="/team.html" class="dwyl-dark-gray link">Team</a></li>
<li class="ph4 dib-l pv2 tl pv0-l"><a href="/time-app.html" class="dwyl-dark-gray link">App
<span class="dwyl-bg-yellow fw3 pa1 br2 f7 shadow-6">BETA</span></a></li>
<!-- <li class="ph4 di-l pv2 tl pv0-l"><a href="/blog.html" class="dwyl-dark-gray link">Blog</a></li> -->
<!-- <li class="ph4 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="dwyl-dark-gray link">Contact</a></li> -->
</ul>
</nav>
<section class="bg-white pt6 pb4">
<section class="mw8 center pt4 ph3">
<h1 class="pl3 pr3 f1 w-100 tc tl-ns dwyl-dark-gray">Portfolio</h1>
<div class="dt-m dt-l dt--fixed-m dt--fixed-l mb3 ph3 ph0-ns" style="border-spacing: 1rem 0px;">
<a href="/case-studies/science-museum-group/online-collections" class="link db dtc-m dtc-l bg-white pa2 br2 relative shadow-6 mb4 mb0-ns">
<p class="pa2 bb b--black dwyl-dark-gray pb3 tl-ns montserrat f5 mt2 pb4-l">More than 250,000 artefacts, made accessible
and searchable!</p>
<img src="./img/common/science-museum-logo.jpg" alt="Science Museum logo" class="w-50 w-80-m center db pb3"/>
</a>
<a href="/case-studies/inclusive-classrooms/skills-wheel" class="link db dtc-m dtc-l bg-white pa2 br2 relative shadow-6 mb4 mb0-ns">
<p class="pa2 bb b--black dwyl-dark-gray pb3 tl-ns montserrat f5 mt2">Automating data collection means our TA's
can get on with what really matters.</p>
<img src="./img/common/inclusive-classrooms-logo.png" alt="Inclusive Classrooms logo" class="w-60 w-80-m pt2 pt2-l pb3 center db"/>
</a>
<a href="/case-studies/ellen-macarthur-foundation/CE100" class="link db dtc-m dtc-l bg-white pa2 br2 relative shadow-6">
<p class="pa2 bb b--black dwyl-dark-gray pb3 tl-ns montserrat f5 mt2">We increased community engagement with an
exclusive social network.</p>
<img src="./img/common/emf-logo.jpeg" alt="Ellen MacArthur Foundation logo" class="w-70 w-90-m pt3 pt3-l pb3 center db"/>
</a>
</div>
<div class="dt-m dt-l dt--fixed-m dt--fixed-l mb3 ph3 ph0-ns" style="border-spacing: 1rem 0px;">
<a href="/case-studies/city-university/quodl" class="link db dtc-m dtc-l bg-white pa2 br2 relative shadow-6 mb4 mb0-ns">
<p class="pa2 bb b--black dwyl-dark-gray pb3 tl-ns montserrat f5 mt2 pb4-l">A gamified revision tool for City University students</p>
<img src="./img/common/quodl-logo.png" alt="Quodl logo" class="w-50 w-80-m center db pb3"/>
</a>
<a href="/case-studies/nhs-england/good-thinking" class="link db dtc-m dtc-l bg-white pa2 br2 relative shadow-6 mb4 mb0-ns">
<p class="pa2 bb b--black dwyl-dark-gray pb3 tl-ns montserrat f5 mt2 pb4-l">An NHS approved wellbeing service with a focus on self care</p>
<img src="./img/common/good-thinking-logo.png" alt="Good Thinking logo" class="w-50 w-80-m center db pb3"/>
</a>
<a href="/case-studies/nhs-south-london-and-maudsley/healthlocker" class="link db dtc-m dtc-l bg-white pa2 br2 relative shadow-6 mb4 mb0-ns">
<p class="pa2 bb b--black dwyl-dark-gray pb3 tl-ns montserrat f5 mt2 pb4-l">Improving mental health self-management</p>
<img src="./img/common/healthlocker-logo.png" alt="Good Thinking logo" class="w-50 w-80-m center db pb3"/>
</a>
</div>
<div class="dt-m dt-l dt--fixed-m dt--fixed-l mb3 ph3 ph0-ns" style="border-spacing: 1rem 0px;">
<a href="/case-studies/oxford-abstracts/oxford-abstracts" class="link db dtc-m dtc-l bg-white pa2 br2 relative shadow-6 mb4 mb0-ns">
<p class="pa2 bb b--black dwyl-dark-gray pb3 tl-ns montserrat f5 mt2 pb4-l">Conference abstract and paper management system</p>
<img src="./img/common/oxford-abstracts.png" alt="Oxford Abstracts logo" class="w-50 w-80-m center db pb3"/>
</a>
<a class="link db-ns dtc-m dtc-l bg-transparent pa2 br2 relative mb4 mb0-ns dn"></a>
<a class="link db-ns dtc-m dtc-l bg-white pa2 br2 relative mb4 mb0-ns dn"></a>
<!-- <a href="/case-studies/thomas-cook/tc-serverless" class="link db dtc-m dtc-l bg-white pa2 br2 relative shadow-6 mb4 mb0-ns">
<p class="pa2 bb b--black dwyl-dark-gray pb3 tl-ns montserrat f5 mt2 pb4-l">Natural language search capability</p>
<img src="./img/common/thomas-cook-logo.png" alt="Thomas Cook logo" class="w-25 w-40-m center db pb3"/>
</a> -->
</div>
<p class="pl3 pr3 f4 b ph0-m dwyl-dark-gray pb3 pt4">We're in the process of adding more case studies, watch this space!</p>
</section>
</section>
<section class="bg-white pt5 pb6">
<section class="mw8 center ph3">
<h2 class="pl3 pr3 f1 mt0 w-100 tc tl-ns dwyl-dark-gray">Open Source</h2>
<p class="pl3 pr3 f4 b ph0-m dwyl-dark-gray pb3">We also create and maintain over 200 open source repositories on <a href="https:/dwyl" class="dwyl-mint-dark" >GitHub</a>, check out some of our most popular ones below:</p>
<div class="dt-m dt-l dt--fixed-m dt--fixed-l mb3" style="border-spacing: 1rem 0px;">
<a href="https:/dwyl/start-here" class="link db dtc-l bg-white pa4 shadow-6 br2 relative mb3">
<p class="dark-blue f4 mv0">start-here</p>
<p class="f6 dwyl-gray lh-copy">💡 A Quick-start Guide for People who want to dwyl ❤ ✅</p>
<section class="bottom-1 absolute">
<svg aria-label="stars" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 14 16" width="20"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg>
<span class="f5 dwyl-gray mr3 dib v-btm">366</span>
<svg aria-label="forks" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 10 16" width="20"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
<span class="f5 dwyl-gray dib v-btm">27</span>
</section>
</a>
<a href="https:/dwyl/the-book" class="link db dtc-l bg-white pa4 shadow-6 br2 relative mb3">
<p class="dark-blue f4 mv0">the-book</p>
<p class="f6 dwyl-gray lh-copy">📕 THE Book on Full-Stack Web Application Development covering User Experience (UX) Design/Tests, HTML5, Responsive + Functional CSS, Functional JavaScript, Mobile/Offline/Security First, Progressi…</p>
<section class="bottom-1 absolute">
<svg aria-label="stars" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 14 16" width="20"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg>
<span class="f5 dwyl-gray mr3 dib v-btm">503</span>
<svg aria-label="forks" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 10 16" width="20"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
<span class="f5 dwyl-gray dib v-btm">110</span>
</section>
</a>
<a href="https:/dwyl/learn-tdd" class="link db dtc-l bg-white pa4 shadow-6 br2 relative">
<p class="dark-blue f4 mv0">learn-tdd</p>
<p class="f6 dwyl-gray lh-copy">✅ A brief introduction to Test Driven Development (TDD) in JavaScript (Complete Beginner's Step-by-Step Tutorial)</p>
<section class="bottom-1 absolute">
<svg aria-label="stars" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 14 16" width="20"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg>
<span class="f5 dwyl-gray mr3 dib v-btm">562</span>
<svg aria-label="forks" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 10 16" width="20"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
<span class="f5 dwyl-gray dib v-btm">91</span>
</section>
</a>
</div>
<div class="dt-m dt-l dt--fixed-m dt--fixed-l" style="border-spacing: 1rem 0px;">
<a href="https:/dwyl/learn-elixir" class="link db dtc-l bg-white pa4 shadow-6 br2 relative mb3">
<p class="dark-blue f4 mv0">learn-elixir</p>
<p class="f6 dwyl-gray lh-copy">💧 Learn the Elixir programming language to build functional, fast, scalable and maintainable web applications!</p>
<section class="bottom-1 absolute">
<svg aria-label="stars" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 14 16" width="20"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg>
<span class="f5 dwyl-gray mr3 dib v-btm">83</span>
<svg aria-label="forks" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 10 16" width="20"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
<span class="f5 dwyl-gray dib v-btm">13</span>
</section>
</a>
<a href="https:/dwyl/learn-tachyons" class="link db dtc-l bg-white pa4 shadow-6 br2 relative mb3">
<p class="dark-blue f4 mv0">learn-tachyons</p>
<p class="f6 dwyl-gray lh-copy">😍 Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS!</p>
<section class="bottom-1 absolute">
<svg aria-label="stars" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 14 16" width="20"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg>
<span class="f5 dwyl-gray mr3 dib v-btm">118</span>
<svg aria-label="forks" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 10 16" width="20"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
<span class="f5 dwyl-gray dib v-btm">7</span>
</section>
</a>
<a href="https:/dwyl/learn-elm" class="link db dtc-l bg-white pa4 shadow-6 br2 relative">
<p class="dark-blue f4 mv0">learn-elm</p>
<p class="f6 dwyl-gray lh-copy">🌈 discover why people are switching to Elm and how you can get started today!</p>
<section class="bottom-1 absolute">
<svg aria-label="stars" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 14 16" width="20"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg>
<span class="f5 dwyl-gray mr3 dib v-btm">111</span>
<svg aria-label="forks" class="dib v-btm" fill="#586069" height="20" role="img" version="1.1" viewBox="0 0 10 16" width="20"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
<span class="f5 dwyl-gray dib v-btm">10</span>
</section>
</a>
</div>
</section>
</section>
<section class="dwyl-bg-mint center pv5-ns pb5-ns relative z-0">
<a id="contact" class="h2 dib h0-l di-l absolute top--2"></a>
<div class="mw8 center">
<div class="dib-ns w-50-ns dtc v-top">
<div class="w-80 w-60-ns white center tr">
<h2 class="mt0-ns mb3 pl4-ns f-xl fw9">Let's</h2>
<h2 class="pl4-ns mt3 f-xl fw9">Talk</h2>
</div>
<div class="w-80-ns w-90 ml3">
<a href="tel:+447708796446" class="link"><h2 class="tr white"><span class="dwyl-dark-gray fw9">Tel: </span>+44 (0) 7708 796446</h2></a>
<a href="mailto:[email protected]" class="link"><h2 class="tr white"><span class="dwyl-dark-gray fw9">Email:</span> [email protected]</h2></a>
<h2 class="tr white"><span class="dwyl-dark-gray lh-copy fw9">Address:</span> dwyl, First Floor, <br>149 Fonthill Rd,<br> London, N4 3HF, UK</h2>
<p class="tr dwyl-dark-gray">(We'll get back to you within 24 hours)</p>
</div>
</div>
<div class="dib-ns bg-white pt4 pa2 shadow-4 ml3-ns ml3-m ml4-l w-40-ns">
<form id="gform" method="POST" class="tc tl-ns" action="https://script.google.com/a/dwyl.com/macros/s/AKfycbzWvg1lK6-FddTv8gQxiUW76FCtC_-pD05rZpuurI4_5sST3eI/exec">
<!-- change the form action to your script url -->
<div class="mt2 ml3">
<label for="name" class="db mb2 tl pl3 pl0-ns">Your Name</label>
<input id="name" name="name" class="br2 ba dwyl-b--dark-gray pa2 w-90 border-box" placeholder="Tim Berners-Lee" />
</div>
<div class="mt3 ml3">
<label for="email" class="db mb2 tl pl3 pl0-ns">Email Address</label>
<input id="email" name="email" class="br2 ba dwyl-b--dark-gray pa2 w-90 border-box" type="email" value="" required placeholder="[email protected]" />
</div>
<div class="mt3 ml3">
<label for="message" class="db mb2 tl pl3 pl0-ns">Message</label>
<textarea id="message" name="message" class="br2 ba w-90 dwyl-b--dark-gray pa2" rows="10" placeholder="What problem can we solve for you?"></textarea>
</div>
<button class="bn dib link mt3 mb3 ph3 pv2 dwyl-bg-orange white br2 f5 ml3 shadow-4 pointer montserrat">
<i class="fa fa-paper-plane"></i> Say Hello
</button>
</form>
<div style="display:none;" class="tc pb4 dwyl-dark-gray" id="thankyou_message">
<h2>Thanks for contacting us!</h2>
<h2>We will get back to you soon!</h2>
</div>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript" src="/js/app_contact_form_handler.js"></script>
<!-- END -->
</div>
</div>
</section>
<footer class="dwyl-bg-dark-gray white pt1 pt3-ns pb4 tc center">
<div class="bb b--white w-90-ns w-80 center">
<ul class="list tc pl0 pt3 pb3-ns mv0 f3 f5-ns ">
<li class="ph4 fw3 f6 dib-ns pv2"><a href="/" class="white link">Home</a></li>
<li class="ph4 fw3 f6 dib-ns pv2"><a href="/portfolio" class="white link">Portfolio</a></li>
<li class="ph4 fw3 f6 dib-ns pv2"><a href="/careers" class="white link">Careers</a></li>
<li class="ph4 fw3 f6 dib-ns pv2"><a href="/community" class="white link">Community</a></li>
</ul>
<a href="https://twitter.com/dwyl" class="link f0" >
Twitter
<i class="fa fa-twitter pr4 ph4-ns pb4 dwyl-light-gray f2" aria-hidden="true"></i>
</a>
<a href="https:/dwyl" class="link f0" >
GitHub
<i class="fa fa-github pl4 ph4-ns pb4 dwyl-light-gray f2" aria-hidden="true"></i>
</a>
</div>
<p class="w-80 w-90-ns center f7 pt2-ns">
Copyright 2019 © DWYL LTD, company number 09525434 registered in England & Wales at First Floor, 149 Fonthill Rd, London N4 3HF. All rights reserved.
</p>
<img src="/img/common/dwyl-heart-only-logo.png" width="50" alt="dwyl heart logo" class="pv4">
</footer>
<section id="cookie-notification" class="w-100 dwyl-bg-dark-gray bottom-0 fixed h-auto tc-ns tl ph4-ns pt3-ns pb2-ns pt3 ph3 ">
<p class="white di f4-ns">This site uses cookies to improve your experience, your
continued use is considered to be consent. <span class="yes-script">Click this button to not see
this message again</span><noscript>This message will continue to show, as you have Javascript disabled.</noscript></p>
<span class="yes-script">
<button class="f6 link dim br3 ph3 pv2 mb2 di-ns white dwyl-bg-mint bn b mb2-ns mh1 mt2 mt0-ns mh1-ns db center" id="cookie-ok">Ok</button>
</span>
</section>
<script src="/js/script.js"></script>
</body>
</html>