bbensky · September 22, 2018 22:42
diff --git a/nutrition_facts_label.html b/nutrition_facts_label.html
 <!DOCTYPE html>
 <html lang="en-us">
 <head>
  <title>Nutrition Facts Label</title>
  <meta charset="utf-8">
  <style>
    html, body {
      font-size: 28px;
    }

    body {
      border: 0.08rem solid black;
      font-family: "Helvetica Black", Helvetica, Arial, sans-serif;
      width: 676px;
    }

    header {
      border-bottom: 1.08rem solid black;
      margin: 10px 15px;
      padding-bottom: 5px;
    }

    header * {
      margin: 0;
    }

    header h1 {
      font-size: 2rem;
    }

    main table {
      border-collapse: collapse;
      margin: 10px 15px;
      width: 646px;
    }

    dl {
      margin: 0;
    }

    dt, dd {
      display: inline-block;
    }

    dt {
      font-weight: bold;
    }

    dd {
      margin: 0;
    }

    main th {
      font-weight: bold;
    }

    main thead {
      border-bottom: .05rem solid black;
    }

    main thead th {
      font-size: 1rem;
      padding: 0 0 10px;
      text-align: left;
    }

    main tbody {
      border-bottom: .05rem solid black;
    }

    main tbody th {
      font-size: 1rem;
      padding-top: 11px;
      text-align: right;
    }

    span {
      font-size: .83rem;
      vertical-align: .11rem;
    }

    main tbody td {
      padding: 2px 0;
    }

    main tbody tr:first-child {
      border-bottom: 0.55rem solid black;
    }

    main tbody tr:first-child td {
      padding: 5px 0;
    }

    main tbody tr:nth-child(-n+9) td:last-child {
      font-weight: bold;
    }

    main tbody tr:first-child td:last-child {
      font-weight: normal;
    }

    main tbody td:last-child {
      text-align: right;
    }

    main tbody tr:nth-child(11) dl {
      text-align: left;
    }

    main tbody tr:nth-child(12) {
      border-top: .72rem solid black;
    }

    main tbody td {
      border-top: .05rem solid black;
    }

    .empty-first-cell td:first-child {
      border-top: none;
      width: 1rem;
    }

    main tbody tr:nth-child(5) td:nth-child(2) {
      font-weight: normal;
      text-align: left;
    }

    main tfoot td {
      font-size: .9rem;
      padding: 15px 0 0 20px;
      text-indent: -.73rem;
    }

    footer {
      font-size: .9rem;
      margin: 12px 12px 15px;
      width: 650px;
    }

    footer table {
      border-collapse: collapse;
      font-size: .8rem;
    }

    footer table td, th {
      padding-top: 2.5px;
      text-align: left;
      width: 4.7rem;
    }

    footer table th:first-child {
      text-indent: 8.7rem;
    }

    footer table th {
      font-weight: normal;
    }

    footer table td:nth-child(1), 
    footer table th:nth-child(1) {
      width: 8.6rem;
    }

    footer table tr:nth-child(1) td {
      border-top: 0.05rem solid black;
    }

    footer table tbody tr:nth-child(2) td:nth-child(1),
    footer table tbody tr:nth-child(6) td:nth-child(1) {
      text-indent: 1.2rem;
    }
  </style>
 </head>
 <body>
  <header>
    <h1>Nutrition Facts</h1>
    <p>Serving Size 2/3 cup (55g)</p>
    <p>Servings Per Container About 8</p>
  </header>

  <main>
    <table>
      <thead>
        <tr>
          <th colspan="3" scope="row">Amount Per Serving</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td colspan="2">
            <dl>
              <dt>Calories</dt>
              <dd>230</dd>
            </dl>
          </td>
          <td>Calories from Fat 40</td>
        </tr>

        <tr>
          <th colspan="3" scope="row">
            % Daily Value<span>*</span>
          </th>
        </tr>

        <tr>
          <td colspan="2">
            <dl>
              <dt>Total Fat</dt>
              <dd>8g</dd>
            </dl>
          </td>
          <td>12%</td>
        </tr>

        <tr class="empty-first-cell">
          <td></td>
          <td>Saturated Fat 1g</td>
          <td>5%</td>
        </tr>

        <tr class="empty-first-cell">
          <td></td>
          <td colspan="2">
            <em>Trans</em> Fat 0g
          </td>
        </tr>

        <tr>
          <td colspan="2">
            <dl>
              <dt>Cholesterol</dt>
              <dd>0mg</dd>
            </dl>
          </td>
          <td>0%</td>
        </tr>

        <tr>
          <td colspan="2">
            <dl>
              <dt>Sodium</dt>
              <dd>160mg</dd>
            </dl>
          </td>
          <td>7%</td>
        </tr>

        <tr>
          <td colspan="2">
            <dl>
              <dt>Total Carbohydrate</dt>
              <dd>37g</dd>
            </dl>
          </td>
            <td>12%</td>
        </tr>

        <tr class="empty-first-cell">
          <td></td>
          <td>
            Dietary Fiber 4g
          </td>
          <td>16%</td>
        </tr>

        <tr class="empty-first-cell">
          <td></td>
          <td>Sugars 1g</td>
          <td></td>
        </tr>

        <tr>
          <td colspan="3">
            <dl>
              <dt>Protein</dt>
              <dd>3g</dd>
            </dl>
          </td>
        </tr>

        <tr>
          <td colspan="2">Vitamin A</td>
          <td>10%</td>
        </tr>

        <tr>
          <td colspan="2">Vitamin C</td>
          <td>8%</td>
        </tr>

        <tr>
          <td colspan="2">Calcium</td>
          <td>20%</td>
        </tr>

        <tr>
          <td colspan="2">Iron</td>
          <td>45%</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td colspan="3">* Percent Daily Values are based on a 2,000 calorie diet. Your daily value may be higher or lower depending on your calorie needs.</td>
        </tr>
      </tfoot>
    </table>
  </main>

  <footer>
    <table>
      <thead>
        <tr>
          <th colspan="2" scope="col">Calories:</th>
          <th scope="col">2,000</th>
          <th scope="col">2,500</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Total Fat</td>
          <td>Less than</td>
          <td>65g</td>
          <td>80g</td>
        </tr>

        <tr>
          <td>Sat Fat</td>
          <td>Less than</td>
          <td>20g</td>
          <td>25g</td>
        </tr>

        <tr>
          <td>Cholesterol</td>
          <td>Less than</td>
          <td>300mg</td>
          <td>300mg</td>
        </tr>

        <tr>
          <td>Sodium</td>
          <td>Less than</td>
          <td>2,400mg</td>
          <td>2,400mg</td>
        </tr>

        <tr>
          <td>Total Carbohydrate</td>
          <td></td>
          <td>300g</td>
          <td>375g</td>
        </tr>

        <tr>
          <td>Dietary Fiber</td>
          <td></td>
          <td>25g</td>
          <td>30g</td>
        </tr>        
      </tbody>
    </table>
  </footer>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en-us">
	<head>
	<title>Nutrition Facts Label</title>
	<meta charset="utf-8">
	<style>
	html, body {
	font-size: 28px;
	}

	body {
	border: 0.08rem solid black;
	font-family: "Helvetica Black", Helvetica, Arial, sans-serif;
	width: 676px;
	}

	header {
	border-bottom: 1.08rem solid black;
	margin: 10px 15px;
	padding-bottom: 5px;
	}

	header * {
	margin: 0;
	}

	header h1 {
	font-size: 2rem;
	}

	main table {
	border-collapse: collapse;
	margin: 10px 15px;
	width: 646px;
	}

	dl {
	margin: 0;
	}

	dt, dd {
	display: inline-block;
	}

	dt {
	font-weight: bold;
	}

	dd {
	margin: 0;
	}

	main th {
	font-weight: bold;
	}

	main thead {
	border-bottom: .05rem solid black;
	}

	main thead th {
	font-size: 1rem;
	padding: 0 0 10px;
	text-align: left;
	}

	main tbody {
	border-bottom: .05rem solid black;
	}

	main tbody th {
	font-size: 1rem;
	padding-top: 11px;
	text-align: right;
	}

	span {
	font-size: .83rem;
	vertical-align: .11rem;
	}

	main tbody td {
	padding: 2px 0;
	}

	main tbody tr:first-child {
	border-bottom: 0.55rem solid black;
	}

	main tbody tr:first-child td {
	padding: 5px 0;
	}

	main tbody tr:nth-child(-n+9) td:last-child {
	font-weight: bold;
	}

	main tbody tr:first-child td:last-child {
	font-weight: normal;
	}

	main tbody td:last-child {
	text-align: right;
	}

	main tbody tr:nth-child(11) dl {
	text-align: left;
	}

	main tbody tr:nth-child(12) {
	border-top: .72rem solid black;
	}

	main tbody td {
	border-top: .05rem solid black;
	}

	.empty-first-cell td:first-child {
	border-top: none;
	width: 1rem;
	}

	main tbody tr:nth-child(5) td:nth-child(2) {
	font-weight: normal;
	text-align: left;
	}

	main tfoot td {
	font-size: .9rem;
	padding: 15px 0 0 20px;
	text-indent: -.73rem;
	}

	footer {
	font-size: .9rem;
	margin: 12px 12px 15px;
	width: 650px;
	}

	footer table {
	border-collapse: collapse;
	font-size: .8rem;
	}

	footer table td, th {
	padding-top: 2.5px;
	text-align: left;
	width: 4.7rem;
	}

	footer table th:first-child {
	text-indent: 8.7rem;
	}

	footer table th {
	font-weight: normal;
	}

	footer table td:nth-child(1),
	footer table th:nth-child(1) {
	width: 8.6rem;
	}

	footer table tr:nth-child(1) td {
	border-top: 0.05rem solid black;
	}

	footer table tbody tr:nth-child(2) td:nth-child(1),
	footer table tbody tr:nth-child(6) td:nth-child(1) {
	text-indent: 1.2rem;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Nutrition Facts</h1>
	<p>Serving Size 2/3 cup (55g)</p>
	<p>Servings Per Container About 8</p>
	</header>

	<main>
	<table>
	<thead>
	<tr>
	<th colspan="3" scope="row">Amount Per Serving</th>
	</tr>
	</thead>

	<tbody>
	<tr>
	<td colspan="2">
	<dl>
	<dt>Calories</dt>
	<dd>230</dd>
	</dl>
	</td>
	<td>Calories from Fat 40</td>
	</tr>

	<tr>
	<th colspan="3" scope="row">
	% Daily Value<span>*</span>
	</th>
	</tr>

	<tr>
	<td colspan="2">
	<dl>
	<dt>Total Fat</dt>
	<dd>8g</dd>
	</dl>
	</td>
	<td>12%</td>
	</tr>

	<tr class="empty-first-cell">
	<td></td>
	<td>Saturated Fat 1g</td>
	<td>5%</td>
	</tr>

	<tr class="empty-first-cell">
	<td></td>
	<td colspan="2">
	<em>Trans</em> Fat 0g
	</td>
	</tr>

	<tr>
	<td colspan="2">
	<dl>
	<dt>Cholesterol</dt>
	<dd>0mg</dd>
	</dl>
	</td>
	<td>0%</td>
	</tr>

	<tr>
	<td colspan="2">
	<dl>
	<dt>Sodium</dt>
	<dd>160mg</dd>
	</dl>
	</td>
	<td>7%</td>
	</tr>

	<tr>
	<td colspan="2">
	<dl>
	<dt>Total Carbohydrate</dt>
	<dd>37g</dd>
	</dl>
	</td>
	<td>12%</td>
	</tr>

	<tr class="empty-first-cell">
	<td></td>
	<td>
	Dietary Fiber 4g
	</td>
	<td>16%</td>
	</tr>

	<tr class="empty-first-cell">
	<td></td>
	<td>Sugars 1g</td>
	<td></td>
	</tr>

	<tr>
	<td colspan="3">
	<dl>
	<dt>Protein</dt>
	<dd>3g</dd>
	</dl>
	</td>
	</tr>

	<tr>
	<td colspan="2">Vitamin A</td>
	<td>10%</td>
	</tr>

	<tr>
	<td colspan="2">Vitamin C</td>
	<td>8%</td>
	</tr>

	<tr>
	<td colspan="2">Calcium</td>
	<td>20%</td>
	</tr>

	<tr>
	<td colspan="2">Iron</td>
	<td>45%</td>
	</tr>
	</tbody>

	<tfoot>
	<tr>
	<td colspan="3">* Percent Daily Values are based on a 2,000 calorie diet. Your daily value may be higher or lower depending on your calorie needs.</td>
	</tr>
	</tfoot>
	</table>
	</main>

	<footer>
	<table>
	<thead>
	<tr>
	<th colspan="2" scope="col">Calories:</th>
	<th scope="col">2,000</th>
	<th scope="col">2,500</th>
	</tr>
	</thead>

	<tbody>
	<tr>
	<td>Total Fat</td>
	<td>Less than</td>
	<td>65g</td>
	<td>80g</td>
	</tr>

	<tr>
	<td>Sat Fat</td>
	<td>Less than</td>
	<td>20g</td>
	<td>25g</td>
	</tr>

	<tr>
	<td>Cholesterol</td>
	<td>Less than</td>
	<td>300mg</td>
	<td>300mg</td>
	</tr>

	<tr>
	<td>Sodium</td>
	<td>Less than</td>
	<td>2,400mg</td>
	<td>2,400mg</td>
	</tr>

	<tr>
	<td>Total Carbohydrate</td>
	<td></td>
	<td>300g</td>
	<td>375g</td>
	</tr>

	<tr>
	<td>Dietary Fiber</td>
	<td></td>
	<td>25g</td>
	<td>30g</td>
	</tr>
	</tbody>
	</table>
	</footer>
	</body>
	</html>