< Back to Frontend Friday Folks Index

Letter S

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 (459 characters)
1 
<article>
2 
  <div></div>
3 
</article>
4 
<article r>
5 
  <div></div>
6 
</article>
7 
<style>
8 
body{
9 
  background: #4F77FF;
10 
  margin: 70+80
11 
}
12 
  article {
13 
    border: 20px solid #fff;
14 
    border-radius: 10px;
15 
    border-right-color: #3210;
16 
    width:200;
17 
    height:50
18 
  }
19 
  div {
20 
    margin:-20;
21 
    width: 190;
22 
    border-radius: 10px;
23 
    border: 25px solid #fff;
24 
    box-shadow: 20px -20px #1038BF
25 
  }
26 
  [r] {
27 
    transform: translateY(-20px) rotate(180deg);
28 
  }
29 
</style>

The solution for me is doing one part and then clone and rotate it.

< Back to Frontend Friday Folks Index