TEMPERATE ZONE
<div></div>
<div></div>
</div>
<style>
.coffee-cont {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}
.coffee-cup {
position: absolute;
width: 250px;
height: 190px;
margin: 0 auto;
background: radial-gradient(circle,rgba(208, 208, 208, 1) 5%,rgba(189, 189, 189, 1) 51%);
border-radius: 0 0 150px 150px;
position: relative;
top: 50%;
}
.coffee-cup::before {
content: '';
display: block;
height: 30px;
width: 230px;
position: absolute;
border-radius: 50%;
background: radial-gradient(circle,rgba(132, 102, 76, 1) 5%,rgba(86, 44, 8, 1) 96%);
top: -7px;
left: 10px;
z-index: 9;
}
.coffee-cup::after{
content: '';
display: block;
height: 45px;
width: 242px;
position: absolute;
border-radius: 50%;
background: #cccccc;
top: -25px;
left: -1px;
border: 5px solid #e6e6e6
}
.coffee-hand{
width: 52px;
height: 32px;
position: absolute;
background: #ffffff;
border-radius: 32px;
transform: rotate(-36deg);
z-index: -1;
border: 15px solid #dbdbdb;
top: 56%;
left: 66%;
}
.coffee-tasse{
width: 400px;
top: 68%;
left: 10%;
height: 139px;
background: radial-gradient(circle,rgba(69, 69, 69, 1) 13%,rgba(176, 176, 176, 1) 45%,rgba(143, 141, 141, 1) 96%);
border-radius: 50%;
position: absolute;
z-index: -1;
border: 2px solid #f0f0f0;
box-shadow: 1px 3px 0px 1px #323232;
}
.coffee-tasse::after{
content: '';
display: block;
width: 405px;
top: 68%;
border-radius: 50%;
height: 145px;
background: transparent;
box-shadow: 2px 5px 8px 3px #bababa;
}
</style>
</body>
</html>" src="
![image]()