food-tracker/templates/food.html

<div class="card">
  <p class="food-name">
    {{ food.name }}
  </p>
  <div class="card-inner">
    <div class="amounts">
      <p class="unit">
        <sup>1</sup>&frasl;<sub>4</sub> Cup
      </p>
      <p class="kc">
        {{ food.kc_per_serving }} kc
      </p>
    </div>
    <div class="buttons">
      <button class="increase">+</button>
      <button class="decrease">-</button>
    </div>
    <div class="checkboxes">
      <label class="ok">
        <input type="checkbox" checked>
      </label>
      <label class="ok">
        <input type="checkbox">
      </label>
      <label class="ok">
        <input type="checkbox" checked>
      </label>
      <label class="bad">
        <input type="checkbox" checked>
      </label>
      <label class="bad">
        <input type="checkbox" checked>
      </label>
      <label class="bad">
        <input type="checkbox">
      </label>
      <label class="bad">
        <input type="checkbox">
      </label>
      <label class="bad">
        <input type="checkbox">
      </label>
      <label class="bad">
        <input type="checkbox">
      </label>
      <label class="bad">
        <input type="checkbox">
      </label>
    </div>
  </div>
</div>