260128
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>26128 #genuary2026</title>
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: #9dbdba;
overflow: hidden;
}
main {
position: relative;
width: 800px;
height: 800px;
margin: auto;
top: 50%;
transform: translateY(-50%);
transform-style: preserve-3d;
animation: spin 10s linear infinite;
}
div {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
font-size: 36px;
font-family:"Futura", sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
color: #fff;
box-sizing: border-box;
animation: spin-bezier 1.5s cubic-bezier(0.668, 0.262, 0.47, 1) infinite;
}
div:nth-of-type(1) { background-color: #f8b042; --rotate-y: 0deg; animation-delay: 0s; }
div:nth-of-type(2) { background-color: #e47763; --rotate-y: 45deg; animation-delay: 0.05s; }
div:nth-of-type(3) { background-color: #253276; --rotate-y: 90deg; animation-delay: 0.1s; }
div:nth-of-type(4) { background-color: #dfdad3; --rotate-y: 135deg; animation-delay: 0.15s; }
div:nth-of-type(5) { background-color: #f8b042; --rotate-y: 180deg; animation-delay: 0.2s; }
div:nth-of-type(6) { background-color: #e47763; --rotate-y: 225deg; animation-delay: 0.25s; }
div:nth-of-type(7) { background-color: #253276; --rotate-y: 270deg; animation-delay: 0.3s; }
div:nth-of-type(8) { background-color: #dfdad3; --rotate-y: 315deg; animation-delay: 0.35s; }
@keyframes spin {
0% {
transform: translateY(-50%) rotateY(0deg);
}
100% {
transform: translateY(-50%) rotateY(360deg);
}
}
@keyframes spin-bezier {
0% {
transform: translate(-50%, -50%) rotateY(var(--rotate-y, 0deg)) translateZ(400px) rotateX(0deg);
}
30% {
transform: translate(-50%, -50%) rotateY(var(--rotate-y, 0deg)) translateZ(400px) rotateX(0deg);
}
100% {
transform: translate(-50%, -50%) rotateY(var(--rotate-y, 0deg)) translateZ(400px) rotateX(360deg);
}
}
</style>
<main>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
</main>
</body>
</html>Day28:No libraries, no canvas, only HTML elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>26128 #genuary2026</title>
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: #9dbdba;
overflow: hidden;
}
main {
position: relative;
width: 800px;
height: 800px;
margin: auto;
top: 50%;
transform: translateY(-50%);
transform-style: preserve-3d;
animation: spin 10s linear infinite;
}
div {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
font-size: 36px;
font-family:"Futura", sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
color: #fff;
box-sizing: border-box;
animation: spin-bezier 1.5s cubic-bezier(0.668, 0.262, 0.47, 1) infinite;
}
div:nth-of-type(1) { background-color: #f8b042; --rotate-y: 0deg; animation-delay: 0s; }
div:nth-of-type(2) { background-color: #e47763; --rotate-y: 45deg; animation-delay: 0.05s; }
div:nth-of-type(3) { background-color: #253276; --rotate-y: 90deg; animation-delay: 0.1s; }
div:nth-of-type(4) { background-color: #dfdad3; --rotate-y: 135deg; animation-delay: 0.15s; }
div:nth-of-type(5) { background-color: #f8b042; --rotate-y: 180deg; animation-delay: 0.2s; }
div:nth-of-type(6) { background-color: #e47763; --rotate-y: 225deg; animation-delay: 0.25s; }
div:nth-of-type(7) { background-color: #253276; --rotate-y: 270deg; animation-delay: 0.3s; }
div:nth-of-type(8) { background-color: #dfdad3; --rotate-y: 315deg; animation-delay: 0.35s; }
@keyframes spin {
0% {
transform: translateY(-50%) rotateY(0deg);
}
100% {
transform: translateY(-50%) rotateY(360deg);
}
}
@keyframes spin-bezier {
0% {
transform: translate(-50%, -50%) rotateY(var(--rotate-y, 0deg)) translateZ(400px) rotateX(0deg);
}
30% {
transform: translate(-50%, -50%) rotateY(var(--rotate-y, 0deg)) translateZ(400px) rotateX(0deg);
}
100% {
transform: translate(-50%, -50%) rotateY(var(--rotate-y, 0deg)) translateZ(400px) rotateX(360deg);
}
}
</style>
<main>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
<div>
<p>GENUARY 2026</p>
</div>
</main>
</body>
</html>