< Back to Frontend Friday Folks Index

Curtain

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 (308 characters)
1 
<div>
2 
  <p><p><p><p>
3 
  <p><p><p><p b>
4 
  <p><p><p b><p b>
5 
  <p>
6 
</div>
7 
<style>
8 
  &{background:#191919}
9 
  div {
10 
    margin:20 12;
11 
    display:grid;
12 
    grid-template-columns:repeat(4,40px);
13 
    gap:20px;
14 
  }
15 
  p{margin:0;width:40;height:40;border-radius:50%;background:#F6E59C}
16 
  [b]{background:#fff0}
17 
</style>

The first solution used a grid. It should be easy to follow along, but it means having lots of elements as well.

Highlighted solution (123 characters)
1 
<style>&{background:linear-gradient(135deg,#0000 216q,#191919 0),radial-gradient(#F6E59C 20px,#191919 0)10px 10px/60px 60px

This was a lot shorter and we did this with Alex' on stream. He learned how to do gradients and I later code-golfed to this solution.

< Back to Frontend Friday Folks Index