< Back to Frontend Friday Folks Index

Baby

Highlighted solution (572 characters)
1 
<div></div>
2 
<style>
3 
body {
4 
  background: #293462;
5 
  display: grid;
6 
  place-items: center;
7 
}
8 
  div {
9 
    background:
10 
      radial-gradient(circle, #FFF1C1 50px, transparent 50px) 0px -200px / 50% 200%,
11 
      radial-gradient(circle, #FFF1C1 30px, transparent 25px) 0px -80px / 50% 200%,
12 
      #FE5F55
13 
    ;
14 
    border-radius: 50% 50% 50px 50px;
15 
    width: 200px;
16 
    height: 200px;
17 
  }
18 
  div::after {
19 
    background: #FFF1C1;
20 
    content: '';
21 
    border-radius: 10px;
22 
    position: absolute;
23 
    left: 45%;
24 
    bottom: 70px;
25 
    height: 10px;
26 
    width: 40px;
27 
  }
28 
</style>
I missed Frontend Fridays this time, since it was a holiday here in Germany and I kept my phone muted for the whole day. Terribly sorry for not giving a heads-up, but there were a couple of people and contributing solutions to Puzzle 42. I'm happy I didn't look into them before coming up with my own, so it's actually quite different, this time using background size and repeat plus a pseudo element.
< Back to Frontend Friday Folks Index