From a2744ebdd6bb5f8ad826a91de1c800b65de106e6 Mon Sep 17 00:00:00 2001 From: Danielle Date: Mon, 8 Apr 2024 11:31:54 -0700 Subject: [PATCH] initial commit --- README.md | 13 +++++++ index.html | 82 ++++++++++++++++++++++++++++++++++++++++++ styles.css | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 197 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..ea5075b --- /dev/null +++ b/README.md @@ -0,0 +1,13 @@ +# freeCodeCamp_responsiveWebDesign_nutritionLabel + +## Live Demo + +[Rothko Painting](https://dracula27.github.io/freeCodeCamp_responsiveWebDesign_nutritionLabel/) + +## Project Information + +The third of four(4) learning projects before the second certification project in freeCodeCamp's [Responsive Web Design course](https://www.freecodecamp.org/learn/2022/responsive-web-design/). + +The course/project description from their website is as follows: + +> Typography is the art of styling your text to be easily readable and suit its purpose. In this course, you'll use typography to build a nutrition label webpage. You'll learn how to style text, adjust line height, and position your text using CSS. diff --git a/index.html b/index.html new file mode 100644 index 0000000..0af8f28 --- /dev/null +++ b/index.html @@ -0,0 +1,82 @@ + + + + + Nutrition Label + + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+
+

Amount per serving

+

Calories

+
+ 230 +
+
+
+

% Daily Value *

+
+

+ Total Fat 8g + 10% +

+

+ Saturated Fat 1g 5% +

+
+

+ Trans Fat 0g +

+
+

+ Cholesterol 0mg + 0% +

+

+ Sodium 160mg + 7% +

+

+ Total Carbohydrate 37g + 13% +

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

+ Includes 10g Added Sugars 20% +

+
+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+
+

+ * The % Daily Value (DV) tells you how much a nutrient in a + serving of food contributes to a daily diet. 2,000 calories a + day is used for general nutrition advice. +

+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b09fd58 --- /dev/null +++ b/styles.css @@ -0,0 +1,102 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px; +} + +p { + margin: 0; + display: flex; + justify-content: space-between; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.large { + height: 10px; +} + +.large, +.medium { + background-color: black; + border: 0; +} + +.medium { + height: 5px; +} + +.small-text { + font-size: 0.85rem; +} + +.calories-info { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.calories-info h2 { + margin: 0; +} + +.left-container p { + margin: -5px -2px; + font-size: 2em; + font-weight: 700; +} + +.calories-info span { + margin: -7px -2px; + font-size: 2.4em; + font-weight: 700; +} + +.right { + justify-content: flex-end; +} + +.indent { + margin-left: 1em; +} + +.double-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} + +.note { + font-size: 0.6rem; + margin: 5px 0; + padding: 0 8px; + text-indent: -8px; +}