< Back to Frontend Friday Folks Index

Monopoly

Highlighted solution (987 characters)
1 
<div class="head">
2 
  <div class="hat"></div>
3 
  <div class="eyes"></div>
4 
  <div class="mustache"><div></div></div>
5 
</div>
6 
<style>
7 
  body {
8 
    background: #E38F66;
9 
    display: grid;
10 
    place-items: center;
11 
  }
12 
  .head {
13 
    width: 180px;
14 
    height: 220px;
15 
  }
16 
  .hat {
17 
    height:50%;
18 
    background:#FFFBDA;
19 
    margin:0 30;
20 
    border-radius: 50% 50% 0 0;
21 
    position: relative;
22 
  }
23 
  .hat::after {
24 
    content: '';
25 
    width:45vw;
26 
    height:20px;
27 
    background:#FFFBDA;
28 
    border-radius:10px;
29 
    position:absolute;
30 
    left:-30;
31 
    bottom:0;
32 
  }
33 
  .eyes {
34 
    background: radial-gradient(circle at 120px 32px, #0000 10px, #FFFBDA 0 20px, #0000 0),radial-gradient(circle at 60px 32px, #FFFBDA 10px, #0000 0);
35 
    height: 70
36 
  }
37
38 
  .mustache {
39 
    margin-left: 45;
40 
    width: 40px;
41 
    height: 40px;
42 
    -webkit-box-reflect: right 10px;
43 
  }
44 
  .mustache>*{
45 
    background: #FFFBDA;
46 
    width: 100%;
47 
    height: 100%;
48 
    border-radius: 50% 50% 50% 0;
49 
    transform: rotate(45deg)
The last puzzle we did at JSCraftCamp 2024. Right at the end of the hour, we finalized the mustache by using -webkit-box-reflect.
< Back to Frontend Friday Folks Index