< Back to Frontend Friday Folks Index

Ukulele

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 (910 characters)
1 
<div b></div>
2 
<div s></div>
3 
<div h></div>
4 
<style>
5 
  body {
6 
    background:#F3AC3C;
7 
    display:grid;
8 
    align-items:center;
9 
    justify-content:center;
10 
    grid-template-columns:170px 100px 40px;
11 
  }
12 
  [b] {
13 
    display:grid;
14 
    place-items:center left;
15 
    height:120;
16 
    background:
17 
      radial-gradient(circle at 120px 50%,#1A4341 20px,#F3AC3C 0 25px,#998235 0 50px,#0000 0),
18 
      radial-gradient(circle at 60px 50%,#998235 60px,#0000 0);
19 
    z-index:1;
20 
  }
21 
  [s] {
22 
    margin:-5;
23 
    height:20;
24 
    background: #1A4341;
25 
  }
26 
  [h] {
27 
    display:grid;
28 
    place-items:center;
29 
    border-radius:10px;
30 
    height:20;
31 
    padding:5;
32 
    background: #998235;
33 
  }
34 
  *::before,*::after {
35 
    border-radius: 5px;
36 
    background:#1A4341;
37 
  }
38 
  [b]::before {
39 
    content:'';
40 
    margin-left:40;
41 
    width:10;
42 
    height:40;
43 
  }
44 
  [h]::before,[h]::after {
45 
    content:'';
46 
    width:20;
47 
    height:4;
48 
  }
49 
</style>
50
There is a small overlap of the shaft to the body part. I used negative margins here to make it appear bigger and had to use z-index to put the body on top of it. I think reversing the order of the grid divs would have worked as well, but I didn't test it because z-index seemed like a simple fix.
< Back to Frontend Friday Folks Index