<div class="container">
  
  <!-- Baby Bottle -->
  <div class="bottle-teat"></div>
  <div class="bottle-glass"></div>
  <div class="bottle-collar"></div>
  
  <!-- Towel -->
  <div class="towel-right-corner"></div>
  <div class="towel-left-corner" id="towel-left-corner-1"></div>
  <div class="towel-left-corner"></div>
  
  <!-- Duck -->
  <div class="duck-body"></div>
  <div class="duck-beak"></div>
  <div class="duck-head"></div>
  
  <!-- Jar -->
  <div class="jar"></div>
    
</div>

$outline: #6E1A3A;
$yellow: #FFCE47;
$orange: #F3754D;

html,
body {
  background-color: $orange;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  height: 260px;
  width: 315px;
}

.container > * {
  position: absolute;
  border: 6px solid $outline;
  bottom: 0px;
}

.towel-left-corner {
  height: 25px;
  width: 160px;
  background-color: white;
  border-radius: 20px 0px 0px 20px;
  border-right: none;
  
  // Towel decoration
  &:after {
    content: '';
    display: block;
    position: absolute;
    border-left: 6px solid $outline;
    border-right: 6px solid $outline;
    left: 39px;
    height: 25px;
    background-color: $orange;
    width: 19px;
  }
}

#towel-left-corner-1{
  bottom: 31px;
}

.towel-right-corner {
  height: 56px;
  width: 56px;
  background-color: white;
  border-radius: 100px;
  border: 6px solid $outline;
  left: 130px;
}

.jar{
  background-color: $yellow;
  height: 82px;
  width: 82px;
  border-radius: 13px;
  right: 0px;
  
  // Jar label
  &:before {
    content:'';
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 100px;
    background-color: $orange;
    right: 21px;
    bottom: 21px;
    border: 6px solid $outline;
  }
  
  // Jar lid
  &:after {
    content:'';
    display: block;
    position: absolute;
    height: 11px;
    width: 62px;
    right: 4px;
    bottom: 82px;
    border: 6px solid $outline;
    background: $orange;
  }
}

.duck-body {
  height: 32px;
  width: 85px;
  background-color: $yellow;
  border-radius: 100px;
  bottom: 62px;
  left: 25px;
  overflow: hidden;
  
  // Duck decoration
  &:before {
    content: '';
    position: absolute;
    display: block;
    height: 73px;
    width: 73px;
    top: 21px;
    border-radius: 100px;
    border: 5px solid white;
  }
}

.duck-head {
  height: 35px;
  width: 44px;
  overflow: hidden;
  border: none;
  bottom: 100px;
  left: 36px;
  
  // Duck head
  &:after {
    content: '';
    display: block;
    height: 44px;
    width: 44px;
    border: 6px solid $outline;
    border-radius: 100px;
    box-sizing: border-box;
    background-color: $yellow;
  }
  
  // Duck eye
  &:before {
    content: '';
    position: absolute;
    display: block;
    height: 6px;
    width: 5px;
    left: 14px;
    top: 14px;
    background-color: $outline;
  }

}

.duck-beak {
  height: 9px;
  width: 9px;
  bottom: 100px;
  left: 23px;
  border-radius: 0px 0px 0px 18px;
}

.bottle-glass{
  width: 93px;
  height: 190px;
  left: 132px;
  background: white;
  border-radius: 35% 35% 0 0;
  
  // Bottle measurements
  &:before {
    content: '';
    position: absolute;
    display: block;
    top: 74px;
    left: 10px;
    height: 43px;
    width: 26px;
    background: repeating-linear-gradient($orange, $orange 7px, white 7px, white 18px);
  }
}

.bottle-collar {
  width: 59px;
  height: 14px;
  background: $orange;
  left: 149px;
  bottom: 188px;
}

.bottle-teat {
  width: 0;
  height: 0;
  border-top: none;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-bottom: 40px solid $outline;
  bottom: 209px;
  left: 156px;

  &:after {
    content:'';
    position:absolute;
    top: 11px;
    left: -17px;
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 25px solid $yellow;
  }
  
  &:before {
    content:'';
    display: block;
    position: absolute;
    height: 40px;
    width: 18px;
    background: $yellow;
    left: -15px;
    bottom: -41px;
    border: 6px solid $outline;
    border-radius: 100px 100px 0 0;
  }
}

// Link to the original illustration by Makers Company: https://dribbble.com/shots/2455588-Baby-Stuff