<title>Hot Chocolate Cup || Frontend Challenge</title>

<div class='container'>
  <div class='cup'>
    <div class='top'>
      <div class='circle'>
        <div class='chocolate'></div>
      </div>
    </div>
    <div class='handle'></div>
  </div>
</div>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to right, #232526, #414345); 
  background-color:#7469B6;
}

.container{
  position:relative;
  top:50%;
}

.cup{
  position:relative;
  width:280px;
  height:300px;
  background: linear-gradient(to left, #1d2b64, #f8cdda);
  border-bottom-right-radius: 45%;
  border-bottom-left-radius: 45%
}

.top{
  position:absolute;
  top:-30px;
  left:0;
  width:100%;
  height:60px;
  background-color:#8E7AB5;
  border-radius:50%;
}

.circle{
  position: absolute;
  top:5px;
  left:10px;
  width:calc(100% - 20px);
  height:50px;
  background-color: #8E7AB5;
  border-radius:50%;
  box-sizing:border-box;
  overflow:hidden;
}

.chocolate{
  position:absolute;
  top:20px;
  left:0;
  width:100%;
  height:100%;
  border-radius:50%;
  background-color:#543310;
}

.handle{
  position:absolute;
  right:-70px;
  top: 40px;
  width:160px;
  height:180px;
  border:25px solid #7469B6;
  border-left:25px solid transparent;
  border-bottom:25px solid transparent;
  border-radius:50%;
  transform:rotate(42deg);
}