< Back to Frontend Friday Folks Index

PushOwl

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