{"id":216,"date":"2025-12-19T20:37:47","date_gmt":"2025-12-19T20:37:47","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/h_francois\/?p=216"},"modified":"2025-12-19T20:37:47","modified_gmt":"2025-12-19T20:37:47","slug":"friday-12-19-2025","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/h_francois\/2025\/12\/19\/friday-12-19-2025\/","title":{"rendered":"friday 12\/19\/2025"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-contrast-color has-text-color has-link-color wp-elements-a08d8503077e2c3f2eae819c26bdbdad has-global-padding is-layout-constrained wp-container-core-group-is-layout-23b1a4dc wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-b585a4aa wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-flex wp-container-core-group-is-layout-7a92790e wp-block-group-is-layout-flex\"><div class=\"is-default-size wp-block-site-logo\"><a href=\"https:\/\/theroyalscode.com\/students\/h_francois\/\" class=\"custom-logo-link\" rel=\"home\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"200\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2023\/12\/cropped-F-removebg-preview.png\" class=\"custom-logo\" alt=\"Rookie Programmer\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2023\/12\/cropped-F-removebg-preview.png 280w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2023\/12\/cropped-F-removebg-preview-158x113.png 158w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/a><\/div>\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-30a70405 wp-block-group-is-layout-flex\"><h1 class=\"has-link-color wp-elements-d6202aa7d337f2ce08aedc8ed261a84e wp-block-site-title\"><a href=\"https:\/\/theroyalscode.com\/students\/h_francois\" target=\"_self\" rel=\"home\">Rookie Programmer<\/a><\/h1>\n\n<\/div>\n<\/div>\n\n\n<nav class=\"has-small-font-size is-responsive items-justified-right wp-block-navigation is-content-justification-right is-layout-flex wp-container-core-navigation-is-layout-f665d2b5 wp-block-navigation-is-layout-flex\" aria-label=\"Navigation\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Menu\"}'><button aria-haspopup=\"dialog\" aria-label=\"Open menu\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\"  id=\"modal-1\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Close menu\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-1-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container has-small-font-size is-responsive items-justified-right wp-block-navigation has-small-font-size\"><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/theroyalscode.com\/students\/h_francois\/author\/hfrancois\/\"><span class=\"wp-block-navigation-item__label\">blog<\/span><\/a><\/li><\/ul>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav><\/div>\n<\/div>\n\n\n\n<p>today i worked on making a cat painting using html and css i had a black cat with a background of #c9d2fc and made everything using divs with classes<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>* {\n  box-sizing: border-box;\n}\n\nbody {\n  background-color: #c9d2fc;\n}\n\n.cat-head {\n  position: absolute;\n  right: 0;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  background: linear-gradient(#5e5e5e 85%, #45454f 100%);\n  width: 205px;\n  height: 180px;\n  border: 1px solid #000;\n  border-radius: 46%;\n}\n\n.cat-left-ear {\n  position: absolute;\n  top: -26px;\n  left: -31px;\n  z-index: 1;\n  border-top-left-radius: 90px;\n  border-top-right-radius: 10px;\n  transform: rotate(-45deg);\n  border-left: 35px solid transparent;\n  border-right: 35px solid transparent;\n  border-bottom: 70px solid #5e5e5e;\n}\n\n.cat-right-ear {\n  position: absolute;\n  top: -26px;\n  left: 163px;\n  z-index: 1;\n  transform: rotate(45deg);\n  border-top-left-radius: 90px;\n  border-top-right-radius: 10px;\n  border-left: 35px solid transparent;\n  border-right: 35px solid transparent;\n  border-bottom: 70px solid #5e5e5e;\n}\n\n.cat-left-inner-ear {\n  position: absolute;\n  top: 22px;\n  left: -20px;\n  border-top-left-radius: 90px;\n  border-top-right-radius: 10px;\n  border-bottom-right-radius: 40%;\n  border-bottom-left-radius: 40%;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  border-bottom: 40px solid #3b3b4f;\n}\n\n.cat-right-inner-ear {\n  position: absolute;\n  top: 22px;\n  left: -20px;\n  border-top-left-radius: 90px;\n  border-top-right-radius: 10px;\n  border-bottom-right-radius: 40%;\n  border-bottom-left-radius: 40%;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  border-bottom: 40px solid #3b3b4f;\n}\n\n.cat-left-eye {\n  position: absolute;\n  top: 54px;\n  left: 39px;\n  border-radius: 60%;\n  transform: rotate(25deg);\n  width: 30px;\n  height: 40px;\n  background-color: #000;\n}\n\n.cat-right-eye {\n  position: absolute;\n  top: 54px;\n  left: 134px;\n  border-radius: 60%;\n  transform: rotate(-25deg);\n  width: 30px;\n  height: 40px;\n  background-color: #000;\n}\n\n.cat-left-inner-eye {\n  position: absolute;\n  top: 8px;\n  left: 2px;\n  width: 10px;\n  height: 20px;\n  transform: rotate(10deg);\n  background-color: #fff;\n  border-radius: 60%;\n}\n\n.cat-right-inner-eye {\n  position: absolute;\n  top: 8px;\n  left: 18px;\n  transform: rotate(-5deg);\n  width: 10px;\n  height: 20px;\n  background-color: #fff;\n  border-radius: 60%;\n}\n\n.cat-nose {\n  position: absolute;\n  top: 108px;\n  left: 85px;\n  border-top-left-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border-bottom-left-radius: 50%;\n  transform: rotate(180deg);\n  border-left: 15px solid transparent;\n  border-right: 15px solid transparent;\n  border-bottom: 20px solid #442c2c;\n}\n\n.cat-mouth div {\n  width: 30px;\n  height: 50px;\n  border: 2px solid #000;\n  border-radius: 190%\/190px 150px 0 0;\n  border-color: black transparent transparent transparent;\n}\n\n.cat-mouth-line-left {\n  position: absolute;\n  top: 88px;\n  left: 74px;\n  transform: rotate(170deg);\n}\n\n.cat-mouth-line-right {\n  position: absolute;\n  top: 88px;\n  left: 91px;\n  transform: rotate(165deg);\n}\n\n.cat-whiskers-left div {\n  width: 40px;\n  height: 1px;\n  background-color: #000;\n}\n\n.cat-whiskers-right div {\n  width: 40px;\n  height: 1px;\n  background-color: #000;\n}\n\n.cat-whisker-left-top {\n  position: absolute;\n  top: 120px;\n  left: 52px;\n  transform: rotate(10deg);\n}\n\n.cat-whisker-left-middle {\n  position: absolute;\n  top: 127px;\n  left: 52px;\n  transform: rotate(3deg);\n}\n\n.cat-whisker-left-bottom {\n  position: absolute;\n  top: 134px;\n  left: 52px;\n  transform: rotate(-3deg);\n}\n\n.cat-whisker-right-top {\n  position: absolute;\n  top: 120px;\n  left: 109px;\n  transform: rotate(-10deg);\n}\n\n.cat-whisker-right-middle {\n  position: absolute;\n  top: 127px;\n  left: 109px;\n  transform: rotate(-3deg);\n}\n\n.cat-whisker-right-bottom {\n  position: absolute;\n  top: 134px;\n  left: 109px;<\/code><\/pre>\n\n\n\n<p>the css used<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"959\" height=\"591\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/cat1.png\" alt=\"\" class=\"wp-image-217\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/cat1.png 959w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/cat1-300x185.png 300w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/cat1-768x473.png 768w\" sizes=\"auto, (max-width: 959px) 100vw, 959px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>today i worked on making a cat painting using html and css i had a black cat with a background of #c9d2fc and made everything using divs with classes the css used<\/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-216","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/216","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=216"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/216\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}