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
