colouring-montreal/frontend/index.html

<div id="legend" class="info-container offscreen">
  <h2 class="h2">Maps</h2>
  <div class="data-section">
    <h3 class="h3 bullet-prefix age toggled-on"
        data-toggle="collapse"
        data-target="#data-list-age">Age</h3>
    <dl id="data-list-age" class="data-list collapse show">
      <dt>
        <a href="/maps/date_year"
            data-map="date_year">Year Built</a></dt>
      <dd>
        <ul class="data-legend">
          <li>
            <span class="key" style="background: #f0eaba">-</span>
            &gt;=2000
          </li>
          <li>
            <span class="key" style="background: #fae269">-</span>
            1980-2000
          </li>
          <li>
            <span class="key" style="background: #fbaf27">-</span>
            1960-1980
          </li>
          <li>
            <span class="key" style="background: #e6711d">-</span>
            1940-1960
          </li>
          <li>
            <span class="key" style="background: #d73d3a">-</span>
            1920-1940
          </li>
          <li>
            <span class="key" style="background: #ba221c">-</span>
            1900-1920
          </li>
          <li>
            <span class="key" style="background: #bb859b">-</span>
            1880-1900
          </li>
          <li>
            <span class="key" style="background: #8b3654">-</span>
            1860-1880
          </li>
          <li>
            <span class="key" style="background: #8f5385">-</span>
            1840-1860
          </li>
          <li>
            <span class="key" style="background: #56619b">-</span>
            1820-1840
          </li>
          <li>
            <span class="key" style="background: #6793b2">-</span>
            1800-1820
          </li>
          <li>
            <span class="key" style="background: #83c3b3">-</span>
            1780-1800
          </li>
          <li>
            <span class="key" style="background: #adc88f">-</span>
            1760-1780
          </li>
          <li>
            <span class="key" style="background: #83a663">-</span>
            1740-1760
          </li>
          <li>
            <span class="key" style="background: #77852d">-</span>
            1720-1740
          </li>
          <li>
            <span class="key" style="background: #69814e">-</span>
            1700-1720
          </li>
          <li>
            <span class="key" style="background: #d0c291">-</span>
            1680-1700
          </li>
          <li>
            <span class="key" style="background: #918158">-</span>
            1660-1680
          </li>
          <li>
            <span class="key" style="background: #7a5732">-</span>
            &lt;1660
          </li>
        </ul>
      </dd>
    </dl>
  </div>
  <div class="data-section">
    <h3 class="h3 bullet-prefix size"
        data-toggle="collapse"
        data-target="#data-list-size">Size</h3>
    <dl id="data-list-size" class="data-list collapse">
      <dt>
        <a href="/maps/size_storeys"
        data-map="size_storeys">Number of storeys</a>
      </dt>
      <dd>
        <ul class="data-legend">
            <li>
              <span class="key" style="background: #ffc584">-</span>
              &gt;20
            </li>
            <li>
              <span class="key" style="background: #f46259">-</span>
              10-20
            </li>
            <li>
              <span class="key" style="background: #da456a">-</span>
              5-10
            </li>
            <li>
              <span class="key" style="background: #a8327d">-</span>
              4
            </li>
            <li>
              <span class="key" style="background: #7c2383">-</span>
              3
            </li>
            <li>
              <span class="key" style="background: #5b167f">-</span>
              2
            </li>
            <li>
              <span class="key" style="background: #360f69">-</span>
              1
            </li>

        </ul>
      </dd>
    </dl>
  </div>
</div>