{"id":151,"date":"2024-11-08T20:25:01","date_gmt":"2024-11-08T20:25:01","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/h_francois\/?p=151"},"modified":"2024-11-08T20:25:01","modified_gmt":"2024-11-08T20:25:01","slug":"friday-11-8-24","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/h_francois\/2024\/11\/08\/friday-11-8-24\/","title":{"rendered":"friday 11\/8\/24"},"content":{"rendered":"\n<p>i worked on code camp making a nutrition label using html and styles.css to start off i used div, h1, &amp; p to get the text down and then went into styles and used box-sizing, font-sizing, &amp; adding margins, padding etc(ill put down the code below along with pictures). I only got through making the label so far.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Nutrition Label&lt;\/title>\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,700,800\" rel=\"stylesheet\">\n  &lt;link href=\".\/styles.css\" rel=\"stylesheet\">\n&lt;\/head>\n\n&lt;body>\n  &lt;div class=\"label\">\n    &lt;h1>Nutrition Facts&lt;\/h1>\n    &lt;div class=\"divider\">&lt;\/div>\n    &lt;p>8 servings per container&lt;\/p>\n    &lt;p class=\"bold\">Serving size 2\/3 cup (55g)&lt;\/p>\n  &lt;\/div>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>* {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 16px;\n}\n\nbody {\n  font-family: 'Open Sans', sans-serif;\n}\n\n.label {\n  border: 2px solid black;\n  width: 270px;\n  margin: 20px auto;\n  padding: 0 7px;\n}\n\nh1 {\n  font-weight: 800;\n  text-align: center;\n  margin: -4px 0;\n  letter-spacing: 0.15px;\n}\n\np {\n  margin: 0;\n}\n\n.divider {\n  border-bottom: 1px solid #888989;\n  margin: 2px 0;\n}\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2024\/11\/nutr-1024x550.png\" alt=\"\" class=\"wp-image-152\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2024\/11\/nutr-1024x550.png 1024w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2024\/11\/nutr-300x161.png 300w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2024\/11\/nutr-768x413.png 768w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2024\/11\/nutr-1536x825.png 1536w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2024\/11\/nutr.png 1899w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>i worked on code camp making a nutrition label using html and styles.css to start off i used div, h1, &amp; p to get the text down and then went into styles and used box-sizing, font-sizing, &amp; adding margins, padding etc(ill put down the code below along with pictures). I only got through making the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-151","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/comments?post=151"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/151\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/151\/revisions\/153"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/media?parent=151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/categories?post=151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/tags?post=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}