{"id":39,"date":"2026-03-27T19:22:44","date_gmt":"2026-03-27T19:22:44","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/e_henderson\/?p=39"},"modified":"2026-03-27T19:22:44","modified_gmt":"2026-03-27T19:22:44","slug":"freefriday-2-6","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/e_henderson\/2026\/03\/27\/freefriday-2-6\/","title":{"rendered":"FreeFriday 2\/6"},"content":{"rendered":"\n<p>Just a showcase of everything I have so far.<br><br><br>&#8211; Rainbow Animaton for the header.<br>&#8211; Hover effects and more animation for the sections and the Header aswell<br>&#8211; (I still need to work on the other sections) But has loads of stuff.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls src=\"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-content\/uploads\/2026\/03\/2026-03-27-15-20-21.mkv\"><\/video><\/figure>\n\n\n\n<p>ANDDDDD here&#8217;s the entire styles sheet! (Took me 1 week do get to this point)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* =========================\n   Base\n   ========================= *\/\n   *{\n     margin: 0;\n     padding: 0;\n     box-sizing: border-box;\n   }\n:root{\n  --page-bg: #ffffff;\n  --panel-bg: #ffffff; \/* fully opaque so ring never shows through *\/\n  --section-radius: 12px;\n  --ring-gap: 8px;\n  --ring-blur: 4px;\n  --ring-speed: 18s;\n  --ring-hover-speed: 10s;\n\n  --z-page-frame: 700;\n  --z-bg-layer: 800;\n  --z-sections: 1000;\n  --z-section-overlay: 1001;\n  --z-header: 1100;\n}\n\nhtml,body{height:100%; }\n\nbody {\n  margin: 0;\n  padding: 0;\n  background: var(--page-bg);\n  min-height: 100vh;\n  position: relative;\n}\n\nbody {\n  background-attachment: fixed;\n  background-size: cover;\n  background-position: center;\n}\n\n\n\/* =========================\n   Page SVG frame\n   ========================= *\/\n.page-frame {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: var(--z-page-frame);\n}\n\n.page-frame .frame-rect {\n  stroke-dasharray: 2000;\n  animation: svgStroke 18s linear infinite;\n  transform-origin: 50% 50%;\n}\n\n@keyframes svgStroke {\n  0%   { stroke-dashoffset: 0;   transform: rotate(0deg); }\n  50%  { stroke-dashoffset: 1000; transform: rotate(180deg); }\n  100% { stroke-dashoffset: 2000; transform: rotate(360deg); }\n}\n\n\/* =========================\n   Background mask layer\n   ========================= *\/\n.bg-layer {\n  position: fixed;\n  inset: 0;\n  background: var(--page-bg);\n  z-index: var(--z-bg-layer);\n  pointer-events: none;\n}\n\n\/* =========================\n   Header\n   ========================= *\/\nheader {\n  background:\n    linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.85)),\n    linear-gradient(90deg, #ff6ec7, #ffa95e, #fff56e, #8aff6e, #6efff5, #6e8aff, #c56eff);\n  background-blend-mode: overlay;\n  background-size: 400% 400%;\n  animation: prismShift 12s ease infinite;\n  color: white;\n  padding: 1rem 2rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: sticky;\n  top: 0;\n  z-index: var(--z-header);\n  width: 100%;\n}\n\n@keyframes prismShift {\n  0%   { background-position: 0% 50%; }\n  50%  { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\nheader h1 {\n  text-shadow:\n    0 0 4px rgba(255, 255, 255, 0.25),\n    0 0 8px rgba(38, 74, 219, 0.15);\n}\n\nheader {\n  border-bottom: 3px solid;\n  border-image: linear-gradient(90deg,\n    #ff6ec7, #ffa95e, #fff56e, #6efff5, #6e8aff\n  ) 1;\n}\n\n\n\n\/* Desktop nav improvements *\/\n.navbar ul {\n  display: flex;\n  gap: 2rem;\n  padding: 0;\n  margin: 0;\n}\n\n\/* Base nav link styling *\/\n.navbar a {\n  position: relative;\n  display: block;\n  padding: 0.5rem 0.25rem;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  color: #f0e6d2;\n  transition: color 0.25s ease, text-shadow 0.25s ease;\n}\n\n\/* Chromatic glow on hover *\/\n.navbar a:hover {\n  color: #ffffff;\n  text-shadow:\n    0 0 6px #ff6ec7,\n    0 0 10px #ffa95e,\n    0 0 14px #6efff5;\n}\n\n\/* Animated chromatic underline *\/\n.navbar a::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  bottom: -4px;\n  width: 0%;\n  height: 3px;\n  background: linear-gradient(\n    90deg,\n    #ff6ec7,\n    #ffa95e,\n    #fff56e,\n    #6efff5,\n    #6e8aff\n  );\n  border-radius: 2px;\n  transition: width 0.35s ease;\n}\n\n\/* Hover underline expansion *\/\n.navbar a:hover::after,\n.navbar a.active::after {\n  width: 100%;\n}\n\n\/* Slight glow behind the underline *\/\n.navbar a:hover::after {\n  box-shadow:\n    0 0 6px #ff6ec7,\n    0 0 10px #ffa95e,\n    0 0 14px #6efff5;\n}\n\n\/* Mobile-friendly nav layout *\/\n@media (max-width: 600px) {\n  .navbar ul {\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  .navbar a {\n    font-size: 1.1rem;\n    padding: 0.75rem 0;\n  }\n\n  .navbar a::after {\n    bottom: -2px;\n  }\n}\n\n\n\/* =========================\n   Sections with masked ring\n   ========================= *\/\n\/* === Option 1: solid panel + safe glow === *\/\n#hero,\n.content-section {\n  position: relative;\n  z-index: 1000;\n  margin: 2rem auto;\n  padding: 2rem;\n  max-width: 900px;\n  border-radius: 12px;\n  background: #ffffff; \/* fully opaque \u2014 prevents any bleed-through *\/\n  box-shadow:\n    0 6px 24px rgba(0,0,0,0.12),\n    0 0 18px rgba(255,110,199,0.06),\n    0 0 36px rgba(255,169,94,0.04);\n  overflow: visible;\n}\n\n\/* remove or keep ring pseudo-element but ensure it cannot show through *\/\n#hero::before,\n.content-section::before {\n  content: \"\";\n  position: absolute;\n  inset: calc(var(--ring-gap) * -1);\n  border-radius: calc(12px + var(--ring-gap));\n  background: conic-gradient(\n    from 0deg,\n    #ff6ec7, #ffa95e, #fff56e, #8aff6e, #6efff5, #6e8aff, #c56eff, #ff6ec7\n  );\n  z-index: 998; \/* below panel *\/\n  filter: blur(6px) saturate(1.05);\n  animation: spinRing var(--ring-speed) linear infinite;\n  pointer-events: none;\n  opacity: 0.9;\n}\n\n\/* overlay covers the whole panel so ring never shows through *\/\n#hero::after,\n.content-section::after {\n  content: \"\";\n  position: absolute;\n  inset: 0; \/* cover entire panel *\/\n  border-radius: 12px;\n  background: #ffffff; \/* fully opaque *\/\n  z-index: 1001; \/* above ring, below content *\/\n  pointer-events: none;\n}\n\n\/* content above overlay *\/\n#hero > *,\n.content-section > * {\n  position: relative;\n  z-index: 1002;\n}\n\n\/* hover pulse: subtly intensify the outer ring (still hidden under overlay) *\/\n#hero:hover::before,\n.content-section:hover::before {\n  animation-duration: 10s;\n  filter: blur(8px) saturate(1.2) brightness(1.08);\n  transform: scale(1.02);\n}\n\n\/* reduced motion *\/\n@media (prefers-reduced-motion: reduce), (max-width: 400px) {\n  #hero::before, .content-section::before { animation: none; filter: none; }\n}\n\n\n\/* =========================\n   Footer\n   ========================= *\/\n\/* put this near the top of your stylesheet after :root *\/\nfooter {\n  position: relative;      \n  z-index: 1200;           \n  background: #2c2a29;    \n  color: #fff;\n  padding: 1rem 2rem;\n}\n\n\/* =========================\n   Reduced motion\n   ========================= *\/\n@media (prefers-reduced-motion: reduce) {\n  #hero::before,\n  .content-section::before,\n  .page-frame .frame-rect,\n  header {\n    animation: none !important;\n  }\n\n}\n@media (max-width: 600px) {\n  .page-frame .frame-rect { animation: none !important; }\n  #hero::before, .content-section::before { animation: none !important; }\n}\n\n@media (max-width: 600px) {\n  #hero, .content-section {\n    padding: 1.25rem;\n  }\n\n  body {\n    font-size: 1rem; \/* slightly larger text *\/\n  }\n}\n\n@media (max-width: 600px) {\n  header {\n    flex-direction: column;\n    text-align: center;\n    padding: 1rem;\n  }\n\n  .navbar ul {\n    flex-direction: column;\n    gap: 0.75rem;\n  }\n}\n\n@media (max-width: 600px) {\n  footer {\n    padding: 1.25rem;\n    font-size: 0.95rem;\n  }\n}\n\n@media (max-width: 600px) {\n  .page-frame {\n    opacity: 0.5; \/* softer frame *\/\n  }\n}\n\n\/* Futuristic base typography *\/\nbody {\n  font-family: 'Segoe UI', 'Roboto', sans-serif;\n  font-size: 17px;\n  line-height: 1.7;\n  letter-spacing: 0.3px;\n  font-weight: 400;\n  color: #1a1a1a;\n}\n\n\/* Futuristic headings *\/\nh1, h2, h3 {\n  font-weight: 700;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  line-height: 1.25;\n  color: #282c2c;\n}\n\n\/* Glow accent for headings *\/\nh1, h2 {\n  text-shadow:\n    0 0 4px rgba(255,110,199,0.25),\n    0 0 8px rgba(110,138,255,0.15);\n}\n\n\/* Size hierarchy *\/\nh1 { font-size: 2.2rem; }\nh2 { font-size: 1.6rem; }\nh3 { font-size: 1.3rem; }\n\n\/* Section spacing *\/\n#hero, .content-section {\n  padding: 3rem;\n  margin: 3.5rem auto;\n}\n\n\/* Mobile adjustments *\/\n@media (max-width: 600px) {\n  body {\n    font-size: 18px;\n    line-height: 1.75;\n  }\n\n  #hero, .content-section {\n    padding: 2rem;\n    margin: 2.5rem auto;\n  }\n\n  h1 { font-size: 1.9rem; }\n  h2 { font-size: 1.45rem; }\n}\n\na{\n    text-decoration: none;\n}\n\n\n\/* Core Beliefs page layout *\/\n.beliefs-page {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n\/* Intro paragraph *\/\n.belief-intro {\n  font-size: 1.1rem;\n  line-height: 1.7;\n  margin-bottom: 2.5rem;\n  opacity: 0.9;\n}\n\n\/* Individual belief blocks *\/\n.belief {\n  padding: 1.5rem 0;\n}\n\n\/* Chromatic divider between beliefs *\/\n.belief + .belief {\n  border-top: 2px solid;\n  border-image: linear-gradient(90deg,\n    #ff6ec7, #ffa95e, #fff56e, #6efff5, #6e8aff\n  ) 1;\n}\n\n\/* Belief titles *\/\n.belief h3 {\n  font-size: 1.4rem;\n  letter-spacing: 1px;\n  margin-bottom: 0.5rem;\n  text-shadow:\n    0 0 4px rgba(255,110,199,0.25),\n    0 0 8px rgba(110,138,255,0.15);\n}\n\n\/* Summary line *\/\n.belief .summary {\n  font-weight: 600;\n  opacity: 0.85;\n  margin-bottom: 0.5rem;\n}\n\n\/* Hover glow for belief titles *\/\n.belief h3:hover {\n  text-shadow:\n    0 0 6px #ff6ec7,\n    0 0 10px #6efff5;\n  transition: 0.25s ease;\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Just a showcase of everything I have so far. &#8211; Rainbow Animaton for the header.&#8211; Hover effects and more animation [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":41,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/posts\/39\/revisions\/41"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/e_henderson\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}