SCSS
$highlight: #FDD0C9;
$base: #FB7DAE;
$dark: #EA2598;
body {
background-color: #333;
height: 100%;
}
.container {
width: 200px;
height: 200px;
left: calc(50% - 100px);
top: 40%;
position: absolute;
}
.head {
background-color: $highlight;
width: 50px;
height: 50px;
position: absolute;
right: 0;
top: 0;
border-radius: 10px 10px 20px 20px;
box-shadow: inset -5px -5px 0 $base;
&:before, &:after {
content: '';
position: absolute;
background-color: $base;
height: 10px;
width: 5px;
top: 15px;
left: 10px;
border-radius: 100%;
}
&:after {
left: 30px;
}
}
.hair {
background-color: $dark;
width: 62px;
height: 50px;
position: absolute;
right: -6px;
top: -6px;
border-radius: 30%;
}
.computer {
background-color: $dark;
width: 80px;
height: 60px;
border-radius: 5px;
box-shadow: inset -5px 0 0 $highlight;
position: absolute;
top: 30px;
left: 55px;
&:before {
content: '';
position: absolute;
background-color: $highlight;
height: 5px;
width: 40px;
bottom: 0;
right: -35px;
border-radius: 5px;
}
}
.body {
position: absolute;
background-color: $base;
width: 50px;
height: 50px;
border-radius: 10px;
right: 0px;
top: 52px;
box-shadow: inset -5px -5px 0 $dark;
&:before {
position: absolute;
content: '';
background-color: $highlight;
width: 15px;
height: 20px;
border-radius: 5px;
left: 16px;
top: -10px;
}
}
.hand1, .hand2 {
background-color: $highlight;
width: 35px;
height: 10px;
border-radius: 5px;
position: absolute;
right: 10px;
top: 18px;
&:before {
content: '';
position: absolute;
background-color: $highlight;
height: 10px;
width: 10px;
border-radius: 5px;
top: 5px;
}
}
.hand2 {
right: 46px;
width: 15px;
animation: typing .4s ease-in-out infinite alternate;
}
.hand1 {
animation: typing .4s .4s ease-in-out infinite alternate;
}
@keyframes typing {
from {
transform: translateY(-5px);
}
to {
transform: translateY(5px);
}
}
