xullnn/revised_nutrition_facts.html

## revised_nutrition_facts.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>

      html {
        font-size: 23px;
        font-family: sans-serif;
        font-weight: lighter;
        background-color: Black;
      }

      * {
        margin: 0;
        padding: 0;
      }

      main {
        width: 450px;
        border: 4px solid black;
        margin-left: auto;
        margin-right: auto;
        padding: 0 8px;
        background-color: white;
      }

      header {
        margin-top: -12px;
      }

      header section.bold_bottom > * {
        margin: -3px 0;
      }

      h1 {
        font-size: 56px;
        letter-spacing: -2px;
        height: 75px;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      main > aside {
        font-size: 17px;
        margin-top: 11px;
      }

      label {
        font-size: 23px;
        font-weight: 600;
      }

      main > table tr td:nth-child(2n+2) {
        text-align: right;
      }

      th {
        font-weight: normal;
        text-align: left;
      }

      main table tbody tr th, td {
        height: 34px;
      }

      main > table td, main > table th, aside table thead tr {
        border-bottom: 1.5px solid rgb(120, 120, 120);
      }

      h1,label, b {
        margin: 0;
        font-family: "Arial Black", "Franklin Gothic Heavy";
      }

      b {
        font-size: 18px;
      }

     .sublabel {
       position: relative;
       left: 1.5em;
      }

      .bold_bottom {
        border-bottom: 21px solid black;
        padding-bottom: 10px;
      }

      .medium_bottom {
        border-bottom: 9px solid black;
      }

      aside table {
        font-size: 17px;
        margin-top: 10px;
      }

      aside p:nth-child(n+2) {
        padding-left: 10px;
      }

      aside table tr > * {
        height: 10px;
      }

      dl, dd, dt {
        display: inline-block;
      }

      header > section.medium_bottom > dl:nth-child(3){
        float: right;
      }

      .medium_bottom p {
        border-bottom: 1px solid black;
        padding: 3px 0;
      }

    </style>
    <title>Practice</title>
  </head>
  <body>
    <main>
      <header>
        <section class="bold_bottom">
          <h1>Nutrition Facts</h1>
          <p>Serving Size 2/3 cup (55g)</p>
          <p>Servings Per Container About 8</p>
        </section>
        <section class="medium_bottom">
          <p><b>Amount Per Serving</b></p>
          <dl>
            <dt><strong>Calories</strong></dt>
            <dd> 230</dd>
          </dl>
          <dl>
            <dt>Calories from Fat</dt>
            <dd> 40</dd>
          </dl>
        </section>
      </header>

      <table>
        <tbody>
          <tr>
            <td></td>
            <td><b>% Daily Value*</b></td>
          </tr>
          <tr>
            <td><label>Total Fat</label> 8g</td>
            <td><strong>12</strong>%</td>
          </tr>
          <tr>
            <td class="sublabel">Saturated Fat 1g</td>
            <td><strong>5</strong>%</td>
          </tr>
          <tr>
            <td class="sublabel"><i>Trans</i> Fat 0g</td>
            <td></td>
          </tr>
          <tr>
            <td><label>Cholesterol</label> 0mg</td>
            <td><strong>0</strong>%</td>
          </tr>
          <tr>
            <td><label>Sodium</label> 160mg</td>
            <td><strong>7</strong>%</td>
          </tr>
          <tr>
            <td><label>Total Carbohydrate</label> 37g</td>
            <td><strong>12</strong>%</td>
          </tr>
          <tr>
            <td class="sublabel">Dietary Fiber 4g</td>
            <td><strong>16</strong>%</td>
          </tr>
          <tr>
            <td class="sublabel">Sugars 1g</td>
            <td></td>
          </tr>
          <tr class="bold_bottom">
            <td><label>Protein</label> 3g</td>
            <td></td>
          </tr>
        </tbody>

        <tfoot>
          <tr>
            <td>Viatamin A</td>
            <td>10%</td>
          </tr>
          <tr>
            <td>Viatamin C</td>
            <td>8%</td>
          </tr>
          <tr>
            <td>Calcium</td>
            <td>20%</td>
          </tr>
          <tr>
            <td>Iron</td>
            <td>45%</td>
          </tr>
        </tfoot>
      </table>

      <aside>

        <p>* Percent Daily Values are based on a 2000 calorie diet.</p>
        <p> Your datly value may be higher or lower depending on</p>
        <p> your calorie needs.</p>

        <table>
          <thead>
            <tr>
              <th></th>
              <th>Calories:</th>
              <th>2,000</th>
              <th>2,500</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Total Fat</td>
              <td>Less Than</td>
              <td>65g</td>
              <td>80g</td>
            </tr>
            <tr>
              <td class="sublabel">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 class="sublabel">Dietary Fiber</td>
              <td></td>
              <td>25g</td>
              <td>30g</td>
            </tr>
          </tbody>
        </table>

      </aside>

    </main>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<style>

	html {
	font-size: 23px;
	font-family: sans-serif;
	font-weight: lighter;
	background-color: Black;
	}

	* {
	margin: 0;
	padding: 0;
	}

	main {
	width: 450px;
	border: 4px solid black;
	margin-left: auto;
	margin-right: auto;
	padding: 0 8px;
	background-color: white;
	}

	header {
	margin-top: -12px;
	}

	header section.bold_bottom > * {
	margin: -3px 0;
	}

	h1 {
	font-size: 56px;
	letter-spacing: -2px;
	height: 75px;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	}

	main > aside {
	font-size: 17px;
	margin-top: 11px;
	}

	label {
	font-size: 23px;
	font-weight: 600;
	}

	main > table tr td:nth-child(2n+2) {
	text-align: right;
	}

	th {
	font-weight: normal;
	text-align: left;
	}

	main table tbody tr th, td {
	height: 34px;
	}

	main > table td, main > table th, aside table thead tr {
	border-bottom: 1.5px solid rgb(120, 120, 120);
	}

	h1,label, b {
	margin: 0;
	font-family: "Arial Black", "Franklin Gothic Heavy";
	}

	b {
	font-size: 18px;
	}

	.sublabel {
	position: relative;
	left: 1.5em;
	}

	.bold_bottom {
	border-bottom: 21px solid black;
	padding-bottom: 10px;
	}

	.medium_bottom {
	border-bottom: 9px solid black;
	}

	aside table {
	font-size: 17px;
	margin-top: 10px;
	}

	aside p:nth-child(n+2) {
	padding-left: 10px;
	}

	aside table tr > * {
	height: 10px;
	}

	dl, dd, dt {
	display: inline-block;
	}

	header > section.medium_bottom > dl:nth-child(3){
	float: right;
	}

	.medium_bottom p {
	border-bottom: 1px solid black;
	padding: 3px 0;
	}

	</style>
	<title>Practice</title>
	</head>
	<body>
	<main>
	<header>
	<section class="bold_bottom">
	<h1>Nutrition Facts</h1>
	<p>Serving Size 2/3 cup (55g)</p>
	<p>Servings Per Container About 8</p>
	</section>
	<section class="medium_bottom">
	<p><b>Amount Per Serving</b></p>
	<dl>
	<dt><strong>Calories</strong></dt>
	<dd> 230</dd>
	</dl>
	<dl>
	<dt>Calories from Fat</dt>
	<dd> 40</dd>
	</dl>
	</section>
	</header>

	<table>
	<tbody>
	<tr>
	<td></td>
	<td><b>% Daily Value*</b></td>
	</tr>
	<tr>
	<td><label>Total Fat</label> 8g</td>
	<td><strong>12</strong>%</td>
	</tr>
	<tr>
	<td class="sublabel">Saturated Fat 1g</td>
	<td><strong>5</strong>%</td>
	</tr>
	<tr>
	<td class="sublabel"><i>Trans</i> Fat 0g</td>
	<td></td>
	</tr>
	<tr>
	<td><label>Cholesterol</label> 0mg</td>
	<td><strong>0</strong>%</td>
	</tr>
	<tr>
	<td><label>Sodium</label> 160mg</td>
	<td><strong>7</strong>%</td>
	</tr>
	<tr>
	<td><label>Total Carbohydrate</label> 37g</td>
	<td><strong>12</strong>%</td>
	</tr>
	<tr>
	<td class="sublabel">Dietary Fiber 4g</td>
	<td><strong>16</strong>%</td>
	</tr>
	<tr>
	<td class="sublabel">Sugars 1g</td>
	<td></td>
	</tr>
	<tr class="bold_bottom">
	<td><label>Protein</label> 3g</td>
	<td></td>
	</tr>
	</tbody>

	<tfoot>
	<tr>
	<td>Viatamin A</td>
	<td>10%</td>
	</tr>
	<tr>
	<td>Viatamin C</td>
	<td>8%</td>
	</tr>
	<tr>
	<td>Calcium</td>
	<td>20%</td>
	</tr>
	<tr>
	<td>Iron</td>
	<td>45%</td>
	</tr>
	</tfoot>
	</table>

	<aside>

	<p>* Percent Daily Values are based on a 2000 calorie diet.</p>
	<p> Your datly value may be higher or lower depending on</p>
	<p> your calorie needs.</p>

	<table>
	<thead>
	<tr>
	<th></th>
	<th>Calories:</th>
	<th>2,000</th>
	<th>2,500</th>
	</tr>
	</thead>

	<tbody>
	<tr>
	<td>Total Fat</td>
	<td>Less Than</td>
	<td>65g</td>
	<td>80g</td>
	</tr>
	<tr>
	<td class="sublabel">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 class="sublabel">Dietary Fiber</td>
	<td></td>
	<td>25g</td>
	<td>30g</td>
	</tr>
	</tbody>
	</table>

	</aside>

	</main>
	</body>
	</html>