042-baby.md

#42 Baby

^{GO TO THE PROBLEM}

Solutions

<div class="head">
  <div class="hair"></div>
  <div class="eye"></div>
  <div class="mouth"></div>
</div>
<style>
  body {
    background: #293462;
    display: grid;
    place-items: center;
  }
  .head {
    width: 200px;
    height: 200px;
    background: #fe5f55;
    border-radius: 100px 100px 50px 50px;
    position: relative;
    overflow: hidden;
  }
  .hair,
  .eye,
  .mouth {
    position: absolute;
    background: #fff1c1;
  }
  .hair {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: -50px;
    box-shadow: 100px 0 #fff1c1;
  }
  .eye {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: 90px;
    left: 20px;
    box-shadow: 100px 0 #fff1c1;
  }
  .mouth {
    width: 40px;
    height: 10px;
    border-radius: 10px;
    top: 170px;
    left: 80px;
  }
</style>

<a><b h></b><b e></b><b m><style>body{background:#293462;display:grid;place-items:center}a{width:200;height:200;background:#fe5f55;border-radius:100px 100px 50px 50px;position:relative;overflow:hidden}[h],[e],[m]{position:absolute;background:#fff1c1;}[h]{width:100;height:100;border-radius:50%;top:-50;box-shadow:100px 0#fff1c1}[e]{width:60;height:60;border-radius:50%;top:90;left:20;box-shadow:100px 0#fff1c1}[m]{width:40;height:10;border-radius:10px;top:170;left:80