-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
474 lines (469 loc) · 32.7 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
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GenderGap.AFRICA</title>
<link rel="stylesheet" href="styles.min.css?v=1">
<!--Custom Bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Twitter Summary Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="https://gendergap.africa">
<meta name="twitter:creator" content="@Code4Africa">
<meta name="twitter:description" content="Explore inequality of income across African countries">
<meta name="twitter:title" content="Gender Gap Africa">
<meta name="twitter:image" content="https://gendergap.africa/images/social-sharing.png">
<meta name="twitter:image:alt" content="Gender Gap logo">
<!-- The Open Graph protocol -->
<meta property="og:title" content="Gender Gap Africa">
<meta property="og:type" content="article">
<meta property="og:image" content="https://gendergap.africa/images/social-sharing.png">
<meta property="og:url" content="https://gendergap.africa">
<meta property="og:description" content="Explore inequality of income across African countries">
</head>
<body>
<main>
<section class="section section--homepage section--active">
<div class="section__header u-vertical-and-horizontal-centering u-background-dark u-text-center">
<div class="hero">
<a class="hero__logo logo" href="/">
<img alt="Gender Gap" src="images/logo-white.svg">
</a>
<h1 class="hero__title">Explore inequality of income across African countries</h1>
</div>
</div>
<div class="section__body u-vertical-and-horizontal-centering u-background-white">
<button id="homepage-button" class="button button--red">
<span class="button__text" onclick="ga('send', 'event', 'button', 'click', 'Track Calculate');">Calculate</span><!--
--><img class="button__icon" alt="" src="images/icons/arrow-thin.svg">
</button>
</div>
</section>
<section class="section section__form--country">
<header class="section__header section--form__wrapper section--form__wrapper--small-viewport">
<a href="/" class="logo">
<img alt="Gender Gap" src="images/logo.svg">
</a>
</header>
<div class="back">
<a id="country-form-back" class="back__link"><img src="images/icons/back.svg" alt="Back" class="back__arrow" />Back</a>
</div>
<div class="section__body form">
<div class="section--form__wrapper section--form__wrapper--small-viewport">
<h2 class="form__subtitle">Tell us about yourself</h2>
<p class="form__paragraph">
<span class="form__line">Where are you from?</span>
<span class="form__field">
<span class="u-suffix-space">
<select id="field-country" onChange="ga('send', 'event', 'Form Event','Select County', this.options[this.selectedIndex].text]);">
<option selected disabled="disabled">Your country</option>
</select>
</span>
</span>
</p>
</div>
<div class="section--form__wrapper form__button">
<button id="country-form-button" class="button button--red">
<span class="button__text">Next</span><!--
--><img class="button__icon" alt="" src="images/icons/arrow.svg">
</button>
</div>
</div>
<div class="overlay"></div>
</section>
<section class="section section__form--gender">
<header class="section__header section--form__wrapper section--form__wrapper--small-viewport">
<a href="/" class="logo">
<img alt="Gender Gap" src="images/logo.svg">
</a>
</header>
<div class="back">
<a id="gender-form-back" class="back__link"><img src="images/icons/back.svg" alt="Back" class="back__arrow" />Back</a>
</div>
<div class="section__body form">
<div class="section--form__wrapper section--form__wrapper--small-viewport">
<h2 class="form__subtitle">Tell us about yourself</h2>
<p class="form__paragraph">
<span class="form__line">What is your gender?</span>
<span class="form__field">
<input type="radio" name="gender-radio" id="gender-male" value="male" />
<label class="field--radio" for="gender-male">Male</label>
<input type="radio" name="gender-radio" id="gender-female" value="female" checked />
<label class="field--radio" for="gender-female">Female</label>
</span>
</p>
</div>
<div class="section--form__wrapper form__button">
<button id="gender-form-button" class="button button--red">
<span class="button__text">Next</span><!--
--><img class="button__icon" alt="" src="images/icons/arrow.svg">
</button>
</div>
</div>
</div>
<div class="overlay"></div>
</section>
<section class="section section__form--salary">
<header class="section__header section--form__wrapper section--form__wrapper--small-viewport">
<a href="/" class="logo">
<img alt="Gender Gap" src="images/logo.svg">
</a>
</header>
<div class="back">
<a id="salary-form-back" class="back__link"><img src="images/icons/back.svg" alt="Back" class="back__arrow" />Back</a>
</div>
<div class="section__body form">
<div class="section--form__wrapper section--form__wrapper--small-viewport">
<h2 class="form__subtitle">Tell us about yourself</h2>
<p class="form__paragraph">
<span class="form__line">How much do you make per month?</span>
<span class="form__field">
<input id="field-salary" type="number" value="" placeholder="e.g. 1,000" data-subline="Enter your monthly salary">
<span class="u-suffix-space">
<select id="field-currency">
<option selected disabled="disabled">Currency</option>
</select>
</span>
</span>
</p>
</div>
<div class="section--form__wrapper form__button">
<button id="salary-form-button" class="button button--red">
<span class="button__text">Get result</span>
<img class="button__icon" alt="" src="images/icons/arrow.svg">
</button>
</div>
</div>
</div>
<div class="overlay"></div>
</section>
<section class="section section__visualizations--local layout">
<header class="section__header section--form__wrapper section--form__wrapper--small-viewport">
<a href="/" class="logo">
<img alt="Gender Gap" src="images/logo.svg">
</a>
</header>
<div class="back"><a id="local-visualization-back" class="back__link"><img src="images/icons/back.svg" alt="Back" class="back__arrow" />Back</a>
</div>
<div class="section__body">
<div class="section--visualizations__wrapper section--form__wrapper section--form__wrapper--small-viewport">
<h2 class="gap__narrative">
<span class="gap__you">As a <span class="gap__man-woman"></span> you make <span class="gap__amount"></span><span class="gap__currency"></span></span>
<span class="gap__them">If you were a <span class="gap__man-woman-other"></span> you'd make <span class="gap__amount-other"></span><span class="gap__currency-other"></span> <span class="gap__more-less-other"></span> per month</span>
</h2>
<div class="gap__bars-vertical">
<div class="gap__bars">
<div class="gap__bar gap__bar--you">
<span class="gap__bar-key">
<img class="gap__icon--woman" src="images/icons/woman.svg" alt="Woman symbol" />
<img class="gap__icon--man" src="images/icons/man.svg" alt="Man symbol" />
<span class="gap__bar-text">Your salary</span>
</span>
<span class="gap__bar-salary">
<span class="gap__amount"></span>
<span class="gap__currency"></span>
</span>
</div>
</div>
<div class="gap__bars">
<div class="gap__bar gap__bar--them">
<span class="gap__bar-key">
<img class="gap__icon--woman" src="images/icons/woman.svg" alt="Woman symbol" />
<img class="gap__icon--man" src="images/icons/man.svg" alt="Man symbol" />
<span class="gap__bar-text"><span class="gap__gender-other"></span> salary estimate</span>
</span>
<span class="gap__bar-salary">
<span class="gap__bar-amount"></span>
<span class="gap__currency"></span>
</span>
</div>
</div>
</div>
<div class="gap__bottom-text">
<p class="gap__gender-split">In <span class="gap__country"></span> a man earns on average <strong><span class="gap__percent"></span>% <span class="gap__more-less"></span></strong> than a woman.</p>
<ul class="gap__social">
<li class="social-media__button">
<a id="twitter-button-inline-alt" class="social-media__link" href="#0">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-tw.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 16.7 13.57">
<title>social_tw</title>
<path class="cls-1" d="M16.7,1.61a6.84,6.84,0,0,1-2,.54A3.44,3.44,0,0,0,16.24.25a6.83,6.83,0,0,1-2.17.83A3.43,3.43,0,0,0,8.23,4.21,9.73,9.73,0,0,1,1.16.63,3.43,3.43,0,0,0,2.22,5.2,3.41,3.41,0,0,1,.67,4.78a3.43,3.43,0,0,0,2.75,3.4,3.48,3.48,0,0,1-1.55.06,3.42,3.42,0,0,0,3.2,2.38A6.91,6.91,0,0,1,0,12a9.7,9.7,0,0,0,5.25,1.54A9.69,9.69,0,0,0,15,3.38,7,7,0,0,0,16.7,1.61Z"/>
</svg>
<span class="social-media__text">Twitter</span>
</a>
</li>
<li class="social-media__button">
<a id="facebook-button-inline-alt" class="social-media__link" href="#0">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-fb.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 10.05 21.53">
<title>social_fb</title>
<path d="M6.68,7.05V5.2c0-1,.09-1.49,1.48-1.49H10V0h-3C3.48,0,2.23,1.8,2.23,4.83V7.05H0v3.71H2.23V21.53H6.68V10.76h3L10,7.05Z"/>
</svg>
<span class="social-media__text">Facebook</span>
</a>
</li>
<li class="social-media__button">
<a id="email-button-inline-alt" class="social-media__link" href="mailto:?subject=">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-mail.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 23.51 23.5">
<title>social_mail</title>
<path class="cls-2" d="M23.34.32,23.27.24,23.18.16A.72.72,0,0,0,22.55,0L.56,10.93l0,0a.71.71,0,0,0-.5.51.73.73,0,0,0,0,.38H0v0a.76.76,0,0,0,.1.21l.08.09.12.11.12.06.1.05,6.67,3.18,3.88,7.37a42.65,42.65,0,0,1,.11.22.77.77,0,0,0,.11.12l.09.08a.77.77,0,0,0,.21.1h0a.73.73,0,0,0,.38,0,.71.71,0,0,0,.5-.5l0,0L23.48,1A.72.72,0,0,0,23.34.32ZM2.43,11.65l16.4-8.14L7.62,14.13Zm9.39,9.5-3.15-6L20.22,4.22Z"/>
</svg>
<span class="social-media__text">Email</span>
</a>
</li>
<li class="social-media__button">
<a id="whatsapp-button-inline-alt" class="social-media__link" href="whatsapp://send?text="
data-action="share/whatsapp/share">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-whatsapp.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 41.93 41.93">
<title>WhatsApp</title>
<path id="WhatsApp" class="cls-1" d="M41.93,20.43A20.62,20.62,0,0,1,11.4,38.31L0,41.93,3.72,31a20.21,20.21,0,0,1-3-10.55,20.59,20.59,0,0,1,41.17,0ZM21.35,3.25A17.26,17.26,0,0,0,4,20.43,17,17,0,0,0,7.34,30.5L5.18,36.87l6.65-2.11A17.32,17.32,0,0,0,38.66,20.43,17.26,17.26,0,0,0,21.35,3.25Zm10.4,21.88c-.13-.21-.46-.33-1-.58s-3-1.46-3.45-1.63-.8-.25-1.14.25-1.3,1.63-1.6,2-.59.38-1.09.13a13.81,13.81,0,0,1-4.06-2.48,15.1,15.1,0,0,1-2.81-3.47c-.29-.5,0-.77.22-1s.51-.58.76-.88a3.36,3.36,0,0,0,.5-.84.91.91,0,0,0,0-.88C18,15.45,16.94,13,16.52,12s-.84-.83-1.13-.83-.63,0-1,0a1.86,1.86,0,0,0-1.35.63,5.6,5.6,0,0,0-1.77,4.18,9.69,9.69,0,0,0,2.06,5.18c.25.33,3.49,5.55,8.62,7.56S27.12,30,28,29.89s3-1.21,3.41-2.38A4.17,4.17,0,0,0,31.74,25.13Z"/>
</svg>
<span class="social-media__text">WhatsApp</span>
</a>
</li>
</ul>
<a class="gap__compare" id="local-visualization-link" href="#">See how <span class="gap__country"></span> compares to other countries</a>
</div>
</div>
</div>
</div>
</section>
<section class="section section__visualizations--global layout" >
<header class="section__header section--form__wrapper section--form__wrapper--small-viewport">
<a href="/" class="logo">
<img alt="Gender Gap" src="images/logo.svg">
</a>
</header>
<div class="back">
<a id="global-visualization-back" class="back__link"><img src="images/icons/back.svg" alt="Back" class="back__arrow" />Back</a>
</div>
<div class="section__body">
<div class="section--visualizations__wrapper section--form__wrapper section--form__wrapper--small-viewport">
<div class="global__local-wrapper">
<p class="global__local"><span class="global__shareable">In <span class="global__user-country"></span> men make on average <span class="global__user-currency">$</span><span class="global__user-difference"></span> more than women per month.</span> This is the <span class="global__rank"></span> <span class="global__superlative">largest</span> gap in Africa.</p>
<ul class="global__social">
<li class="social-media__button">
<a id="twitter-button-inline" class="social-media__link" href="#0">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-tw.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 16.7 13.57">
<title>social_tw</title>
<path class="cls-1" d="M16.7,1.61a6.84,6.84,0,0,1-2,.54A3.44,3.44,0,0,0,16.24.25a6.83,6.83,0,0,1-2.17.83A3.43,3.43,0,0,0,8.23,4.21,9.73,9.73,0,0,1,1.16.63,3.43,3.43,0,0,0,2.22,5.2,3.41,3.41,0,0,1,.67,4.78a3.43,3.43,0,0,0,2.75,3.4,3.48,3.48,0,0,1-1.55.06,3.42,3.42,0,0,0,3.2,2.38A6.91,6.91,0,0,1,0,12a9.7,9.7,0,0,0,5.25,1.54A9.69,9.69,0,0,0,15,3.38,7,7,0,0,0,16.7,1.61Z"/>
</svg>
<span class="social-media__text">Twitter</span>
</a>
</li>
<li class="social-media__button">
<a id="facebook-button-inline" class="social-media__link" href="#0">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-fb.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 10.05 21.53">
<title>social_fb</title>
<path d="M6.68,7.05V5.2c0-1,.09-1.49,1.48-1.49H10V0h-3C3.48,0,2.23,1.8,2.23,4.83V7.05H0v3.71H2.23V21.53H6.68V10.76h3L10,7.05Z"/>
</svg>
<span class="social-media__text">Facebook</span>
</a>
</li>
<li class="social-media__button">
<a id="email-button-inline" class="social-media__link" href="mailto:?subject=">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-mail.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 23.51 23.5">
<title>social_mail</title>
<path class="cls-2" d="M23.34.32,23.27.24,23.18.16A.72.72,0,0,0,22.55,0L.56,10.93l0,0a.71.71,0,0,0-.5.51.73.73,0,0,0,0,.38H0v0a.76.76,0,0,0,.1.21l.08.09.12.11.12.06.1.05,6.67,3.18,3.88,7.37a42.65,42.65,0,0,1,.11.22.77.77,0,0,0,.11.12l.09.08a.77.77,0,0,0,.21.1h0a.73.73,0,0,0,.38,0,.71.71,0,0,0,.5-.5l0,0L23.48,1A.72.72,0,0,0,23.34.32ZM2.43,11.65l16.4-8.14L7.62,14.13Zm9.39,9.5-3.15-6L20.22,4.22Z"/>
</svg>
<span class="social-media__text">Email</span>
</a>
</li>
<li class="social-media__button">
<a id="whatsapp-button-inline" class="social-media__link" href="whatsapp://send?text="
data-action="share/whatsapp/share">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-whatsapp.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 41.93 41.93">
<title>WhatsApp</title>
<path id="WhatsApp" class="cls-1" d="M41.93,20.43A20.62,20.62,0,0,1,11.4,38.31L0,41.93,3.72,31a20.21,20.21,0,0,1-3-10.55,20.59,20.59,0,0,1,41.17,0ZM21.35,3.25A17.26,17.26,0,0,0,4,20.43,17,17,0,0,0,7.34,30.5L5.18,36.87l6.65-2.11A17.32,17.32,0,0,0,38.66,20.43,17.26,17.26,0,0,0,21.35,3.25Zm10.4,21.88c-.13-.21-.46-.33-1-.58s-3-1.46-3.45-1.63-.8-.25-1.14.25-1.3,1.63-1.6,2-.59.38-1.09.13a13.81,13.81,0,0,1-4.06-2.48,15.1,15.1,0,0,1-2.81-3.47c-.29-.5,0-.77.22-1s.51-.58.76-.88a3.36,3.36,0,0,0,.5-.84.91.91,0,0,0,0-.88C18,15.45,16.94,13,16.52,12s-.84-.83-1.13-.83-.63,0-1,0a1.86,1.86,0,0,0-1.35.63,5.6,5.6,0,0,0-1.77,4.18,9.69,9.69,0,0,0,2.06,5.18c.25.33,3.49,5.55,8.62,7.56S27.12,30,28,29.89s3-1.21,3.41-2.38A4.17,4.17,0,0,0,31.74,25.13Z"/>
</svg>
<span class="social-media__text">WhatsApp</span>
</a>
</li>
</ul>
</div>
<div class="global__countries">
<div class="global__countries-header">
<span class="global__header global__header--country">Country</span>
<span class="global__header global__header--female">Female <br />salary (avg)</span>
<span class="global__header global__header--male">Male <br />salary (avg)</span>
</div>
</div>
<p class="global__citation"><span>Source:</span> <a href="https://www.weforum.org/reports/global-gender-gap-report-2023" target="_blank" title="World Economic Forum, 2023">World Economic Forum, 2023</a></p>
</div>
</div>
</section>
<nav class="social-media">
<a id="share-button" class="social-media__title">
<span class="social-media__title-text">Share</span>
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__title-icon" viewBox="0 0 20.82 14.61">
<title>Share</title>
<path d="M20.32,6.08,12.58.17a.8.8,0,0,0-.5-.17.83.83,0,0,0-.83.83V4.16H9.17c-6,0-8.49,3.75-9.16,9.53a.81.81,0,0,0,.83.92.93.93,0,0,0,.71-.37,8.77,8.77,0,0,1,8-4.25h1.71v3.29a.83.83,0,0,0,.83.83.8.8,0,0,0,.5-.17L20.36,8A1.23,1.23,0,0,0,20.32,6.08Z"/>
</svg>
</a>
<div class="social-media__buttons">
<header class="section__header section--form__wrapper section--form__wrapper--small-viewport">
<a href="/" class="logo">
<img alt="Gender Gap" src="images/logo-white.svg">
</a>
</header>
<span id="share-close-button" class="social-media__close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.47 51.47">
<title>Close</title>
<line fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" x1="50.29" y1="1.18" x2="1.18" y2="50.29"/>
<line fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" x1="50.29" y1="50.29" x2="1.18" y2="1.18"/>
</svg>
</span>
<ul>
<li class="social-media__button">
<a id="twitter-button" class="social-media__link" href="#0">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-tw.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 16.7 13.57">
<title>social_tw</title>
<path class="cls-1" d="M16.7,1.61a6.84,6.84,0,0,1-2,.54A3.44,3.44,0,0,0,16.24.25a6.83,6.83,0,0,1-2.17.83A3.43,3.43,0,0,0,8.23,4.21,9.73,9.73,0,0,1,1.16.63,3.43,3.43,0,0,0,2.22,5.2,3.41,3.41,0,0,1,.67,4.78a3.43,3.43,0,0,0,2.75,3.4,3.48,3.48,0,0,1-1.55.06,3.42,3.42,0,0,0,3.2,2.38A6.91,6.91,0,0,1,0,12a9.7,9.7,0,0,0,5.25,1.54A9.69,9.69,0,0,0,15,3.38,7,7,0,0,0,16.7,1.61Z"/>
</svg>
<span class="social-media__text">Twitter</span>
</a>
</li>
<li class="social-media__button">
<a id="facebook-button" class="social-media__link" href="#0">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-fb.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 10.05 21.53">
<title>social_fb</title>
<path d="M6.68,7.05V5.2c0-1,.09-1.49,1.48-1.49H10V0h-3C3.48,0,2.23,1.8,2.23,4.83V7.05H0v3.71H2.23V21.53H6.68V10.76h3L10,7.05Z"/>
</svg>
<span class="social-media__text">Facebook</span>
</a>
</li>
<li class="social-media__button">
<a id="email-button" class="social-media__link" href="mailto:?subject=Calculate your gender gap in Africa!&body=Explore inequality of income across African countries">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-mail.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 23.51 23.5">
<title>social_mail</title>
<path class="cls-2" d="M23.34.32,23.27.24,23.18.16A.72.72,0,0,0,22.55,0L.56,10.93l0,0a.71.71,0,0,0-.5.51.73.73,0,0,0,0,.38H0v0a.76.76,0,0,0,.1.21l.08.09.12.11.12.06.1.05,6.67,3.18,3.88,7.37a42.65,42.65,0,0,1,.11.22.77.77,0,0,0,.11.12l.09.08a.77.77,0,0,0,.21.1h0a.73.73,0,0,0,.38,0,.71.71,0,0,0,.5-.5l0,0L23.48,1A.72.72,0,0,0,23.34.32ZM2.43,11.65l16.4-8.14L7.62,14.13Zm9.39,9.5-3.15-6L20.22,4.22Z"/>
</svg>
<span class="social-media__text">Email</span>
</a>
</li>
<li class="social-media__button">
<a id="whatsapp-button" class="social-media__link" href="whatsapp://send?text="
data-action="share/whatsapp/share">
<!-- <img class="social-media__icon" alt="" src="images/icons/social-whatsapp.svg"> -->
<svg xmlns="http://www.w3.org/2000/svg" class="social-media__icon" viewBox="0 0 41.93 41.93">
<title>WhatsApp</title>
<path id="WhatsApp" class="cls-1" d="M41.93,20.43A20.62,20.62,0,0,1,11.4,38.31L0,41.93,3.72,31a20.21,20.21,0,0,1-3-10.55,20.59,20.59,0,0,1,41.17,0ZM21.35,3.25A17.26,17.26,0,0,0,4,20.43,17,17,0,0,0,7.34,30.5L5.18,36.87l6.65-2.11A17.32,17.32,0,0,0,38.66,20.43,17.26,17.26,0,0,0,21.35,3.25Zm10.4,21.88c-.13-.21-.46-.33-1-.58s-3-1.46-3.45-1.63-.8-.25-1.14.25-1.3,1.63-1.6,2-.59.38-1.09.13a13.81,13.81,0,0,1-4.06-2.48,15.1,15.1,0,0,1-2.81-3.47c-.29-.5,0-.77.22-1s.51-.58.76-.88a3.36,3.36,0,0,0,.5-.84.91.91,0,0,0,0-.88C18,15.45,16.94,13,16.52,12s-.84-.83-1.13-.83-.63,0-1,0a1.86,1.86,0,0,0-1.35.63,5.6,5.6,0,0,0-1.77,4.18,9.69,9.69,0,0,0,2.06,5.18c.25.33,3.49,5.55,8.62,7.56S27.12,30,28,29.89s3-1.21,3.41-2.38A4.17,4.17,0,0,0,31.74,25.13Z"/>
</svg>
<span class="social-media__text">WhatsApp</span>
</a>
</li>
</ul>
</div>
</nav>
<div class="info">
<div class="info__background"></div>
<div class="info__content">
<h2 class="info__title">How does the tool work</h2>
<div class="info__copy">
<p>
<p>The Gender Gap tool uses <em><a href="https://www.weforum.org/publications/global-gender-gap-report-2023/in-full/appendix-b-8aaa913d30/#:~:text=________________________________________________________________________-,Economic%20Participation%20and%20Opportunity,-This%20subindex%20contains" target="_blank">Estimated Earned Income</a></em> data from the World Economic Forum's <a href="https://www.weforum.org/reports/global-gender-gap-report-2023" title="Mind the 100 Year Gap" target="_blank">Global Gender Gap Report 2023.</a><br> Following a methodology originally developed by the United Nations Development Programme (UNDP), the Global Gender Gap Index estimates the average income earned by women, relative to income earned by men, in a calculation that takes into account a country’s GDP per capita (US$), the share of women and men in the labour force, and their mean nominal wages. To account for globally rising income levels, beginning with 2018’s edition the report no longer caps the maximum income per capita value considered in the calculation. This follows UNDP’s own adjustment of the methodology and the fact that the $40,000 cap formerly used in previous editions of the Global Gender Gap Index had increasingly lost some of its ability to discern the level of gender-based income disparities among high-income nations such as the Nordics, the United States and the member states of the Gulf Cooperation Council. For a full overview of the 2016 methodology change, please refer to that report edition’s Appendix D.</p>
<p>GenderGap.AFRICA isn’t designed to give breakdowns for each industry: it instead captures the average gender gap across all sectors within a country. Gender gap here represents the gap between men and women in pay.</p>
<p>Country resources and opportunities are not equally distributed between women and men, causing the gender pay gap. Even though qualified women are coming out of the education system, many industries are failing to hire, retain and promote them, losing out on a wealth of capacity.</p>
<p>The report measures gender-based gaps in access to resources and opportunities in countries, rather than the availability of resources and opportunities.</p>
<p>According to the report, men are under-represented in education, health and welfare, while women are under-represented in engineering, manufacturing and construction, as well as information and communications technology. Regardless of the number of women entering these professions, men hold more leadership - and well-paying - positions.</p>
<p>The gender pay gap is a culmination of many factors, creating a glass ceiling that prevents women from exercising equal economic rights.<p>
<p>The WEF report quantifies the magnitude of gender disparities, noting that some regions should expect to see their gender gaps narrow faster than others. Sub-Saharan Africa is due to achieve parity in 102 years, while projections for North Africa suggest closing the gaps will take more than 152 years.</p>
<p>The data used in this tool can be found for each country in the Global Gender Gap Report, 2023 from page 26. </p>
<p>Gender gaps affect society as a whole and have severe social and economic consequences. As Klaus Schwab, founder and executive chair of the World Economic Forum, said “When women and girls are not integrated—as both beneficiary and shaper—the global community loses out on skills, ideas and perspectives that are critical for addressing global challenges and harnessing new opportunities.”</p>
</p>
<!-- <p class="info--small">Note: Statistics on Burundi are not captured in this tool.</p> -->
</div>
<button class="button button--red button--icon-dark info__close">Close <span class="button__icon-dark"><img src="images/icons/close.svg" alt="close" /></span></button>
</div>
</div>
</main>
<footer>
<div class="section__footer text-white" style="background-color:#1e1e1e!important; font-size:16px; padding: 8rem 0;">
<div class="container">
<div class="row small">
<div class="col-md-5 col-sm-6">
<p>
</p>
<p>
The tool uses <strong><a href="https://www.weforum.org/publications/global-gender-gap-report-2023/in-full/appendix-b-8aaa913d30/#:~:text=________________________________________________________________________-,Economic%20Participation%20and%20Opportunity,-This%20subindex%20contains" style="color:#e74c3c;" target="_blank" rel="noopener">Estimated Earned Income</a></strong> data from the World Economic Forum's <strong><a href="https://open.africa/dataset/global-gender-gap-report-2023" target="_blank" rel="noopener" style="color:#e74c3c;">Global Gender Gap Report 2023.</a></strong> The calculator isn’t designed to give breakdowns for each industry: it instead captures the average gender gap across all sectors within a country. Gender Gap here represents the gap between men and women in pay.
</p>
<p>
This site is a StoryLab project by <strong><a href="https://codeforafrica.org/" style="color:#e74c3c;" target="_blank" rel="noopener">Code for Africa.</a></strong> All content is released under a <strong><a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener" style="color:#e74c3c;">Creative Commons 4.0 Attribution license.</a></strong> You are free to reuse it to help empower your own community. <p>The code is available on <strong><a href="https://github.com/CodeForAfrica/GenderGap.AFRICA" target="_blank" rel="noopener" style="color:#e74c3c;">GitHub</a></strong> and the data is available on <strong><a href="https://openafrica.net/" target="_blank" rel="noopener" style="color:#e74c3c;">openAFRICA.</a></strong></p>
</p>
</div>
<div class="col-md-3 col-sm-6">
<p>
Other Code For Africa projects:
</p>
<ul>
<li>
<a href="https://pesayetu.pesacheck.org/" target="_blank" style="color:#e74c3c;">PesaYetu</a>
</li>
<li>
<a href="https://academy.africa/" target="_blank" style="color:#e74c3c;">academy.AFRICA</a>
</li>
</ul>
<br>
<p>
Join Our Community:
</p>
<ul>
<li>
<a href="https://medium.com/wanadata-africa" target="_blank" style="color:#e74c3c;">WanaData</a>
</li>
<li>
<a href="http://stories.gendergap.africa" target="_blank" style="color:#e74c3c;">GenderGap.Africa</a>
</li>
</ul>
<hr class="mt-4" style="border-color: #4d4d4d;">
<div class="gap__info-wrapper">
<button class="button button--red button--icon-dark gap__info">How does the tool work<span class="button__icon-dark"><img src="images/icons/info.svg" alt="info" /></span>
</button>
</div>
</div>
<div class="col-md-4 col-sm-12 mt-md-0 mt-sm-5 logos text-center">
<p>
<a href="https://gatesfoundation.org/" target="_blank" rel="noopener" class="m-1"><img src="images/bmgf-white.png" class="p-2" /></a>
</p>
<p class="funders">
<a href="https://codeforafrica.org/" target="_blank" rel="noopener" class="m-1"><img src="images/cfafrica-transparent.png" class="p-2"></a>
<a href="https://icfj.org/" target="_blank" rel="noopener" class="m-1"><img src="images/icfj-white.png" class="p-2"/></a>
</p>
<p class="mt-4">Funded by the <a href="https://gatesfoundation.org/" target="_blank" rel="noopener" style="color:#e74c3c;">Bill and Melinda Gates Foundation</a> through the <a href="https://icfj.org" target="_blank" rel="noopener" style="color:#e74c3c;">International Center for Journalists.</a></p>
</div>
</div>
</div>
</footer>
<!--Javascript scripts-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script defer src="modernizr-build.min.js"></script>
<script defer src="scripts.min.js?v=3.7"></script>
<script src="https://use.typekit.net/jlc4hvm.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- Reponsive Embed -->
<script type="text/javascript" src="https://pym.nprapps.org/pym.v1.min.js"></script>
<script>
var pymChild = new pym.Child();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-44795600-40"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4C26DBY642');
</script>
</body>
</html>