Finn & Jake on a mushroom trampoline
HTML
<div class="bg">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>
<div class="cloud cloud4"></div>
</div>
<div class="wrapper">
<div class="jake">
<div class="body">
<div class="top"></div>
<div class="ear left"></div>
<div class="ear right"></div>
<div class="bottom"></div>
</div>
<div class="face">
<div class="eyes">
<div class="eye left"></div>
<div class="eye right"></div>
</div>
<div class="mouth"></div>
<div class="snout">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="nose"></div>
</div>
<div class="arm left"></div>
<div class="arm right"></div>
</div>
<div class="finn">
<div class="body">
<div class="bottom"></div>
<div class="top"></div>
<div class="ear left"></div>
<div class="ear right"></div>
</div>
<div class="face">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="mouth"></div>
</div>
<div class="pack left"></div>
<div class="pack right"></div>
<div class="arm left"></div>
<div class="arm right"></div>
</div>
</div>
<!-- <div class=""></div> -->
SCSS
/* COLORS */
$lightyellow: #fcce48;
$mediumyellow: #f8bc0b;
$darkyellow: #f7a709;
$lightblue: #14aeef;
$mediumblue: #0c92c8;
$darkblue: #0984b0;
$lightpink: #ffe1d5;
$mediumpink: #ffd0be;
$darkpink: #ecbfa6;
$lightgreen: #97df82;
$darkgreen: #45a21d;
$lightred: #f04008;
$darkred: #68180a;
$black: #070707;
$white: #f7f7f7;
$grey: #e9e5e4;
$skyblue: #67feff;
$cloudblue: #a7fdff;
/* MIXINS */
@mixin horizontalcenter(){
left: 50%;
transform: translatex(-50%);
}
@mixin centercenter(){
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* GENERAL */
div{
position: absolute;
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
&:before, &:after{
content: '';
position: absolute;
display: block;
box-sizing: border-box;
}
}
body{
top: 0;
left: 0;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: $skyblue;
& .bg{
top: 0;
left: 0;
width: 100vw;
height: 100vh;
& .cloud{
width: 30vw;
padding-top: 10vw;
border-radius: 5vw;
background: $cloudblue;
overflow: visible;
}
& .cloud1{
top: 15vw;
left: 15vw;
&:before{
top: 100%;
left: 30%;
width: 30vw;
padding-top: 10vw;
border-radius: 5vw;
background: $cloudblue;
}
}
& .cloud2{
top: 50vw;
left: 30vw;
&:before{
top: -80%;
left: 20%;
width: 30vw;
padding-top: 10vw;
border-radius: 5vw;
background: $cloudblue;
}
&:after{
top: 70%;
left: 30%;
width: 30vw;
padding-top: 10vw;
border-radius: 5vw;
background: $cloudblue;
}
}
& .cloud3{
bottom: 50vw;
right: 20vw;
&:before{
top: -80%;
left: -30%;
width: 30vw;
padding-top: 10vw;
border-radius: 5vw;
background: $cloudblue;
}
&:after{
top: 70%;
left: -40%;
width: 30vw;
padding-top: 10vw;
border-radius: 5vw;
background: $cloudblue;
}
}
& .cloud4{
bottom: 15vw;
right: 15vw;
&:before{
top: 100%;
left: 30%;
width: 30vw;
padding-top: 10vw;
border-radius: 5vw;
background: $cloudblue;
}
}
}
& .wrapper{
@include horizontalcenter();
bottom: 0;
width: 75vw;
height: 47vw;
& .jake{
bottom: 0;
width: 35vw;
height: 37vw;
animation: up-down 1s ease 0s alternate infinite;
& .body{
@include horizontalcenter();
width: 36vw;
height: 37vw;
& .top{
top: 0;
left: 2vw;
width: 33vw;
height: 33vw;
border: 1vw solid $black;
border-radius: 50%;
background: $mediumyellow;
clip-path: inset(0 0 50% 0);
&:before{
width: 30%;
height: 100%;
background: $darkyellow;
}
&:after{
right: 0;
width: 10%;
height: 100%;
background: $lightyellow;
}
}
& .ear{
top: 35%;
width: 3vw;
height: 20%;
border: 1vw solid $black;
border-radius: 5vw;
clip-path: inset(30% 0 0 0);
&.left{
left: 2vw;
background: $darkyellow;
transform: rotate(5deg);
}
&.right{
right: 1vw;
background: $lightyellow;
transform: rotate(-5deg);
}
}
& .bottom{
bottom: 0;
left: 4vw;
width: 29vw;
height: 22vw;
border-left: 1vw solid $black;
border-right: 1vw solid $black;
background: $mediumyellow;
&:before{
width: 27%;
height: 100%;
background: $darkyellow;
}
&:after{
right: 0;
width: 4%;
height: 100%;
background: $lightyellow;
}
}
}
& .face{
@include horizontalcenter();
top: 21%;
width: 70%;
height: 50%;
animation: jake-face 1s ease 0s alternate infinite;
& .eyes{
width: 100%;
height: 55%;
& .eye{
width: 10vw;
padding-top: 8vw;
border: 1vw solid $black;
border-radius: 50%;
background: $black;
&:before{
top: -10%;
left: 15%;
width: 100%;
padding-top: 100%;
border-radius: 50%;
background: $white;
}
&.right{
right: 0;
}
}
}
& .mouth{
@include horizontalcenter();
bottom: 14%;
width: 25%;
height: 30%;
border: 1vw solid $black;
border-radius: 15% 15% 52% 50% / 55% 50% 49% 47%;
background: $darkred;
&:before{
top: -60%;
left: -25%;
width: 150%;
padding-top: 50%;
border: 1vw solid $black;
border-radius: 50%;
background: $white;
}
&:after{
bottom: -60%;
width: 100%;
padding-top: 50%;
border: 1vw solid $black;
border-radius: 50%;
background: $lightred;
}
}
& .snout{
@include horizontalcenter();
top: 20%;
width: 62%;
height: 72%;
& .top{
width: 100%;
height: 13vw;
border: 1vw solid $black;
border-radius: 50%;
background: $mediumyellow;
clip-path: inset(0 0 50% 0);
&:after{
right: 0;
width: 10%;
height: 100%;
background: $lightyellow;
}
}
& .left, & .right{
top: 28%;
width: 5vw;
height: 70%;
border: 1vw solid $black;
border-radius: 5vw;
clip-path: inset(30% 0 0 0);
}
& .left{
left:0;
background: $mediumyellow;
}
& .right{
right: 0;
background: $mediumyellow;
&:after{
right: -60%;
width: 100%;
height: 100%;
background: $lightyellow;
}
}
}
& .nose{
@include horizontalcenter();
top: 40%;
width: 25%;
padding-top: 17%;
border-radius: 50%;
background: $black;
}
}
& .arm{
bottom: -12%;
width: 3vw;
height: 50%;
border: 1vw solid $black;
border-radius: 5vw;
animation: jake-arms 1s ease 0s alternate infinite;
&.left{
left: 1.75vw;
background: $darkyellow;
}
&.right{
right: 0.75vw;
background: $lightyellow;
}
}
}
& .finn{
bottom: -110%;
right: 1.5vw;
width: 37vw;
height: 46vw;
animation: up-down 1s ease 1s alternate infinite;
& .body{
@include horizontalcenter();
width: 74%;
height: 100%;
& .bottom{
bottom: 0;
width: 100%;
height: 55%;
border-left: 1vw solid $black;
border-right: 1vw solid $black;
background: $mediumblue;
&:before{
width: 20%;
height: 100%;
background: $darkblue;
}
&:after{
right: 0;
width: 8%;
height: 100%;
background: $lightblue;
}
}
& .top{
top: 8%;
width: 100%;
height: 40%;
border-left: 1vw solid $black;
border-right: 1vw solid $black;
border-bottom: 1vw solid $black;
background: $white;
overflow: visible;
&:before{
width: 20%;
height: 100%;
background: $grey;
}
&:after{
top: -12%;
width: 100%;
height: 70%;
border-radius: 50%;
border: 1vw solid black;
background: $white;
clip-path: inset(0 20% 80% 20%);
}
}
& .ear{
top: 0;
width: 24%;
height: 40%;
border: 1vw solid $black;
border-radius: 4vw;
clip-path: inset(0 0 80% 0);
&.left{
left:0;
background: $grey;
}
&.right{
right:0;
background: $white;
}
}
}
& .face{
@include horizontalcenter();
top: 12%;
width: 58%;
height: 32%;
border: 1vw solid $black;
border-radius: 50%;
background: $mediumpink;
animation: finn-face 1s ease 1s alternate infinite;
&:before{
width: 10%;
height: 100%;
background: $darkpink;
}
&:after{
right: 0;
width: 8%;
height: 100%;
background: $lightpink;
}
& .eye{
top: 35%;
width: 1.25vw;
height: 1.25vw;
border-radius: 50%;
background: $black;
&.left{
left: 15%;
}
&.right{
right: 15%;
}
}
& .mouth{
@include horizontalcenter();
top: 20%;
width: 50%;
padding-top: 20%;
border: 1vw solid transparent;
border-color: transparent transparent $black transparent;
border-radius: 50%;
}
}
& .pack{
top: 40%;
width: 3.5vw;
height: 28%;
border: 1vw solid $black;
border-radius: 3vw;
background: $darkgreen;
&:before{
width: 100%;
height: 55%;
background: $lightgreen;
border-radius: 1vw;
}
&.left{
left: 2vw;
}
&.right{
right: 2vw;
}
}
& .arm{
top: 55%;
width: 3vw;
height: 50%;
border: 1vw solid $black;
border-radius: 3vw;
background: $mediumblue;
animation: finn-arms 1s ease 1s alternate infinite;
&:before{
top: 30%;
left: -1vw;
width: 3vw;
height: 80%;
background: $mediumpink;
border: 1vw solid transparent;
border-color: $black transparent transparent transparent;
}
&.left{
left: 0;
background: $darkblue;
&:before{
background: $darkpink;
}
}
&.right{
right: 0;
background: $lightblue;
&:before{
background: $lightpink;
}
}
}
}
}
}
/* COLORS */
@keyframes up-down{
0% {bottom: -110%;}
100% {bottom: 0;}
}
@keyframes jake-face{
0% {top: 40%;}
100% {top: 18%;}
}
@keyframes finn-face{
0% {top: 20%;}
100% {top: 8%;}
}
@keyframes jake-arms{
0% {bottom: -35%}
100% {bottom: -12%}
}
@keyframes finn-arms{
0% {top: 70%;}
100% {top: 50%;}
}
