index.html

<!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>