Skip to content

Instantly share code, notes, and snippets.

@xullnn

xullnn/nutrition_facts.html

Last active April 17, 2019 12:30
Show Gist options
  • Save xullnn/8edd027d0c903e3dec88293899259560 to your computer and use it in GitHub Desktop.
Save xullnn/8edd027d0c903e3dec88293899259560 to your computer and use it in GitHub Desktop.
Download ZIP
practice html and css
Raw
nutrition_facts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html {
font-size: 32px;
font-family: "Helvetica Black", Helvetica;
}
* {
margin: 0;
}
main {
min-width: 650px;
max-width: 1200px;
border: 4px solid black;
margin: 10px;
padding: 0 15px;
}
table {
width: 100%;
border-collapse: collapse;
}
aside {
font-size: 0.7em;
}
label {
font-size: 1.1rem;
font-weight: 800;
}
main > table tr td:nth-child(2n+1) {
text-align: left;
}
main > table tr td:nth-child(2n+2) {
text-align: right;
}
th {
font-weight: normal;
text-align: left;
}
th, td {
height: 1.3em;
}
tr {
border-bottom: 1.5px solid rgb(120, 120, 120);
}
h1 {
font-size: 90px;
}
h1,label, b {
margin: 0;
font-family: "Franklin Gothic Heavy", Impact;
}
b {
font-size: .7em;
}
.sublabel{
padding-left: 1em;
}
.bold_bottom {
border-bottom: 30px solid black;
padding-bottom: 10px;
}
thead.medium_bottom {
border-bottom: 10px solid black;
}
</style>
<title>Practice</title>
</head>
<body>
<main>
<header class="bold_bottom">
<h1>Nutrition Facts</h1>
<p>Serving Size 2/3 cup (55g)</p>
<p>Servings Per Container About 8</p>
</header>
<table>
<thead class="medium_bottom">
<tr>
<th><b>Amount Per Serving</b></th>
<th></th>
</tr>
<tr>
<td><label>Calories 230</label></td>
<td>Calories from Fat 40</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><b>% Daily Value*</b></td>
</tr>
<tr>
<td><label>Total Fat</label> 8g</td>
<td>12%</td>
</tr>
<tr>
<td class="sublabel">Saturated Fat 1g</td>
<td>5%</td>
</tr>
<tr>
<td class="sublabel"><i>Trans</i> Fat 0g</td>
<td></td>
</tr>
<tr>
<td><label>Cholesterol</label> 0mg</td>
<td>0%</td>
</tr>
<tr>
<td><label>Sodium</label> 160mg</td>
<td>7%</td>
</tr>
<tr>
<td><label>Total Carbohydrate</label> 37g</td>
<td>12%</td>
</tr>
<tr>
<td class="sublabel">Dietary Fiber 4g</td>
<td>16%</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>
<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>
</tbody>
</table>
<aside>
<p>* Percent Daily Values are based on a 2000 calorie diet. Your datly value may be higher or lower depending on 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