< Back to Frontend Friday Folks Index

Supernova

Highlighted solution (538 characters)
1 
<div>
2 
  <div p></div>
3 
  <div p b></div>
4 
  <div r></div>
5 
</div>
6 
<style>
7 
  body {
8 
    background: #243D83;
9 
    display: grid;
10 
    place-content: center;
11 
  }
12 
  div {
13 
    position:relative;
14 
    &>div{
15 
      translate: -50% -50%;
16 
      rotate:45deg;
17 
    }
18 
  }
19 
  [r] {
20 
    width:120;
21 
    height:120;
22 
    position:absolute;
23 
    background:radial-gradient(#EEB850 30px,#243D83 0);
24 
  }
25 
  [p] {
26 
    position:absolute;
27 
    width: 220px;
28 
    height: 100px;
29 
    background: #6592CF;
30 
    border-radius: 50px;
31 
  }
32 
  [b] {
33 
    rotate:-45deg;
34 
  }
35 
</style>
This time, I learnt from Derek that you can use nested CSS already! So cool to see this in action!
< Back to Frontend Friday Folks Index