< Back to Frontend Friday Folks Index

Splash

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (291 characters)
1 
<p a><p m><p b>
2 
<style>*{background:#6592CF;margin:0}
3 
  p {
4 
    position:fixed;
5 
    width:200;
6 
    right:-65;
7 
    bottom:-50;
8 
    background:#060F55;
9 
    border:solid+15px#060F55;
10 
    border-radius:50px;
11 
    rotate:45deg;
12 
  }
13 
  [b]{bottom:35;right:-150}
14 
  [m]{bottom:-8;right:-108;scale:1.66
First solution was straight forward using multiple elements.
Highlighted solution (505 characters)
1 
<style>&{background:
2 
linear-gradient(45deg,#3210 83.5px,#060F55 0 113.5px,#3210 0) 270px 254px / 140px 140px no-repeat,
3 
linear-gradient(45deg,#3210 83.5px,#060F55 0 113.5px,#3210 0) 355px 170px / 140px 140px no-repeat,
4 
linear-gradient(45deg,#3210 74px,#060F55 0 124px,#3210 0) 100% 100% / 140px 140px no-repeat,
5 
radial-gradient(circle at 280px 265px,#060F55 15px, #3210 0),
6 
radial-gradient(circle at 365px 180px,#060F55 15px, #3210 0),
7 
radial-gradient(circle at 276px 176px,#060F55 25px, #3210 0),
8 
#6592CF
After solving it with p tags, we solved it with gradients.
< Back to Frontend Friday Folks Index