Time Attack #2
Fence
Solution:
<div></div>
<p></p>
<style>
body {
background: #6592cf;
}
p {
width: 80px;
height: 40px;
background: #6592cf;
border: solid 20px #060f55;
border-radius: 60px 60px 0 0;
border-bottom: none;
position: relative;
top: 62px;
left: 132px;
}
p::before,
p::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #060f55;
border-radius: 50%;
bottom: -10;
left: -20;
}
p::after {
left: 80;
}
div {
width: 20px;
height: 70px;
background: #060f55;
border-radius: 10px;
position: fixed;
top: 160px;
left: 60px;
box-shadow: 40px 0 0 0 #060f55, 80px 0 0 0 #060f55, 180px 0 0 0 #060f55, 220px
0 0 0 #060f55, 260px 0 0 0 #060f55;
}
</style>
Minified:
<body bgcolor=6592CF><p><h1><h1 a><style>p{width:80;height:40;background:#6592CF;border:solid 20px#060F55;border-radius:60px 60px 0 0;border-bottom:none;margin:70 132}h1{width:20;height:20;background:#060F55;color:060F55;border-radius:50%;margin:-80 132;box-shadow:25vw 0}[a]{height:70;border-radius:12q;margin:100 52;box-shadow:40px 0,80px 0,60vh 0,55vw 0,65vw 0
Dune
Solution:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<style>
* {
position: fixed;
border-radius: 50%;
aspect-ratio: 1;
}
body {
background: #e38f66;
}
h1 {
width: 245px;
background: #fffbda;
top: -6.5;
left: 78;
}
h2 {
width: 250px;
background: #e38f66;
top: -70;
left: 75;
}
h3 {
width: 160px;
background: #fffbda;
top: -4;
left: 120;
}
h4 {
width: 179px;
background: #e38f66;
top: -75;
left: 110.5;
}
h5 {
width: 60px;
background: #fffbda;
top: 18;
left: 170;
}
</style>
Minified:
<body bgcolor=E38F66><p><p a><p b><p c><p d><style>p{position:fixed;border-radius:50%;aspect-ratio:1;width:245;background:#FFFBDA;top:-1;left:78}[a]{width:250;background:#E38F66;top:-66;left:75}[b]{width:160;left:120}[c]{width:179;background:#E38F66;top:-70;left:110.5}[d]{width:60;top:24;left:170
Craters
Solution:
<div></div>
<style>
body {
background: #998235;
display: grid;
place-items: center;
}
div {
width: 180px;
height: 180px;
background: radial-gradient(circle at center, #eff33c 75px, #998235 0);
border-radius: 50%;
overflow: hidden;
position: relative;
border: solid 15px #eff33c;
}
div::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
background: #998235;
border-radius: 50%;
bottom: 0;
right: -10;
}
div::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
background: #998235;
border-radius: 50%;
top: -40;
right: 50;
}
</style>
Minified:
<body bgcolor=#998235><p><style>p{width:150;height:150;border:solid 15px#998235;outline:solid 15px#EFF33C;border-radius:50%;margin:60 auto;background:radial-gradient(circle at 50%-15px,#998235 40px,#0000 0),radial-gradient(circle at 125px 115px,#998235 50px,#EFF33C 0
Plus
Solution:
<div></div>
<h1></h1>
<h2></h2>
<style>
body {
background: #4f77ff;
display: grid;
place-items: center;
}
div {
width: 30px;
height: 30px;
background: #1038bf;
border-radius: 8px;
transform: rotate(45deg);
}
h1,
h2 {
position: fixed;
background: #1038bf;
border-radius: 20px;
}
h1 {
width: 30px;
height: 80px;
top: 13.5px;
box-shadow: 0 150px 0 0 #1038bf;
}
h2 {
height: 30px;
width: 80px;
left: 85;
box-shadow: 150px 0 0 0 #1038bf;
}
</style>
Minified:
<body bgcolor=4F77FF><p><h1><h1 a><style>p{width:30;height:30;background:#1038BF;border-radius:8px;margin:135 177;rotate:45deg}h1{width:30;height:80;border-radius:20px;background:#1038BF;color:1038BF;margin:-265 177;box-shadow:0 50vh}[a]{rotate:90deg;margin:260 102;box-shadow:0 -50vh