Unit 1 - Lesson 3: Tables and Lists

Lab: Nutrition Facts 🍇

Your task is to create a pixel-perfect replica of this Nutritions Facts label.
This may look simple but, actually, it is a culmination of everything that we have done so far. Thus, this is a checkpoint lab, meaning your project must pass the blink test (or get really close) before you can move forward.
In order to complete this, you should expect to have to look up some things on your own. Often times, the best way to learn new material is to learn "on the job" so don't be afraid of referencing documentation on MDN.
Your goal is to leverage the power of CSS selectors. You can use no more than one ID and one class to complete this project.
Use your semantic tags, you may not use <div> or <span> to complete this project.
Now, the usual...
1. Fork this repo.
2. Clone it.
3. Navigate to the fellow-submissions directory.
4. Create your own first-last folder.
5. Add your HTML and CSS there.
6. Stage and commit your changes regularly.
7. Push back up to your remote repo when done and open a pull request.

Your font stack should use Libre Franklin for the main heading and Helvetica for the remaining fonts. Supply Arial as a back up.

Use description lists for nutrient names and quantities:

<dl>
  <dt>Total Carbohydrates</dt>
  <dd>37g</dd>
</dl>

It might be a good idea to use a table to represent the recommended daily values at the very bottom of the label.
Use a 28px font as the document's root font; use rem units to define other fonts.
Above all, remember: There is no one way to complete this project. I expect to see a bunch of unique implentations and that is okay 👌🏾!

Monday, September 28 at 9AM