Skip to content

Instantly share code, notes, and snippets.

@xullnn

xullnn/revised_nutrition_facts.html

Last active April 19, 2019 02:33
Show Gist options
  • Save xullnn/f78b7dcc110c8ccae693c9b6614e1ec9 to your computer and use it in GitHub Desktop.
Save xullnn/f78b7dcc110c8ccae693c9b6614e1ec9 to your computer and use it in GitHub Desktop.
Download ZIP
Revision
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment