< Back to Frontend Friday Folks Index

Headphones

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 (356 characters)
1 
<p l>
2 
<p r>
3 
<div>
4 
<style>
5 
  &{background:#293D7E}
6 
  p {
7 
    position:fixed;
8 
    background:#6E91CA;
9 
    top:149;
10 
    left: 115;
11 
    width: 60;
12 
    height: 80;
13 
    border-radius: 60px 60px 80px 80px;
14 
  }
15 
  [r]{left:225}
16 
  div{border:20px solid #6E91CA;border-bottom:0;border-radius:85px 85px 0 0;height:130;width:130;position:fixed;left:115;top:45}
17 
</style>

I guess this is almost straightforward. Using single elements turned out quite effective here.

< Back to Frontend Friday Folks Index