-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
339 lines (317 loc) · 14.3 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
<!DOCTYPE HTML>
<!--
by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html lang="en">
<head>
<title>Founders & Coders, Tech for Better</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Meta tags for link sharing on Twitter and Facebook-->
<meta property="og:url" content="https://techforbetter.foundersandcoders.com/">
<meta property="og:title" content="Founders & Coders, Tech for Better">
<meta property="og:description" content="A pro bono programme for nonprofits to design, test and build new digital service ideas using developers in London and Gaza.">
<meta property="og:image" content="https://raw.githubusercontent.com/foundersandcoders/techforbetter-website/master/images/social-preview.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://techforbetter.foundersandcoders.com/">
<meta name="twitter:title" content="Founders & Coders, Tech for Better">
<meta name="twitter:description" content="A pro bono programme for nonprofits to design, test and build new digital service ideas using developers in London and Gaza.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/foundersandcoders/techforbetter-website/master/images/social-preview.png">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
</head>
<body class="preload">
<div id="body">
<div class="body" id="body-left"></div>
</div>
<header>
<div id="header-background">
<a href="https://foundersandcoders.com/" target="_blank"><img id="fac_lightbulb" src="https://foundersandcoders.com/assets/fac-logo.png" alt="founders and coders logo" /></a>
<h1><a href="https://foundersandcoders.com/" target="_blank">Founders & Coders</a></h1>
<h2>Tech for better</h2>
<p>A pro bono programme for nonprofits to design, test and build new digital service ideas using developers in London and Gaza</p>
<a href="#find-out-more">
<button class="button">Find out more</button>
</a>
<a href="https://airtable.com/shrMtNWdsGQQs65mO" target="_blank">
<button class="button">Apply</button>
</a>
<div>
</header>
<main>
<section id="find-out-more">
<div class="border">
<h2 class="section-header">
Build an app that helps you do what you do, but better.
</h2>
</div>
<p id="intro">
Our developers will work closely with you to identify your needs, then build an app that meets them. The only thing it will cost is your time.
</p>
<div class="grid build-grid">
<img class="build-object" src="images/workshop.jpg" alt="developers gathered around a wall of post-it notes">
<div class="build-object">
<h3>STEP 1: INTRODUCTORY WORKSHOPS</h3>
<p>Start with an introductory discovery workshop with us to discuss your needs and prepare a small user research exercise, then return a couple of weeks later for a definition workshop to decide on the area we are going to focus on for the app build.
</p>
</div>
<div class="build-object" id="swap">
<h3>STEP 2: APP DEVELOPMENT</h3>
<p>Our developers will spend one week designing your app followed by two weeks building a mobile web application that you can test with users.
</p>
</div>
<img class="build-object" src="images/design.jpg" alt="developers working on computers">
</div>
</section>
<section id="faq">
<div class="border">
<h2 class="section-header">
Your questions answered
</h2>
</div>
<h3>
How will this programme benefit me?
</h3>
<p>
You will gain experience working with a software development team, you will see your ideas take shape in digital form, and you will get a working mobile web app that you can test with users.
</p>
<h3>
What is the total time commitment required of me?
</h3>
<p>
After the initial workshops, around 20 hours over the one-month product development period, testing the app, giving feedback and meeting with the developers.
</p>
<h3>
What is a web app?
</h3>
<p>
A web app is a website that looks and feels like a mobile app. This means that users won’t have to download anything from an app store. Web apps can be accessed by anyone using a web browser on a computer, tablet, or smartphone.
</p>
<h3>
What sorts of apps do you build?
</h3>
<p>
Take a look at our portfolio below for a selection of our past projects.
</p>
<h3>
How many places are available on this programme?
</h3>
<p>
We have 20 places on the introductory workshops and 10 app development places secured for this year. We are currently identifying other potential sources of funding to increase our capacity in 2019.
</p>
<h3>
How do you decide which organisations you’ll work with?
</h3>
<p>
We are open to working with any organisation that aims to make positive social change and with committed individuals who are serious about using digital technology for social impact.
</p>
<h3>
What if I want to continue development after the programme ends?
</h3>
<p>
We are in the process of identifying potential sources to fund further development of projects.
</p>
<h3>
Why are you running this programme?
</h3>
<p>
This programme provides an opportunity for our developers in both London and Gaza to gain experience, improve their employability, and work on projects that make a real difference to people’s lives.
</p>
<h3>How do I apply?</h3>
<p id="please-apply">Please complete and submit the application form:</p>
<a href="https://airtable.com/shrMtNWdsGQQs65mO" target="_blank">
<button class="button">Apply</button>
</a>
<h3>Have any more questions?</h3>
<a href="#get-in-touch">
<button class="button">Get in touch</button>
</a>
</section>
<section id="about-us">
<div class="border">
<h2 class="section-header">
About us
</h2>
</div>
<p>
<a href="https://foundersandcoders.com/" target="_blank">Founders & Coders CIC</a> is a UK-based nonprofit that develops and runs tuition-free training programmes in web app development, guided by our core values of cooperation, inclusion and social impact.
</p>
<p>
Our London programme, established in 2014, is largely funded by the employers who hire our graduates. In 2017, we established campuses in Nazareth and in Gaza.
</p>
<p>
Youth unemployment in Gaza is among the highest in the world and the <em>Tech for Better</em> programme provides a rare opportunity for our developers there to gain experience working on real projects with overseas clients.
</p>
</section>
<section id="portfolio">
<div class="border">
<h2 class="section-header">Portfolio</h2>
</div>
<div id="modal">
<span id="close-modal">×</span>
<div id='modal-image-container'>
<img src="" alt="image of mobile web app" id="modal-image">
</div>
<div>
<h1 id="caption-title"></h1>
<p id="caption-paragraph"></p>
</div>
</div>
<div class="grid portfolio-grid">
<div class="portfolio-item">
<img id="little-window" src='images/littlewindow.png' alt='screenshot of little window chatbot' onclick="renderModal(this)"/>
<div class="portfolio-overlay">
<div class="portfolio-overlay-text">Little Window</div>
</div>
</div>
<div class="portfolio-item">
<img id="breathe-with-me" src='images/breath-with-me.png' alt='screenshot of breathe with me app' onclick="renderModal(this)" />
<div class="portfolio-overlay">
<div class="portfolio-overlay-text">Breathe with Me</div>
</div>
</div>
<div class="portfolio-item">
<img id="courtauld" src='images/courtauld.png' alt='screenshot of courtauld volunteer app' onclick="renderModal(this)" />
<div class="portfolio-overlay">
<div class="portfolio-overlay-text">Courtauld Institute of Art</div>
</div>
</div>
<div class="portfolio-item">
<img id="all-about-me" src='images/all-about-me.png' alt='screenshot of all about me app introductory screen' onclick="renderModal(this)" />
<div class="portfolio-overlay">
<div class="portfolio-overlay-text">All About Me</div>
</div>
</div>
<div class="portfolio-item">
<img id="grow" src='images/grow.png' alt='screenshot of grow app, showing example goals' onclick="renderModal(this)" />
<div class="portfolio-overlay">
<div class="portfolio-overlay-text">Grow</div>
</div>
</div>
<div class="portfolio-item">
<img id="echo" src='images/echo.png' alt='screenshot of echo app showing the user input for creating a memory' onclick="renderModal(this)" />
<div class="portfolio-overlay">
<div class="portfolio-overlay-text">Echo</div>
</div>
</div>
</div>
</div>
</section>
<!--
<section>
<div class="border">
<h2 class="section-header">People We've Worked With</h2>
</div>
<div class="grid partners-grid">
<a href="https://www.annafreud.org/" target="_blank">
<img class="partners-item" src='images/portfolio/anna_freud.png' alt="anna freud logo" /></a>
<a href="http://www.bbk.ac.uk/" target="_blank">
<img class="partners-item" src='images/portfolio/birkbeck.png' alt="birkbeck college logo" /></a>
<a href="http://cindex.camden.gov.uk/kb5/camden/cd/home.page" target="_blank">
<img class="partners-item" src='images/portfolio/camden.png' alt="camden council logo" /></a>
<a href="https://wearecast.org.uk/" target="_blank">
<img class="partners-item" src='images/portfolio/cast.png' alt="centre for acceleration of social technology logo" /></a>
<a href="https://www.learningtrust.co.uk/" target="_blank">
<img class="partners-item" src='images/portfolio/hackney_learning_trust.png' alt="hackney learning trust logo" /></a>
<a href="https://www.england.nhs.uk/" target="_blank">
<img class="partners-item" src='images/portfolio/nhs.png' alt="nhs england logo" /></a>
<a href="https://onpurpose.org/en/" target="_blank">
<img class="partners-item" src='images/portfolio/on_purpose.png' alt="on purpose logo" /></a>
<a href="https://www.qmul.ac.uk/" target="_blank">
<img class="partners-item" src='images/portfolio/queen_mary_uni.png' alt="queen mary university logo"/></a>
<a href="http://www.roundabouthomeless.org/" target="_blank">
<img class="partners-item" src='images/portfolio/roundabout.png' alt="roundabout homeless charity logo" /></a>
<a href="https://www.royalholloway.ac.uk/" target="_blank">
<img class="partners-item" src='images/portfolio/royal_holloway.png' alt="royal holloway logo"/></a>
<a href="http://www.safelives.org.uk/" target="_blank">
<img class="partners-item" src='images/portfolio/safe_lives.png' alt="safe lives logo" /></a>
<a href="http://safertogether.org.uk/" target="_blank">
<img class="partners-item" src='images/portfolio/safer_together.png' alt="safer together logo"/></a>
</div>
</section>
-->
<section>
<div class="border">
<h2 class="section-header">Sponsored by</h2>
</div>
<div class="sponsor-container">
<a href="http://intersticia.com.au/foundation/" target="_blank">
<img class="sponsor-item" src='images/portfolio/intersticia_logo.jpg' alt="intersticia logo" />
</a>
</div>
</section>
</main>
<footer>
<div id="footer">
<div class="footer" id="footer-left"></div>
</div>
<section id="contact">
<div class="border" id="get-in-touch">
<h2 class="section-header">Get in Touch</h2>
</div>
<form action="https://formspree.io/[email protected]" method="POST">
<div class="form-line">
<input class="form-input form-input-top-line" type="text" name="name" aria-label="name" placeholder="Name">
<input class="form-input form-input-top-line" type="email" name="_replyto" aria-label="email" placeholder="Email">
</div>
<div class="form-line">
<textarea id="message" class="form-input" name="message" aria-label="message" placeholder="Message" rows="8"></textarea>
</div>
<div>
<input class="button" type="submit" value="Send Message">
</div>
<!-- REDIRECT ROUTE HERE -->
<input type="hidden" name="_next" value="/" />
</form>
<div class="icon-container">
<a href="https://twitter.com/founderscoders" class="icon twitter">
<span class="icon-label">Twitter</span>
<img src="./assets/twitter-icon.svg" alt='twitter icon'>
</a>
<a href="https://www.facebook.com/foundersandcoders/" class="icon facebook">
<span class="icon-label">Facebook</span>
<img src="./assets/facebook-icon.svg" alt='facebook icon'>
</a>
<a href="https://www.instagram.com/founderscoders/" class="icon instagram">
<span class="icon-label">Instagram</span>
<img src="./assets/instagram-icon.svg" alt='instagram icon'>
</a>
<a href="https://github.com/foundersandcoders" class="icon github">
<span class="icon-label">Github</span>
<img src="./assets/github-icon.svg" alt='github icon'>
</a>
</div>
<div id="attribution">Icons made by
<a href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from
<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> licensed by
<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
</div>
</section>
</footer>
<script src="assets/js/modal.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/main.js"></script>
<script> // scroll effect when navigating inside webpage
$(document).ready(function() {
$("a").on("click", function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$("html, body").animate(
{
scrollTop: $(hash).offset().top
},
800,
function() {
window.location.hash = hash;
}
);
}
});
});
</script>
</body>
</html>