< Back to Frontend Friday Folks Index

Clow Card

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 (800 characters)
1 
<div o><div i>
2 
<style>
3 
  body {
4 
    background:#000;
5 
    display: grid;
6 
    place-items:center;
7 
  }
8 
  [i],[i]:after{
9 
    content:'';
10 
    grid-area: 1/1/2/2;
11 
    display:grid;
12 
    width:200.5;
13 
    height: 80.5;
14 
    background: #0000;
15 
    border: 5px solid #EBAE11;
16 
    border-radius:50%;
17 
    z-index:1;
18 
  }
19 
  [i]:after{
20 
    width: 120.5;
21 
    height: 60;
22 
  }
23 
  [o]:before,[o]:after{
24 
    content:'';
25 
    grid-area: 1/1/2/2;
26 
    border-radius: 12px;
27 
    width: 270;
28 
    height: 90;
29 
    background:
30 
      radial-gradient(1q,#EBAE11 25px,#000);
31 
  }
32 
  [o]:after{
33 
    width:240;
34 
    height:120
35 
  }
36 
  div {
37 
    display: grid;
38 
    place-items:center;
39 
    width: 300;
40 
    height: 150;
41 
    background: linear-gradient(105deg,#E96A23 120px,#EBAE11 0 170px,#E96A23 0 184px,#EBAE11 0 209px,#E96A23 0);
42 
  }
43 
</style>
44

I suppose instead of the <div i>, we could have used radial-gradients...

< Back to Frontend Friday Folks Index