411.rip | For you~

~ Don't claim as your own.
~ Crediting is nice, but not super necessary.
~ Link back if you use :)

Time-sensitive header

Putting this here because I couldn't find anything like this elsewhere. Basically, have your header image change based on the time of day!

This version has 5 headers (dawn, morning, afternoon, evening and night). You'll need HTML and CSS knowledge for styling and JavaScript knowledge for further customization.

HTML

<header id="myHeader"></header>

JS

let now=new Date();
let hour=now.getHours();
const header=document.getElementById("myHeader");
                
function headerImage(){
    if ( hour > 0 && hour <= 7 ){
        header.style.backgroundImage = "url(/img/headers/dawn.jpg)";
    }
    else if (hour > 7 && hour <= 11 ){
        header.style.backgroundImage = "url(/img/headers/morning.jpg)";
    }
    else if (hour >= 12 && hour < 18 ){
        header.style.backgroundImage = "url(/img/headers/afternoon.jpg)";
    }
    else if (hour >= 18 && hour < 20 ){
        header.style.backgroundImage = "url(/img/headers/evening.jpg)";
    }
    else {
        header.style.backgroundImage = "url(/img/headers/night.jpg)";
    }
}
                
headerImage();

Xanje fancies

Tamagotchi

[fancypost bordercolor=black; width: 300px; height: 300px; background:url(https://file.garden/ZXGTjTtcLzaPWNqI/Forum/home.jpg); background-size: cover; border-radius: 20px; font-family: monospace; padding: 77px 10px; box-sizing: border-box;][fancypost bordercolor=black; padding: 15px; box-sizing: border-box; background-color: white; width: 100%; height: 100%; overflow: auto; color: black;]TEXT GOES HERE[/fancypost]
[/fancypost][fancypost borderwidth=0px; width: 300px; font-family: monospace; font-size: .8rem; positon: absolute;][right]Layout by @devils[/right][/fancypost]

Exhibition

[fancypost borderwidth=10px; border-color: brown; border-style: ridge; width: fit-content; height: fit-content; background-color: beige; margin-bottom: 20px; padding: 0; text-align: center;][img]IMG LINK[/img][/fancypost][fancypost bordercolor=black; width: 300px; background-color: white; padding: 5px; color: black; font-family: serif;][center]TEXT GOES HERE[/center][/fancypost]
[center][size=7pt]Layout by @devils[/size][/center]