< Back to Frontend Friday Folks Index

Black Lives Matter

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 (1185 characters)
1 
<div class="w">
2 
  <div class="fs">
3 
    <div class="h f f1"></div>
4 
    <div class="h f f2"></div>
5 
    <div class="h f f3"></div>
6 
    <div class="h f f4"></div>
7 
  </div>
8 
  <div class="h x palm"></div>
9 
  <div class="h x arm"></div>
10 
  <div class="h f thumb"></div>
11 
</div>
12 
<style>
13 
  body {
14 
    background: #F9E492;
15 
    display: grid;
16 
    place-items: center;
17 
    margin: 0;
18 
  }
19 
  .w {
20 
    display: grid;
21 
    position: relative;
22 
    grid-template-columns: repeat(4, 1fr);
23 
    margin-top: -10px;
24 
  }
25 
  .fs {
26 
    display: grid;
27 
    grid-template-columns: repeat(4, 1fr);
28 
    grid-column: 1 / 5;
29 
    height: 70px;
30 
    place-items: end;
31 
  }
32 
  .h {
33 
    background: #191919;
34 
  }
35 
  .f {
36 
    box-sizing: border-box;
37 
    border-radius: 20px;
38 
    border: 5px solid #F9E492;
39 
    margin-right: -5px;
40 
    height: 45px;
41 
    width: 30px;
42 
  }
43 
  .f1 {
44 
    height: 55px;
45 
  }
46 
  .f2 {
47 
    height: 65px;
48 
  }
49 
  .f3 {
50 
    height: 55px;
51 
  }
52 
  .x {
53 
    border-radius: 0 0 10px 10px;
54 
  }
55 
  .palm {
56 
    grid-column: 1 / 5;
57 
    height: 40px;
58 
  }
59 
  .arm {
60 
    grid-column: 2 / 4;
61 
    height: 45px;
62 
  }
63 
  .thumb {
64 
    position: absolute;
65 
    height: 75px;
66 
    transform: translate(2px, 36.5px) rotate(60deg);
67 
  }
68 
</style>
It was interesting to use grid here. The solution needed multiple wrappers, to get it done, but there may be some possibilties to optimize it. No real code golf ideas to make the solution smaller, but we got to 100% with this. So for us, 100% is "good enough". 😅
< Back to Frontend Friday Folks Index