{"id":211,"date":"2025-12-19T20:32:18","date_gmt":"2025-12-19T20:32:18","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/h_francois\/?p=211"},"modified":"2025-12-19T20:38:09","modified_gmt":"2025-12-19T20:38:09","slug":"friday-12-12-25","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/h_francois\/2025\/12\/19\/friday-12-12-25\/","title":{"rendered":"friday 12\/12\/25"},"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>this day i worked on building a fun little html project of an animated Ferris wheel using css and some html code ill put below with pictures<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div class=\"wheel\"&gt;\n      &lt;span class=\"line\"&gt;&lt;\/span&gt;\n      &lt;span class=\"line\"&gt;&lt;\/span&gt;\n      &lt;span class=\"line\"&gt;&lt;\/span&gt;\n      &lt;span class=\"line\"&gt;&lt;\/span&gt;\n      &lt;span class=\"line\"&gt;&lt;\/span&gt;\n      &lt;span class=\"line\"&gt;&lt;\/span&gt;\n\n      &lt;div class=\"cabin\"&gt;&lt;\/div&gt;\n      &lt;div class=\"cabin\"&gt;&lt;\/div&gt;\n      &lt;div class=\"cabin\"&gt;&lt;\/div&gt;\n      &lt;div class=\"cabin\"&gt;&lt;\/div&gt;\n      &lt;div class=\"cabin\"&gt;&lt;\/div&gt;\n      &lt;div class=\"cabin\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>this is the divs i used with the classes<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.wheel {\n  border: 2px solid black;\n  border-radius: 50%;\n  margin-left: 50px;\n  position: absolute;\n  height: 55vw;\n  width: 55vw;\n  max-width: 500px;\n  max-height: 500px;\n  animation-name: wheel;\n  animation-duration: 10s;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n}\n\n.line {\n  background-color: black;\n  width: 50%;\n  height: 2px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform-origin: 0% 0%;\n}\n\n.line:nth-of-type(2) {\n  transform: rotate(60deg);\n}\n.line:nth-of-type(3) {\n  transform: rotate(120deg);\n}\n.line:nth-of-type(4) {\n  transform: rotate(180deg);\n}\n.line:nth-of-type(5) {\n  transform: rotate(240deg);\n}\n.line:nth-of-type(6) {\n  transform: rotate(300deg);\n}\n\n.cabin {\n  background-color: red;\n  width: 20%;\n  height: 20%;\n  position: absolute;\n  border: 2px solid;\n  transform-origin: 50% 0%;\n  animation: cabins 10s ease-in-out infinite;\n}\n\n.cabin:nth-of-type(1) {\n  right: -8.5%;\n  top: 50%;\n}\n.cabin:nth-of-type(2) {\n  right: 17%;\n  top: 93.5%;\n}\n.cabin:nth-of-type(3) {\n  right: 67%;\n  top: 93.5%;\n}\n.cabin:nth-of-type(4) {\n  left: -8.5%;\n  top: 50%;\n}\n.cabin:nth-of-type(5) {\n  left: 17%;\n  top: 7%;\n}\n.cabin:nth-of-type(6) {\n  right: 17%;\n  top: 7%;\n}\n\n@keyframes wheel {\n   0% {\n     transform: rotate(0deg);\n   }\n   100% {\n     transform: rotate(360deg);\n   }\n}\n\n@keyframes cabins {\n  0% {\n    transform: rotate(0deg);\n  }\n  25% {\n    background-color: yellow;\n  }\n  50% {\n    background-color: purple;\n  }\n  100% {\n    transform: rotate(-360deg);\n  }<\/code><\/pre>\n\n\n\n<p>code of css mostly consisting of working on the classes i created<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"642\" height=\"600\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/1.png\" alt=\"\" class=\"wp-image-212\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/1.png 642w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/1-300x280.png 300w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"779\" height=\"683\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/2.png\" alt=\"\" class=\"wp-image-213\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/2.png 779w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/2-300x263.png 300w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/2-768x673.png 768w\" sizes=\"auto, (max-width: 779px) 100vw, 779px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"649\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/3.png\" alt=\"\" class=\"wp-image-214\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/3.png 782w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/3-300x249.png 300w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2025\/12\/3-768x637.png 768w\" sizes=\"auto, (max-width: 782px) 100vw, 782px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>this day i worked on building a fun little html project of an animated Ferris wheel using css and some html code ill put below with pictures this is the divs i used with the classes code of css mostly consisting of working on the classes i created<\/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-211","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/211","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=211"}],"version-history":[{"count":2,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/211\/revisions"}],"predecessor-version":[{"id":219,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/211\/revisions\/219"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/media?parent=211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/categories?post=211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/tags?post=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}