Time Attack #1
Arrival
Solution:
<div></div>
<style>
body {
background: #f5d6b4;
display: grid;
align-items: center;
}
div {
width: 30px;
height: 30px;
background: #dd6b4d;
transform: rotate(-45deg);
margin-left: 50px;
box-shadow: 10px 10px 0 0 #f5d6b4, 30px 30px 0 15px #d86f45,
40px 40px 0 15px #f5d6b4, 180px 180px 0 0 #dd6b4d, 170px 170px 0 0 #f5d6b4,
150px 150px 0 15px #dd6b4d, 140px 140px 0 15px #f5d6b4, 90px 90px 0 45px
#d86f45;
}
</style>
Minified:
<body bgcolor=F5D6B4><p><style>p{width:30;height:30;margin:135 50;background:#dd6b4d;rotate:-45deg;color:F5D6B4;box-shadow:10q 10q,31q 31q 0 16q#D86F45,5ch 5ch 0 16q,60vh 60vh#dd6b4d,180q 180q,50vh 50vh 0 16q#dd6b4d,35vw 35vw 0 16q,95q 95q 0 48q#D86F45
Loop
Solution:
<div></div>
<style>
body {
background: #62306d;
display: grid;
place-items: center;
margin: 0;
}
div {
width: 100px;
height: 100px;
border: solid 30px #f7ec7d;
border-radius: 50%;
position: relative;
}
div::before,
div::after {
width: 30px;
height: 150px;
background: #f7ec7d;
position: absolute;
content: "";
top: 50;
left: -30;
}
div::after {
top: -100;
left: 100%;
}
</style>
Minified:
<body bgcolor=62306D text=F7EC7D><p><h1>
<style>p{width:100;height:100;border:solid 30px;border-radius:50%;margin:70 112}h1{width:30;height:150;background:#F7EC7D;margin:-150 112;box-shadow:130px -50vh
Fingerprint
Solution:
<div></div>
<p></p>
<p a></p>
<p b></p>
<p c></p>
<p d></p>
<style>
body {
background: #e3516e;
}
div {
width: 122px;
height: 160px;
background: #fade8b;
margin: 70 130;
border-radius: 63px 60px 60px 60px;
}
p {
width: 60;
aspect-ratio: 1;
border: solid 10px #e3516e;
border-radius: 50%;
position: fixed;
top: 164;
left: 210;
}
[a] {
width: 80;
top: 139;
left: 190;
}
[b] {
width: 100;
top: 114;
left: 170;
}
[c] {
width: 120;
top: 89;
left: 150;
}
[d] {
width: 140;
top: 64;
left: 130;
}
</style>
Minified:
<body bgcolor=E3516E><h1></h1><p></p><p a><p b><p c><p d>
<style>h1{width:122;height:160;background:#FADE8B;margin:70 130;border-radius:67q 64q 64q 64q}p{width:60;aspect-ratio:1;border:solid 11q#E3516E;border-radius:50%;position:fixed;top:164;left:210}[a]{width:80;top:139;left:190}[b]{width:100;top:114;left:170}[c]{width:120;top:89;left:150}[d]{width:140;top:64;left:130
Maze
Solution:
<div></div>
<p></p>
<style>
body {
background: #998235;
}
div,
p {
background: #0b2429;
position: fixed;
top: 80px;
}
div {
width: 20px;
height: 60px;
left: 130px;
box-shadow: 40px 0 0 0 #0b2429, 80px 80px 0 0 #0b2429,
120px 80px 0 0 #0b2429;
}
p {
width: 60px;
height: 20px;
top: 64px;
left: 210px;
box-shadow: 0 40px 0 0 #0b2429, -80px 80px 0 0 #0b2429,
-80px 120px 0 0 #0b2429;
}
</style>
Minified:
<body bgcolor=998235><p><p a><style>p{width:20;height:60;background:#0B2429;color:#0B2429;margin:80 122;box-shadow:5ch 0,5em 5em,30vw 5em}[a]{margin:-80 142;rotate:90deg;box-shadow:5ch 0,-5em -5em,-5ch -5em