Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
koala.css
body{
background: #25A9FC;
}
.box{
position: relative;
margin: auto;
display: block;
margin-top: 8%;
width: 600px;
height: 420px;
background: none;
border: solid 3px white;
}
.head{
position: absolute;
top:16.5%;
left: 25%;
width: 50%;
height: 67%;
background: #A6BECF;
border-radius: 50%;
z-index: 3;
}
.outer-ear-left{
position: absolute;
width: 33%;
height: 47%;
left: 17%;
top: 20%;
background: #A6BECF;
border-radius: 50%;
z-index: 1;
}
.outer-ear-right{
position: absolute;
width: 33%;
height: 47%;
right: 17%;
top: 20%;
background: #A6BECF;
border-radius: 50%;
z-index: 1;
}
.inner-ear-left{
position: absolute;
border-radius: 50%;
width: 28%;
height: 40%;
top: 23.5%;
left: 19.5%;
background: #819CAF;
z-index: 2;
}
.inner-ear-right{
position: absolute;
border-radius: 50%;
width: 28%;
height: 40%;
top: 23.5%;
right: 19.5%;
background: #819CAF;
z-index: 2;
}
.outer-eye-left{
position: absolute;
background: white;
width: 16%;
height: 22%;
top: 32%;
left: 35%;
border-radius: 50%;
z-index: 4;
}
.outer-eye-right{
position: absolute;
background: white;
width: 16%;
height: 22%;
top: 32%;
right: 35%;
border-radius: 50%;
z-index: 4;
}
.pupil-left{
position: absolute;
width: 4.5%;
height: 7%;
top: 40%;
left: 40.5%;
border-radius: 50%;
background: #27354A;
z-index: 5;
}
.pupil-right{
position: absolute;
width: 4.5%;
height: 7%;
top: 40%;
right: 40.5%;
border-radius: 50%;
background: #27354A;
z-index: 5;
}
.nose{
position: absolute;
background: #BE845F;
width: 13%;
height: 30.5%;
left: 43.5%;
top: 45%;
border-radius: 50px;
z-index: 5;
}
.hair-left{
position: absolute;
top: 12%;
left: 39%;
width: 10%;
height: 12%;
background: #A6BECF;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.hair-right{
position: absolute;
top: 14%;
left: 50%;
width: 10%;
height: 12%;
background: #A6BECF;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
@media all and (max-width: 600px) {
.box{
position: relative;
margin: auto;
display: block;
margin-top: 2%;
width: 400px;
height: 280px;
background: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.