Legend Tag html5

index.html

<div class='row sl-legend'>
  <div class="col-xs-6">
<div class='legend-scale'>
  <ul class='legend-labels'>
    <li><span style='background:#0d3c55;'></span>HV</li>
    <li><span style='background:#117899;'></span>LPP & TPP</li>
    <li><span style='background:#1395ba;'></span>QPP</li>
    <li><span style='background:#36D7B7;'></span>PPS</li>
    <li><span style='background:#03A678;'></span>EG</li>
    
  </ul>
</div>
  </div>
  
  <div class="col-xs-6">
    <div class='legend-scale'>
  <ul class='legend-labels'>
    <li><span style='background:#a2b86c;'></span>ES</li>
    <li><span style='background:#F4D03F;'></span>Basic</li>
    <li><span style='background:#f16c20;'></span>KrisFlyer (EG+ES+Basic)</li>
    <li><span style='background:#c02e1d;'></span>SQ Station</li>
  </ul>
</div>
  </div>
</div>

Legend Tag html5.markdown

Legend Tag html5

A Pen by Ry Arush on CodePen.

License.

QbeOMo.markdown

QbeOMo

A Pen by Ry Arush on CodePen.

License.

style.css

  .sl-legend .legend-scale ul {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    float: left;
    list-style: none;
    }
  .sl-legend .legend-scale ul li {
    font-size: 80%;
    list-style: none;
    margin-left: 0;
    line-height: 15px;
    margin-bottom: 2px;
    }
  .sl-legend ul.legend-labels li span {
    display: block;
    float: left;
    height: 8px;
    width: 8px;
    margin-right: 5px;
    margin-left: 0;

    }
  .sl-legend .legend-source {
    font-size: 70%;
    color: #999;
    clear: both;
    }
  .sl-legend a {
    color: #777;
    }

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />