<a href="https://dribbble.com/shots/1281297-Lawn-Care" target="_blank">Dribble Lawn Care</a>
<div class="lawnCare">
  <div class="crane">
    <div class="head"></div>
    <div class="neck"></div>
    <div class="body"></div>
    <div class="legs"></div>
  </div>

  <div class="gnome">
    <div class="head"></div>
    <div class="face"><div class="mustache"></div></div>
    <div class="body"></div>
    <div class="feet"></div>
  </div>
</div>

$background: #e3decb;
$orange: #dd612e;//
$dark: #293126;
$skin: #d8a391;
$shirt: #e0cd4a;

*,
*:before,
*:after
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


html,
body
{
    overflow: visible;

    height: 100%;
    margin: 0;
    padding: 0;
}

body
{
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    color: #333;
    background: $background;
   
}



.lawnCare
{
    position: relative;
    top: 10px;
    left: 7px;

    width: 173px;
    height: 243px;
    margin: 0 auto;
}

.crane
{
    position: absolute;

    width: 173px;
    height: 243px;
    .head
    {
        position: absolute;
        z-index: 5;
        top: 18px;
        left: 0;

        width: 38px;
        height: 38px;

        border-radius: 50%;
        background-color: $orange;//
        &:before
        {
            position: absolute;
            top: 21px;
            left: 7px;

            width: 5px;
            height: 5px;

            content: '';

            border-radius: 50%;
            background-color: $dark;
        }
        &:after
        {
            position: absolute;
            z-index: 2;
            top: 36px;
            left: 9px;

            width: 20px;
            height: 30px;

            content: '';

            border-bottom-left-radius: 88%;
            background-color: $dark;
        }
    }
    .neck
    {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 15px;

        width: 50px;
        height: 50px;

        border-top: 11px solid $orange;
        border-right: 11px solid $orange;
        border-left: 11px solid $orange;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        background-color: transparent;
    }
    .body
    {
        position: absolute;
        z-index: 2;
        top: 79px;
        right: 0;

        width: 120px;
        height: 71px;

        border-top-left-radius: 82%;
        border-top-right-radius: 119px;
        border-bottom-left-radius: 62px;
        background-color: $orange;
        &:before
        {
            position: absolute;
            top: -30px;
            left: 1px;

            width: 11px;
            height: 62px;

            content: '';

            background-color: $orange;
        }
        &:after
        {
            position: absolute;
            right: -2px;
            bottom: -20px;

            width: 0;
            height: 0;

            content: '';
            transform: rotate(-45deg);

            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 15px solid $orange;
        }
    }
    .legs
    {
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 65px;

        width: 80px;
        height: 99px;
        &:before,
        &:after
        {
            position: absolute;
            z-index: 1;
            top: -4px;

            width: 8px;
            height: 106px;

            content: '';

            border-radius: 18%;
            background-color: $dark;
        }
        &:before
        {
            left: 14px;

            transform: rotate(17deg);
        }
        &:after
        {
            right: 14px;

            transform: rotate(-17deg);
        }
    }
}
.gnome
{
    position: absolute;
    bottom: 0;
    left: 3px;

    width: 50px;
    height: 109px;

    .head,
    .face,
    .body,
    .feet{
        position: absolute;
    }


    .head
    {
        border-radius: 50%;
        height: 32px;
        left: 2px;
        top: 40px;
        width: 47px;
        background-color: $skin;
        z-index: 1;
        &:before{
            border-bottom: 51px solid $orange;
            border-left: 23px solid transparent;
            border-right: 23px solid transparent;
            content: "";
            position: absolute;
            top: -40px;
            z-index: 1;
        }
        &after{
            content: '';

        }
    }
    .face{
        height: 19px;
        left: 4px;
        position: absolute;
        top: 55px;
        width: 43px;
        z-index: 3;
        &:before, &:after{
            position: absolute;
            top: 1px;
            width: 5px;
            height: 5px; 
            content: ''; 
            border-radius: 50%;
            background-color: $dark;
        }
        &:before{
            left: 9px;
        }
        &:after{
            right: 9px;
        }
        .mustache{
            position:absolute;
            bottom: 0;
            width: inherit;
            height:13px;

            &:before, &:after{
                position: absolute;
                bottom: 0;
                content: ''; 
                background-color: #fff;
                width: 22px;
                height:13px;
            }
            &:before{
                left: 0;
                border-bottom-right-radius: 24px;
                border-top-left-radius: 47px;
                border-top-right-radius: 33px;
            }
            &:after{
                right: 0;
                border-bottom-left-radius: 24px;
                border-top-right-radius: 47px;
                border-top-left-radius: 33px;
            }
        }
    }
    .body
    {
        width: 44px;
        height:35px;
        position: absolute;
        background-color:$shirt;
        position: absolute;
        bottom: 0;
        left: 3px;
        &:before, &:after{
            position: absolute;
        }
        &:before{
            background-color: $dark;
            content: "";
            height: 11px;
            left: 0;
            position: absolute;
            top: 9px;
            width: 100%;
        }
        &:after{
            border: 4px solid $orange;
            content: "";
            height: 16px;
            left: 50%;
            margin-left: -11px;
            position: absolute;
            top: 7px;
            width: 22px;
        }
    }
    .feet{
        height: 9px;
        width: 44px;
        position: absolute;
        bottom:0;
        left: 3px;
        &:before, &:after{
            position: absolute;
            bottom: 0;
            content: ''; 
            background-color: $dark;
            width: 20px;
            height:9px;
            border-top-left-radius: 53px;
            border-top-right-radius: 53px;
        }
        &:before{
            left: 0;
        }
        &:after{
            right: 0;
        }
    }
}