October 2023
01/10/2023
Solution:
<p></p>
<p a></p>
<style>
body {
background: #ed6a9d;
}
p {
width: 400;
height: 50;
background: #050044;
margin: 125 -8;
}
p[a] {
rotate: 90deg;
margin: -125 -8;
}
</style>
Minified:
<style>*>*{background:linear-gradient(#00000000 125px,#050044 0,#050044 175px,#00000000 0),linear-gradient(90deg,#ED6A9D 175px,#050044 0,#050044 225px,#ED6A9D 0
02/10/2023
Solution:
<p></p>
<style>
body {
background: radial-gradient(circle at 50% 175px, #230259 100px, #b5d1fb 0);
}
p {
width: 300px;
height: 150px;
background: #8819f6;
margin: 25 auto;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
</style>
Minified:
<p><style>body{background:radial-gradient(circle at 50%175px,#230259 25vw,#B5D1FB 0)}p{width:300;height:150;background:#8819F6;margin:25 42;clip-path:polygon(50%0,100%100%,0 100%
03/10/2023
Solution:
<p></p>
<p a></p>
<p b>
<style>
body {
background: radial-gradient(
circle,
#9cccdb 5ch,
#fefae0 0,
#fefae0 90px,
#9cccdb 0,
#9cccdb 110px,
#fefae0 0
);
}
p {
width: 20;
height: 60;
background: #9cccdb;
position: fixed;
top: 35;
left: 190;
}
p[a] {
rotate: 60deg;
top: 136;
left: 135;
}
p[b] {
top: 136px;
left: 245px;
rotate: -60deg;
}
</style>
</p>
Minified:
<p><p a><p b><style>*{background:radial-gradient(circle,#9CCCDB 5ch,#FEFAE0 0,#FEFAE0 90px,#9CCCDB 0,#9CCCDB 110px,#FEFAE0 0);}p{width:20;height:60;background:#9CCCDB;position:fixed;top:35;left:190}p[a],p[b]{rotate:60deg;top:136;left:135}p[b]{left:245px;rotate:-60deg
04/10/2023
Solution:
<div></div>
<p></p>
<style>
body {
background: #da30d4;
}
div {
width: 120px;
height: 120px;
border: solid 40px #0c0c49;
border-radius: 50%;
border-bottom-color: transparent;
rotate: 45deg;
margin: 50 auto 0;
}
p {
width: 40px;
height: 100px;
background: #0c0c49;
margin: -40 auto;
}
</style>
Minified:
<body bgcolor=DA30D4><p><h1><style>p{width:120;height:120;border:solid 5ch#0C0C49;border-radius:50%;border-bottom-color:#00000000;rotate:45deg;margin:50 92 0}h1{width:40;height:100;background:#0C0C49;margin:-40 172
05/10/2023
Solution:
<p a></p>
<p></p>
<p b></p>
<style>
body {
background: #4f77ff;
}
p {
width: 100;
height: 150;
background: #fff;
border-radius: 50px;
margin: -225 117 0;
}
p[a] {
width: 50;
margin: 75 47;
}
p[b] {
margin: -150 237;
}
</style>
Minified:
<body bgcolor=4F77FF><p a><p><p b><style>p{width:100;height:150;background:#FFF;border-radius:7ch;margin:-225 117 0}p[a]{width:50;margin:75 47}p[b]{margin:-150 237
06/10/2023
Solution:
<p></p>
<h1></h1>
<style>
body {
background: #f0cd48;
}
p {
width: 120px;
aspect-ratio: 1;
border: solid 40px #66284a;
border-radius: 50% 50% 0 0;
margin: 50 92;
}
h1 {
width: 40;
height: 100;
background: #66284a;
border-radius: 20px;
margin: -170 172;
}
</style>
Minified:
<body bgcolor=F0CD48><p><p a><style>p{width:120;height:120;border:solid 5ch#66284A;border-radius:50%50%0 0;margin:50 92}p[a]{width:0;height:80;border-radius:3ch;margin:-170 172;border-width:20
07/10/2023
Solution:
<p></p>
<p a></p>
<style>
body {
background: #a9c482;
}
p {
width: 80;
height: 260;
border: solid 40px #2d696f;
border-radius: 100px;
margin: 40 52 0;
clip-path: polygon(0 0, 100% 0, 100% 90px, 120px 90px, 40px 100%, 0 100%);
}
p[a] {
margin: -460 172;
rotate: 180deg;
}
</style>
Minified:
<body bgcolor=A9C482><p><p a><style>p{width:80;height:260;border:solid 5ch#2D696F;border-radius:5em;margin:40 52;clip-path:polygon(0 0,100%0,100%90px,60%90px,10%100%,0 100%)}p[a]{margin:-500 172;scale:-1-1
08/10/2023
Solution:
<p></p>
<p a></p>
<style>
body {
background: radial-gradient(
1Q,
#ed6a9d 80px,
#050044 80px,
#050044 120px,
#ed6a9d 0
);
margin: 0;
}
p {
width: 400;
height: 40;
background: #ed6a9d;
margin: 130 0;
position: fixed;
}
p[a] {
transform: rotate(90deg);
}
</style>
Minified:
<p><p a><style>body{background:radial-gradient(1q,#ED6A9D 5em,#050044 5em,#050044 30vw,#ED6A9D 0)}p{width:400;height:40;background:#ED6A9D;margin:122-8;position:fixed}p[a]{rotate:90deg
09/10/2023
Solution:
<p></p>
<h1></h1>
<style>
body {
background: #b5d1fb;
margin: 30 110;
}
p {
width: 60;
height: 60;
background: #230259;
border-radius: 50%;
box-shadow: 120px 180px #230259;
}
h1 {
width: 60;
height: 240;
background: #8819f6;
border-radius: 50px;
margin: 30 0;
box-shadow: 120px -180px #8819f6;
}
</style>
Minified:
<body bgcolor=B5D1FB><p><p a><style>p{width:60;height:60;background:#230259;border-radius:5ch;box-shadow:30vw 60vh#230259;margin:30 102}p[a]{height:240;background:#8819F6;box-shadow:30vw -60vh#8819F6
10/10/2023
Solution:
<p></p>
<p a></p>
<h1></h1>
<style>
body {
background: #fefae0;
}
p {
width: 60;
height: 60;
border-radius: 50%;
border: solid 30px #9cccdb;
margin: 90 57;
}
p[a] {
margin: -210 207;
}
h1 {
width: 30;
height: 150;
box-shadow: 57px 130px #9cccdb, 297px 130px #9cccdb;
}
</style>
Minified:
<body bgcolor=FEFAE0><p><p a><h1><style>p{width:60;height:60;border-radius:50%;border:solid 30px#9CCCDB;margin:90 57}p[a]{margin:-210 207}h1{width:30;height:150;box-shadow:57px 130px#9CCCDB, 297px 130px#9CCCDB
11/10/2023
Solution:
<p></p>
<p a></p>
<p b></p>
<style>
* {
background: #da30d4;
}
p {
position: fixed;
width: 60;
height: 60;
border: solid 30px #0c0c49;
border-radius: 50%;
top: 74;
left: 60;
}
p[b] {
width: 100;
height: 100;
left: 120;
top: 54;
}
p[a] {
left: 220;
}
</style>
Minified:
<p><p a><p b><style>*{background:#DA30D4}p{position:fixed;width:60;aspect-ratio:1;border:solid 30px#0C0C49;border-radius:50%;top:74;left:60}p[b]{width:100;left:120;top:54}p[a]{left:220
12/10/2023
Solution:
<p></p>
<p a></p>
<p a b></p>
<style>
body {
background: #fefae3;
}
p {
width: 170;
height: 50;
border-radius: 50px;
margin: 125 105;
background: #d4a469;
}
[a] {
width: 150;
rotate: -45deg;
background: #b17036;
translate: -28px -210px;
}
[b] {
translate: 52px -315px;
}
</style>
Minified:
<body bgcolor=FEFAE3><p><p a><p a b><style>p{width:170;height:50;border-radius:4ch;margin:125 105;background:#D4A469}[a]{width:150;rotate:-45deg;background:#B17036;translate:-28px -70vh}[b]{translate:52px -315px
13/10/2023
Solution:
<p></p>
<p a></p>
<h1></h1>
<style>
body {
background: linear-gradient(
90deg,
#f0cd48 185px,
#66284a 0,
#66284a 215px,
#f0cd48 0
);
}
p {
width: 60;
height: 60;
border-radius: 50%;
border: solid 30px #66284a;
margin: 90 32;
}
p[a] {
margin: -210 232;
}
h1 {
width: 90;
height: 30;
background: #66284a;
margin: 135 auto;
}
</style>
Minified:
<p><p a><h1><style>body{background:linear-gradient(90deg,#F0CD48 185px,#66284A 0 215px,#F0CD48 0)}p{width:60;height:60;border-radius:50%;border:solid 32q#66284A;margin:90 32}[a]{margin:-210 232}h1{width:90;height:30;background:#66284A;margin:135 150
14/10/2023
Solution:
<p></p>
<p a></p>
<style>
body {
background: #a9c482;
}
p {
width: 100;
height: 250;
background: #2d696f;
margin: 25 67;
box-shadow: 150px 0 #2d696f;
}
p[a] {
width: 150;
height: 50;
margin: -175 117;
box-shadow: 0 100px #a9c482, 0 -100px #a9c482, 75px 0 #a9c482, -75px 0
#a9c482;
}
</style>
Minified:
<body bgcolor=A9C482><p><p a><style>p{width:100;height:250;background:#2D696F;margin:25 67;box-shadow:50vh 0#2D696F}[a]{width:150;height:50;margin:-175 117;box-shadow:0 25vw#A9C482,0-25vw#A9C482,75q 0#A9C482,-75q 0#A9C482
15/10/2023
Solution:
<p></p>
<h1></h1>
<h1 a></h1>
<style>
body {
background: #f3ead2;
}
p {
width: 190;
height: 190;
border-radius: 50%;
border: solid 30px #42a5f5;
margin: 25 67;
background: linear-gradient(
90deg,
#f3ead2 80px,
#42a5f5 0 110px,
#f3ead2 0
);
}
h1 {
width: 30;
height: 100;
background: #42a5f5;
position: fixed;
top: 110.5;
left: 217;
rotate: -45deg;
}
h1[a] {
left: 153;
rotate: 45deg;
}
</style>
Minified:
<body bgcolor=F3EAD2><p><a><a a><style>p{width:190;height:190;border-radius:50%;border:solid 32q#42A5F5;margin:25 67;background:linear-gradient(90deg, #F3EAD2 5em,#42A5F5 0 110px,#F3EAD2 0)}a{width:30;height:100;background:#42A5F5;position:fixed;top:132;left:217;rotate:-45deg}[a]{left:153;rotate:45deg
16/10/2023
Solution:
<p></p>
<h1></h1>
<style>
body {
background: #b5d1fb;
}
p {
width: 130;
height: 30;
background: #8819f6;
margin: 105 auto;
border: solid 30px #b5d1fb;
outline: solid 30px#230259;
}
h1 {
width: 30;
height: 150;
background: #8819f6;
position: fixed;
top: 140;
left: 185;
box-shadow: 30px 4px #b5d1fb, -30px 4px #b5d1fb;
}
</style>
Minified:
<body bgcolor=B5D1FB><p><a><style>p{width:130;height:30;background:#8819F6;margin:105 97;border:solid 32q#B5D1FB;outline:solid 32q#230259}a{width:30;height:150;background:#8819F6;position:fixed;top:150;left:185;box-shadow:30px 20q#B5D1FB,-30px 20q#B5D1FB
17/10/2023
Solution:
<p></p>
<style>
body {
background: #ed6a9d;
}
p {
width: 200;
height: 200;
background: linear-gradient(45deg, #ed6a9d 50%, #050044 0);
background-size: 100px 100px;
margin: 50 92;
}
</style>
Minified:
<body bgcolor=ED6A9D><p><style>p{height:200;background:linear-gradient(45deg,#ED6A9D 50%,#050044 0);background-size:25vw 25vw;margin:50 92
18/10/2023
Solution:
<div></div>
<style>
body {
background: #fefae0;
}
div {
width: 160px;
height: 160px;
background: #a461e8;
box-shadow: inset 80px 80px #9cccdb;
rotate: 225deg;
margin: 70 auto;
}
</style>
Minified:
<body bgcolor=FEFAE0><p><style>p{width:80;height:80;background:#A461E8;box-shadow:5ch 5ch 0 5ch#9CCCDB;rotate:45deg;margin:14%152
19/10/2023
Solution:
<p></p>
<p a></p>
<p b></p>
<style>
body {
background: #f6e49c;
}
p {
width: 40;
height: 40;
color: #2f5c24;
border: solid 40px;
margin: 90 52;
}
p[a] {
margin: -210 212;
}
p[b] {
border: 0;
background: #f6e49c;
margin: 130 52;
box-shadow: 120px 0;
}
</style>
Minified:
<p><p a><p b><style>*{background:#F6E49C}p{width:40;height:40;color:2F5C24;border:solid 5ch;margin:90 52}[a]{margin:-210 212}[b]{border:0;margin:130 52;box-shadow:127q 0
20/10/2023
Solution:
<div></div>
<style>
body {
background: linear-gradient(
45deg,
#f0cd48 97.5px,
#d86f45 0 197.5px,
#f0cd48 0 297.5px,
#d86f45 0 397.5px,
#f0cd48 0
);
}
div {
width: 100px;
height: 100px;
background: #5f3829;
margin: 100 142;
rotate: 45deg;
}
</style>
Minified:
<p><style>body{background:linear-gradient(45deg,#F0CD48 103q,#D86F45 0 209q,#F0CD48 0 315q,#D86F45 0 421q,#F0CD48 0)}p{width:100;height:100;background:#5F3829;margin:26%142;rotate:45deg
21/10/2023
Solution:
<body bgcolor="4F77FF">
<p></p>
<h1>
<style>
p {
width: 400;
height: 200;
background: #284ed0;
border-radius: 200px 200px 0 0;
margin: 150-8;
}
h1 {
width: 100;
height: 100;
background: radial-gradient(
circle at 50% 250px,
#8092d0 200px,
#fff 200px
);
margin: -400 auto;
}
</style>
</h1>
</body>
Minified:
<body bgcolor=4F77FF><p><h1><style>p{height:400;background:#284ED0;border-radius:50%;margin:150-8}h1{width:100;height:100;background:radial-gradient(250q at 50% 250px,#8092D0 50vw,#FFF 0);margin:-600 142
22/10/2023
Solution:
<p></p>
<h1>
<style>
& {
background: #5e2d8c;
color: #42a5f5;
}
p {
width: 200;
height: 120;
margin: 60 62;
border: solid 30px;
}
h1 {
width: 25;
border: solid 30px;
margin: -180 92;
box-shadow: 115px 0;
}
</style>
</h1>
Minified:
<p><p a><style>&{background:#5E2D8C;color:42A5F5}p{width:200;height:120;margin:60 62;border:solid 32q}[a]{width:25;height:0;margin:-180 92;box-shadow:122q 0
23/10/2023
Solution:
<p></p>
<style>
body {
background: #fefae0;
color: #9cccdb;
}
p {
width: 0;
border: solid 25px;
margin: 125 67;
box-shadow: 25vw -100px, 25vw 25vw, 25vw 0 0 25px, 50vw 0;
}
</style>
Minified:
<p><style>*{background:#FEFAE0;color:9CCCDB}p{width:0;border:solid 25px;margin:125 67;box-shadow:25vw -100px,25vw 25vw,25vw 0 0 25px,50vw 0
24/10/2023
Solution:
<p></p>
<h1>
<style>
body {
background: linear-gradient(
90deg,
#e3b52e 125px,
#8c292a 0 155px,
#e3b52e 0 185px,
#8c292a 0 215px,
#e3b52e 0 245px,
#8c292a 0 275px,
#e3b52e 0
);
}
p {
width: 90;
height: 90;
background: #e3b52e;
margin: 105 auto;
box-shadow: 0 0 0 30px#8C292A;
rotate: 45deg;
}
</style>
</h1>
Minified:
<p><h1><style>*{background:#E3B52E;color:8C292A}p{width:30;height:300;margin:-8 117;background:#8C292A;box-shadow:60px 0,30vw 0}h1{width:90;height:90;margin:-195 147;box-shadow:0 0 0 32q;rotate:45deg
25/10/2023
Solution:
<p></p>
<p a>
<style>
& {
background: #0d004c;
}
p {
width: 120;
height: 180;
background: repeating-linear-gradient(#0d004c 0 30px, #b8b7cc 0 60px);
margin: 60 72;
}
[a] {
margin: -270 192;
}
</style>
</p>
Minified:
<p><p a><style>&{background:#0D004C}p{width:120;height:180;background:repeating-linear-gradient(#0000 0 32q,#B8B7CC 0 60px);margin:60 72}[a]{margin:-270 192
26/10/2023
Solution:
<p></p>
<p a>
<style>
body {
background: #892626;
}
p {
width: 100;
height: 100;
border: solid 50px#C0B932;
margin: 50 92;
rotate: 45deg;
}
[a] {
border: 0;
background: #892626;
margin: -341.5 142;
color: #892626;
box-shadow: 200px 0, 200px 200px, 0px 200px;
}
</style>
</p>
Minified:
<p><p a><style>*{background:#892626;color:892626}p{width:100;height:100;border:solid 53q#C0B932;margin:50 92;rotate:45deg}[a]{border:0;margin:-89%142;box-shadow:50vw 0,50vw 50vw,0 50vw
27/10/2023
Solution:
<p></p>
<p a></p>
<p a b>
<style>
body {
background: #cbe8dd;
}
p {
width: 250px;
height: 140px;
background: #007192;
margin: 80 67;
clip-path: polygon(50%0, 100%100%, 0 100%);
}
[a] {
margin: -180 67;
width: 125px;
height: 100px;
}
[b] {
margin: 80 192;
}
</style>
</p>
Minified:
<p><p a><p a b><style>&{background:#CBE8DD}p{width:250;height:140;background:#007192;margin:80 67;clip-path:polygon(50%0,100%100%,0 100%)}[a]{margin:-47%67;width:125;height:100}[b]{margin:80 192
28/10/2023
Solution:
<p></p>
<p a>
<style>
* {
background: #b8b7cc;
margin: 37.5;
}
* > * {
background: #1e1e5a;
}
p {
width: 100;
height: 100;
background: linear-gradient(#1e1e5a 50%, #b8b7cc 0);
position: fixed;
border-radius: 50%;
top: -12.5;
left: 112.5;
}
[a] {
scale: -1;
top: 137.5;
}
</style>
</p>
Minified:
<p><p a>
<style>*{background:#B8B7CC;margin:37.5}*>*{background:#1E1E5A}p{width:100;height:100;background:linear-gradient(#1E1E5A 50%,#B8B7CC 0);position:fixed;border-radius:50%;top:-12.5;left:112.5}[a]{scale:-1;top:137.5
29/10/2023
Solution:
<p></p>
<p a></p>
<style>
body {
background: radial-gradient(
circle at center,
#e3745d 25px,
#872626 0 65px,
#e3745d 0 85px,
#872626 0
);
}
p {
width: 20;
height: 60;
border-radius: 10px;
background: #e3745d;
margin: 45 182;
box-shadow: 0 150px#E3745D;
}
[a] {
margin: -30 257;
rotate: 90deg;
}
</style>
Minified:
<p><p a><style>&{background:radial-gradient(1q,#E3745D 25px,#872626 0 65px,#E3745D 0 90q,#872626 0)}p{width:20;height:60;border-radius:10q;background:#E3745D;margin:45 182;box-shadow:0 50vh#E3745D}[a]{margin:-30 257;rotate:90deg
30/10/2023
Solution:
<p></p>
<h1></h1>
<style>
* {
background: #fff;
color: #f58220;
}
p {
width: 160;
height: 60;
border: solid 30px;
border-radius: 60px;
margin: 90 auto;
outline: solid 30px#fff;
box-shadow: 0 0 0 2in;
}
h1 {
width: 30;
height: 30;
margin: -210 177;
position: fixed;
box-shadow: 0 -30px, 0 90px#fff, 0 120px;
}
</style>
Minified:
<p><h1><style>*{background:#FFF;color:F58220}p{width:160;height:60;border:solid 32q;border-radius:63q;margin:90 82;outline:solid 32q#fff;box-shadow:0 0 0 2in}h1{width:30;height:30;margin:-210 177;position:fixed;box-shadow:0 -32q,0 95q#fff,0 30vw
31/10/2023
Solution:
<p></p>
<div></div>
<style>
p {
width: 60;
height: 60;
background: #fad5e5;
color: #f067a6;
margin: 60 102;
box-shadow: 0 120px, 120px 0, 60px 60px#FAD5E5, 120px 120px#FAD5E5,
0 0 0 3in #763258;
}
div {
width: 30;
height: 30;
background: #763258;
color: #763258;
margin: -90 102;
box-shadow: 0 120px, 120px 0, 60px 60px, 120px 120px;
}
</style>
Minified:
<body bgcolor=763258 text=F067A6><p><p a><style>p{width:60;height:60;background:#FAD5E5;margin:60 102-90;box-shadow:0 30vw,30vw 0,60px 60px#FAD5E5,30vw 30vw#FAD5E5}[a]{width:30;height:30;background:#763258;color:763258;box-shadow:0 30vw,30vw 0,60px 60px,30vw 30vw