< Back to Frontend Friday Folks Index

PushOwl

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 (893 characters)
1 
<r>
2 
  <div l></div>
3 
  <p></p>
4 
  <div r></div>
5 
</r>
6 
<style>
7 
  body {
8 
    background:#191919;
9 
    display: grid;
10 
    place-items:center;
11 
  }
12 
  r {
13 
    width:242px;
14 
    height:166px;
15 
    position:relative;
16 
  }
17 
  p{
18 
    position:absolute;
19 
    background: #E08027;
20 
    bottom:5px;
21 
    left:95px;
22 
    rotate:45deg;
23 
    height:50px;
24 
    width:50px;
25 
  }
26 
  div {
27 
    position:absolute;
28 
    box-sizing:border-box;
29 
    width: 134px;
30 
    height: 134px;
31 
    background:
32 
      radial-gradient(#191919 45px, #E08027 0),
33 
      #dd6b4d;
34 
    border:10px solid #191919;
35 
    border-radius: 0 50% 50%;
36 
  }
37 
  div::after {
38 
    content: '';
39 
    position:absolute;
40 
    inset: 48px 41px;
41 
    height: 10px;
42 
    width: 12px;
43 
    border: 10px solid #E08027;
44 
    border-radius:50%;
45 
    border-top-color: #0000;
46 
    border-left-color: #0000;
47 
    rotate:225deg
48 
  }
49 
  [r]{
50 
    right:0;
51 
    transform:scale(-1, 1);
52 
  }
53 
</style>
I missed doing this puzzle with VirtualCoffee, so I had to do this on my own. After lots of tinkering with the pixel values, I got a 100% solution. I have to admit I don't like having pixel values like this. There is probably a better way to solve this!
< Back to Frontend Friday Folks Index