-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
398 lines (289 loc) · 15.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YYGH58SE7V"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-YYGH58SE7V');
</script>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@watotocoding" />
<meta name="twitter:title" content="Watoto Coding" />
<meta name="twitter:description" content="Tech skills for the kids in the slums of Nairobi" />
<meta name="twitter:image" content="https://www.watotocoding.com/media/girlscoding.jpeg" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable=yes>
<meta name="description" content="We bring tech skills to the kids living in the slums of Kenya">
<meta name="keywords"
content="kids, tech, coding, education, non-profit, lessons, learn, charity, Africa, Kenya, slums, Nairobi, stem, steam, skills">
<meta name="author" content="Watoto coding">
<meta name="title" content="Watoto coding">
<meta property="og:type" content="website" />
<meta property="og:title" content="Watoto Coding" />
<meta property="og:description" content="We bring tech skills to the kids living in the slums of Kenya">
<meta property="og:image" content="https://www.watotocoding.com/media/girlscoding.jpeg">
<link rel="icon" type="image/x-icon" href="https://www.watotocoding.com/media/Watoto-New-Logo.webp">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Watoto Coding Hub</title>
<script src="https://app.formester.com/widget/popup.js" type="module" ></script>
</head>
<body>
<section id="navigation">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg py-3 fixed-top">
<div class="container"><a href="#hero" >
<img class="img-fluid logo-icon" src="media/Watoto-New-Logo.webp" alt="logo of Watoto Coding">
</a>
<button class="navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon middle-bar"></span>
<span class="toggler-icon bottom-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#showcase">Home - </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#subjects-section">What we teach - </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Kibera - </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team - </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fundraising">Fundraising - </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#volunteer">Volunteer - </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#visit">Visit - </a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://podcasters.spotify.com/pod/show/watotocoding" target="_blank">Podcast - </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</section>
<section class="showcase" id="showcase">
<header>
<div class="toggle"></div>
</header>
<video src="media/hero-video.mp4" muted loop autoplay playsinline></video>
<div class="overlay"></div>
<div class="hero-text">
<h1>Watoto Coding Hub</h1>
<h2>We expose children and young people from underserved communities
to modern tech skills to dramatically change the course of their lives.
</h2>
<p>As a Kenyan registered nonprofit, we untap the talents that
are still undiscovered due to the lack of access to technology.
</p>
<a href="#subjects-section">Learn more</a>
<a href="#fundraising">Donate</a>
</div>
<ul class="social">
<li><a href="https://www.facebook.com/storozetu" target="_blank"
rel="noopener noreferrer"><img src="https://i.ibb.co/x7P24fL/facebook.png" aria-label="Facebook" alt="Icon of Facebook" ></a></li>
<li><a href="https://twitter.com/watotocoding" target="_blank"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"
rel="noopener noreferrer" aria-label="Twitter" alt="Icon of twitter"></a></li>
<li><a href="https://www.instagram.com/watoto_coding_hub/" target="_blank"><img
src="https://i.ibb.co/ySwtH4B/instagram.png" aria-label="Instagram" alt="icon of instagram" rel="noopener noreferrer"></a></li>
</ul>
</section>
</section>
<section id="subjects-section">
<div class="section-title">
<h1>What do we do?</h1>
<h2 class="subjects-intro">An after school programme to teach modern tech skills
to 80 learners from Kibera and Vihiga Maseno. 43 girls and 37 boys.
</h2>
</div>
<div class="subjects">
<div class="subject-1"><img class="img-fluid" loading="lazy" alt="image that represents the coding subject taught to kids" src="media/code.webp">
<h2>Coding and mobile app dev</h2>
</div>
<div class="subject-2"><img loading="lazy" class="img-fluid" alt="image that represents the 3D design subject taught to kids" src="media/3D.webp">
<h2>Engineering</h2>
</div>
<div class="subject-3"><img loading="lazy" class="img-fluid" alt="image that represents the game design subject taught to kids" src="media/game.webp">
<h2>Game Design</h2>
</div>
</p>
</div>
</section>
<div class="gallery">
<img src="media/galleryimage4.webp" alt="A kenyan girl doing an unplugged coding activity on paper" class="gallery__image">
<img src="media/galleryimage1.webp" alt="A group of kenyan kids on the floor doing unplugged coding activities" class="gallery__image">
<img src="media/galleryimage2.webp" alt="Kenyan kids learning how to code in the classroom" class="gallery__image">
<img src="media/galleryimage3.webp" alt="Kenyan mothers and volunteers make food for the kids" class="gallery__image">
</div>
<div id="modal" class="modal">
<span class="modal__close">×</span>
<img src="" alt="Modal Image" class="modal__image">
</div>
<div class="section-title" id="about-section">
<h1>About</h1>
<h2>We work in Kibera, a vast slum in Kenya’s capital city, Nairobi, currently the largest unplanned settlement in
the world.</h2>
</div>
<section id="about">
<div class="kibera-1">
<h3>It’s unclear how many people live in Kibera but estimates range from 1 million to 1.5million people living in
just 2.25 square kilometres.
</h3>
</div>
<div class="kibera-2">
<h3>Residents live in cramped one-roomed homes made of mud and iron sheets. Water is collected in
jerry cans from water points around the slum.
</h3>
</div>
<div class="kibera-3">
<h3>Life is hard in Kibera but many face the challenges with strength. It is a lively place to
be. As you walk around you hear music blaring and people talking.
</h3>
</div>
<div class="kibera-4">
<h3>There are no public schools, hospitals or clinics in Kibera though there are many run by community members and
NGOs.
</h3>
</div>
</div>
</section>
<div class="section-title">
<h1>Team</h1>
<h2>We have a dedicated team of Board members, instructors, friends, mentors and community members who volunteer their time and expertise to maximize Watoto Coding impact.
</h2>
</div>
<section id="team">
<div class="founder-grid">
<div class="team-photo"><img loading="lazy" class="img-fluid" alt="photo of Leonard, founder of Watoto Coding" loading="lazy" src="media/leonard.webp"></div>
<div class="team-bio">
<p>I was born and raised in Kibera slums, I am a modern tech educator and founder at Watoto Coding Hub, I have had the privilege of instilling a love for technology and digital literacy in students from diverse backgrounds and thought of giving back to my community in the same capacity. My commitment to
fostering a dynamic and inclusive learning environment has allowed me to inspire curiosity and creativity among learners
within underserved communities, encouraging them to explore
and gain exposure in the world of modern technology.</p>
</div>
</div>
<div class="founder-grid">
<div class="team-photo"><img loading="lazy" class="img-fluid" alt="photo of Costanza, co-founder of Watoto Coding" loading="lazy" src="media/costanzaprofile.webp"></div>
<div class="team-bio">
<p>
Costanza Casullo is from Italy and joined Watoto Coding as a volunteer in 2022.
She is a techie passionate about web design and game development and currently
helps Watoto Coding with social media, outreach, creating the website and curriculum development.
</p>
</div>
</div>
</section>
<section id="fundraising">
<div>
</div>
<div class="section-title">
<img class="img-fluid icon-img" alt="an icon showing a box with a heart and coins going inside" src="media/donate-icon.webp">
<h1>Fundraising</h1>
<h2>Kids do not have laptops or a stable internet connection and it's
becoming increasingly hard for us to provide them with the education they deserve.
See our fundraising document below.
</h2>
<a href="https://www.mchanga.africa/fundraiser/58416"
rel="noopener noreferrer" target="_blank">Donate</a>
<a href="https://www.canva.com/design/DAFEiSc3UjA/view?utm_content=DAFEiSc3UjA&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink"
rel="noopener noreferrer" target="_blank">View the document</a>
</div>
<div class="section-title" id="volunteer">
<img class="img-fluid icon-img" alt="an icon showing hands on top of each other symbolising volunteers helping each other" src="media/volunteer-icon.webp">
<h1>Volunteer</h1>
<h2>Do you want to start your own fundraiser to support us and involve your
family, friends and colleagues?
</h2>
<a href="https://app.formester.com/f/4db46fb0-eb17-432b-ad61-80aff8357b52"
rel="noopener noreferrer" target="_blank">How?</a>
</div>
<div class="section-title" id="visit">
<img class="img-fluid icon-img" alt="an icon showing a random map with a pin" src="media/visit-icon.webp">
<h1>Visit us in person</h1>
<h2>Come to Kibera and meet the founder and our kids.
</h2>
<formester-popup id="e876c2e6-9502-4079-97fc-ab8965cdc703" width="900px" height="95%" ></formester-popup>
<button class="general-btn" onclick="Formester.openPopup('e876c2e6-9502-4079-97fc-ab8965cdc703')">Book a visit</button>
</div>
<div class="section-title" id="visit">
<img class="img-fluid icon-img" alt="an icon a laptop with people having a video meeting" src="media/virtual.webp">
<h1>Virtual visit</h1>
<h2>For anyone who wants to experience our teaching approach and meet our founder and kids virtually.
</h2>
<formester-popup id="e876c2e6-9502-4079-97fc-ab8965cdc703" width="900px" height="95%" ></formester-popup>
<a href="https://tidycal.com/watotocoding/watoto-coding-virtual-visit-july-august"
rel="noopener noreferrer" target="_blank">Book a virtual visit</a>
</div>
</section>
<div class="section-title-contact">
<h1>Contact</h1>
</div>
<section id="contact">
<div class="contact-container">
<div class="email">
<h2>Email us</h2> </a>
<a href="mailto:leonard@watotocoding.com
"rel="noopener noreferrer"><p>leonard@watotocoding.com</p></a>
</div>
<div class="call">
<h2>Call us</h2> <a href="tel:+254 759 783 366
"rel="noopener noreferrer"><p>+254 759 783 366</p></a>
<a href="tel:+39 339 530 1885
"rel="noopener noreferrer"><p>+39 339 530 1885</p></a>
</div>
<div class="podcast">
<h2>Podcast</h2> <a href="https://anchor.fm/watotocoding" target="_blank"><img class="img-fluid podcast-img" src="media/mic-icon.webp" alt="icon of a microphone"></a>
</div>
<h2 class="newsletter">Subscribe to our newsletter!</h2>
<iframe title="iframe to subscribe to the newsletter" src="https://embeds.beehiiv.com/a98ce480-96a1-4bc7-9ff0-afd0f3605950?slim=true" data-test-id="beehiiv-embed" frameborder="0" scrolling="no" style="margin: 0; border-radius: 0px !important; background-color: transparent;"></iframe>
</div>
</section>
<section class="footer">
<h1>Watoto Coding Community Hub <br>
Kibera-Nairobi, Kenya
<br>
A charity registered under the NGO Coordination Act No 19 of 1990
</h1>
<div class="icons">
<a href="https://www.facebook.com/storozetu" target="_blank" aria-label="Facebook"
rel="noopener noreferrer"><i class="fa fa-facebook" aria-hidden="true" ></i></a>
<a href="https://twitter.com/watotocoding" target="_blank" rel="noopener noreferrer" aria-label="Twitter"><i
class="fa fa-twitter" ></i></a>
<a href="https://www.instagram.com/watoto_coding_hub/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><i
class="fa fa-instagram" ></i></a>
</div>
</section>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
<script>
kofiWidgetOverlay.draw('watotocoding', {
'type': 'floating-chat',
'floating-chat.donateButton.text': 'Donate',
'floating-chat.donateButton.background-color': '#5cb85c',
'floating-chat.donateButton.text-color': '#fff'
});
</script>
</body>
</html>