<h2>Restaurants in New York</h2>
<div class="hint"><span class="french"></span><span>French</span></div>
<div class="hint"><span class="veg"></span><span>Vegetarian</span></div>
<div class="hint"><span class="german"></span><span>German</span></div>
<ul>
  <li data-type="veg" data-distance="2miles" data-identifier="10318">Bloss</li>
  <li data-type="german" data-distance="3miles" data-identifier="10318">Heidelberg</li>
  <li data-type="french" data-distance="1mile" data-identifier="10318">Daniel</li>
  <li data-type="veg" data-distance="4miles" data-identifier="10548">Dirt Candy</li>
  <li data-type="french" data-distance="3miles" data-identifier="10318">La Grenouille</li>
  <li data-type="french" data-distance="1mile" data-identifier="10318">Balthazar</li>
  <li data-type="veg" data-distance="2miles" data-identifier="12315">Angelica Kitchen</li>
  <li data-type="german" data-distance="1mile" data-identifier="10318">Blaue Gans</li>
  <li data-type="german" data-distance="2miles" data-identifier="12315">Reichenbach Hall</li>
</ul>

html {
  font-family: 'Lato';
  margin: 20px auto;
  max-width: 600px;
  font-size: 1.25em;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 5px 10px;
  margin: 5px 0;
  color: white;
  border-radius: 5px;
}

.hint {
  margin-right: 30px;
  display: inline-block;
}

span.french, span.veg, span.german {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  float: left;
  margin-top: 5px;
  margin-right: 5px;
}

span.french {
  background: #3F51B5;
}

span.veg {
  background: #8BC34A;
}

span.german {
  background: #bb6666;
}

li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}

li[data-type='german'] {
  background: #bb6666;
}