Coffee and Laptop

HTML
<div class="container"> <div class="laptop"> <div class="screen"></div> <div class="base"></div> </div> <div class="cup"></div> <div class="steam"> <div></div> <div></div> <div></div> </div> </div>
SASS
$body: #dedede $lid: #fafafa $screen: #555 $base: #fafafa $border: #666 $cup: #d81159 $handle: #d81159 body background: $body .container position: relative height: 240px width: 500px margin: auto margin-top: 100px &::after content: "" position: absolute top: 216px left: 10px width: 480px border: 3px solid rgba(0, 0, 0, 0.2) border-radius: 0px 0px 50% 50% &::before content: "" position: absolute top: 218px left: 25px height: 5px width: 450px background: #C8DBFE border-radius: 50% .laptop //display: none position: absolute height: 100% width: 100% //background: peachpuff z-index: 100 .screen position: absolute left: 115px top: 0px height: 200px width: 300px background: $lid border-radius: 12px 12px 0px 0px border: 3px solid $border box-sizing: border-box &::after, &::before content: "" position: absolute &::after top: 20px left: 8px height: 162px width: 278px background: $screen border: 3px solid $border box-sizing: border-box &::before top: 5px left: calc(50% - 4px) height: 8px width: 8px background: #777 border-radius: 50% .base position: absolute top: 198px left: 85px height: 18px width: 360px background: $base border-radius: 0px 0px 15px 15px border: 3px solid $border box-sizing: border-box &::after content: "" position: absolute left: 135px height: 4px width: 90px background: #fff border-radius: 0px 0px 8px 8px background: #ddd border: 2px solid $border box-sizing: border-box border-top: none .cup position: absolute top: 136px left: 30px height: 80px width: 75px background: $handle border-radius: 0px 0px 10px 10px border: 3px solid $border box-sizing: border-box &::after, &::before content: "" position: absolute &::after left: -30px top: 4px height: 55px width: 60px background: $cup z-index: -10 border-radius: 50% border: 3px solid $border &::before left: -20px top: 14px height: 41px width: 40px background: $body border: 3px solid $border border-radius: 50% z-index: -5 box-sizing: border-box .steam position: absolute top: 130px left: 45px width: 45px height: 30px display: flex justify-content: space-around z-index: -1 opacity: 0 animation: steam 3s linear infinite div height: 30px width: 10px background: #fff border-radius: 10px 0px 10px 0px @keyframes steam 20% opacity: 0.6 35% top: 100px opacity: 0.6 70% top: 70px opacity: 0
JAVASCRIPT
Expand for more options Login