<header>
      <h1>top 5 largest cities</h1>
      <p>These are the top 5 cities in the world as defined by their city proper, urban area, and the metropolitan region.</p>
    </header>

    <ol class="cities">
                  <li><em>China</em> <strong>Shanghai</strong> Population: City 21,516,000 // Urban 21,009,000 // Metro 21,148,000</li>
                  <li><em>China</em> <strong>Beijing</strong> Population: City 21,516,000 // Urban 21,009,000 // Metro 21,148,000</li>
                  <li><em>Brazil</em> <strong>S&acirc;o Paulo</strong> Population: City 21,292,893 // Urban 20,365,000 // Metro 36,842,102</li>
                  <li><em>India</em> <strong>Delhi</strong> Population: City 16,787,941 // Urban 24,998,000 // Metro 21,753,486</li>
                  <li><em>Pakistan</em> <strong>Karachi</strong> Population: City 21,000,000 // Urban 22,123,000</li>
    </ol>

    <p class="source">Source: <a href="https://en.wikipedia.org/wiki/World%27s_largest_cities">https://en.wikipedia.org/wiki/World%27s_largest_cities</a></p> 

body {
      font-family: 'Roboto Condensed', sans-serif;
      font-size: 16px;
      color: #fff;
      background-color: #0099cc;
      margin: 0 0 15px 0;
      padding: 0;
}

header {
      background: #0060aa url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/194554/city.jpg) no-repeat right top;
      padding: 1px;
      margin: 0 0 35px 0;
      min-height: 165px;
}

header h1 {
      font-family: 'Roboto Slab', serif;
      font-size: 2.3em;
      text-transform: uppercase;
      margin: 50px 0 5px 30px;
}

header p {
      line-height: 20px;
      font-size: 1.2em;
      margin: 0;
      padding: 0px 30px 15px 30px;
      color: rgba(255, 255, 255, .6);
}

p.source {
      font-size: .8em;
      font-style: italic;
      margin: 0 0 0 30px;
      color: rgba(255, 255, 255, .5);
}

p.source a {
      color: rgba(255, 255, 255, .75);
      padding-left: 7px;
}

ol.cities {
      list-style-type: none;
      margin: 0 0 0 75px;
}

ol.cities li {
      /* https://www.w3schools.com/cssref/pr_gen_counter-increment.asp */
      counter-increment: myCounter;
      margin: 0 0 45px 0;
      padding: 13px 0 0 85px;
      position: relative;
      color: #ccffff;
      font-size: 0.9em;
}

ol.cities li::before {
      /* https://www.w3schools.com/cssref/sel_before.asp */
      content: counter(myCounter,decimal-leading-zero);
      /* https://www.w3schools.com/css/css_inline-block.asp */
      display: inline-block;
      text-align: center;
      font-size: 4em;
      line-height: 1.3em;
      background-color: white;
      color: #0099CC;
      font-family: 'Roboto', sans-serif;
      font-weight: 900;
      padding: 10px;
      position: absolute;
      top: 0;
      left: -40px;
      border-radius: 5px;
}

ol.cities li em {
      display: block;
      font-style: italic;
      font-family: 'Roboto', sans-serif;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: #ffffff;
      margin: 0 0 -5px 0;
}

ol.cities li strong {
      display: block;
      font-family: 'Roboto Slab', serif;
      font-weight: 900;
      font-size: 2em;
      color: #fff;
      margin: .2em 0 .3em 0;
      
}