<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/dwaseem/pen/XXWVgq" />
<style class="cp-pen-styles">body {
background-color: #EDEFF4;
}
#done-animation {
width: 350px;
margin: 0 auto;
position: relative;
margin-top: 10%;
text-align: center;
}
div.main {
font-family: GothamRoundedMedium;
font-size: 32px;
color: #7E889E;
line-height: 0;
display: block;
margin-top: -20px;
}
#room {
width: 390px;
z-index: -1;
position: absolute;
top: -10px;
-webkit-animation: fade-in 1s ease-in;
animation: fade-in 1s ease-in;
margin: 0 auto;
display: block;
-webkit-filter: blur(2px);
filter: blur(2px);
}
div:not(.main) {
font-family: SanFranciscoText-Light;
font-size: 22px;
color: #838597;
line-height: 22px;
}
#rainbow path {
stroke-dasharray: 600;
stroke-dashoffset: 0;
opacity: 0;
-webkit-animation: rainbow 750ms ease-out 0.4s forwards;
animation: rainbow 750ms ease-out 0.4s forwards;
}
#face {
width: 136px;
margin: 0 auto;
display: block;
top: -80px;
position: relative;
-webkit-animation: face 1s ease-in-out, fade-in 0.5s ease-in-out, float 1s ease-in-out 1s infinite alternate;
animation: face 1s ease-in-out, fade-in 0.5s ease-in-out, float 1s ease-in-out 1s infinite alternate;
}
#stars {
width: 205px;
margin: 0 auto;
display: block;
top: 50px;
left: 70px;
position: absolute;
}
#stars .a, #stars .a1 {
-webkit-transform-origin: center center;
transform-origin: center center;
}
#stars .a {
-webkit-animation: fade-in 1s ease-in-out, scale 1s ease-in-out infinite alternate-reverse;
animation: fade-in 1s ease-in-out, scale 1s ease-in-out infinite alternate-reverse;
}
#stars .a1 {
-webkit-animation: fade-in 1s ease-in-out, scale 1.2s ease-in-out infinite alternate;
animation: fade-in 1s ease-in-out, scale 1.2s ease-in-out infinite alternate;
}
#shadow {
width: 100px;
height: 12px;
margin: 0 auto;
display: block;
position: relative;
top: -65px;
z-index: -1;
-webkit-animation: fade-in 1s ease-in, scale 2s ease-in-out infinite alternate-reverse;
animation: fade-in 1s ease-in, scale 2s ease-in-out infinite alternate-reverse;
}
#thumbup {
width: 40px;
display: block;
margin: 0 auto;
position: absolute;
top: 180px;
left: 215px;
-webkit-animation: face 1s ease-in-out, fade-in 0.5s ease-in-out, float-soft 1s ease-in-out 1s infinite alternate;
animation: face 1s ease-in-out, fade-in 0.5s ease-in-out, float-soft 1s ease-in-out 1s infinite alternate;
}
@-webkit-keyframes rainbow {
0% {
opacity: 0;
stroke-dashoffset: -500;
}
50% {
opacity: 1;
}
to {
opacity: 1;
stroke-dashoffset: 0;
}
}
@keyframes rainbow {
0% {
opacity: 0;
stroke-dashoffset: -500;
}
50% {
opacity: 1;
}
to {
opacity: 1;
stroke-dashoffset: 0;
}
}
@-webkit-keyframes face {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes face {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes float {
from {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
to {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
}
@keyframes float {
from {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
to {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
}
@-webkit-keyframes float-soft {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@keyframes float-soft {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@-webkit-keyframes scale {
from {
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-filter: blur(1.5px);
filter: blur(1.5px);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(5px);
filter: blur(5px);
}
to {
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-filter: blur(1.5px);
filter: blur(1.5px);
}
}
@keyframes scale {
from {
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-filter: blur(1.5px);
filter: blur(1.5px);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(5px);
filter: blur(5px);
}
to {
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-filter: blur(1.5px);
filter: blur(1.5px);
}
}
</style></head><body>
<div id="done-animation">
<svg id="rainbow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 180"><path id="red" d="M270,170a100,100,0,0,0-200,0" style="fill:none;stroke:#FF9E80;stroke-linecap:round;stroke-width:20px"/><path id="yellow" d="M290,170a120,120,0,0,0-240,0" style="fill:none;stroke:#FFE57F;stroke-linecap:round;stroke-width:20px"/><path id="blue" d="M310,170a140,140,0,0,0-280,0" style="fill:none;stroke:#80D8FF;stroke-linecap:round;stroke-width:20px"/><path id="purple" d="M330,170a160,160,0,0,0-320,0" style="fill:none;stroke:#BF9AFF;stroke-linecap:round;stroke-width:20px"/></svg><svg id="face" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 136"><title>face</title><path d="M68,134A66,66,0,1,0,2,68,66,66,0,0,0,68,134Z" style="fill:#fbfcfd;stroke:#A1ACBA;stroke-width:4px"></path><path d="M109.4,19.2A64.7,64.7,0,0,1,132,68.5,63.8,63.8,0,0,1,68.5,132a64.7,64.7,0,0,1-49.3-22.6A64.8,64.8,0,0,0,61.5,125,63.8,63.8,0,0,0,125,61.5,64.8,64.8,0,0,0,109.4,19.2Z" style="fill:#ECF1FF;isolation:isolate"></path><path d="M49.1,62.1a10,10,0,0,0-14.1,0" style="fill:none;stroke:#A1ACBA;stroke-linecap:round;stroke-width:5px"></path><path d="M101.1,62.1a10,10,0,0,0-14.1,0" style="fill:none;stroke:#A1ACBA;stroke-linecap:round;stroke-width:5px"></path><path d="M42,88a36.8,36.8,0,0,0,52,0" style="fill:none;stroke:#A1ACBA;stroke-linecap:round;stroke-linejoin:round;stroke-width:5px"></path></svg>
<svg id="stars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205 77"><defs><style>.a, .a1{fill:#fff;}</style></defs><title>stars</title><path class="a1" d="M71.2,22.9A22.3,22.3,0,0,1,57.1,8.8a1.2,1.2,0,0,0-2.3,0A22.3,22.3,0,0,1,40.8,22.9a1.2,1.2,0,0,0,0,2.3A22.3,22.3,0,0,1,54.9,39.2a1.2,1.2,0,0,0,2.3,0A22.3,22.3,0,0,1,71.2,25.1a1.2,1.2,0,0,0,0-2.3" transform="translate(0 0)"/><path class="a1" d="M204.2,50.9a22.3,22.3,0,0,1-14.1-14.1,1.2,1.2,0,0,0-2.3,0,22.3,22.3,0,0,1-14.1,14.1,1.2,1.2,0,0,0,0,2.3,22.3,22.3,0,0,1,14.1,14.1,1.2,1.2,0,0,0,2.3,0,22.3,22.3,0,0,1,14.1-14.1,1.2,1.2,0,0,0,0-2.3" transform="translate(0 0)"/><path class="a" d="M155.4,11.1A16.7,16.7,0,0,1,144.9.6a0.9,0.9,0,0,0-1.7,0,16.7,16.7,0,0,1-10.5,10.5,0.9,0.9,0,0,0,0,1.7,16.7,16.7,0,0,1,10.5,10.5,0.9,0.9,0,0,0,1.7,0,16.7,16.7,0,0,1,10.5-10.5,0.9,0.9,0,0,0,0-1.7" transform="translate(0 0)"/><path class="a" d="M15.6,68.4a11.2,11.2,0,0,1-7-7,0.6,0.6,0,0,0-1.1,0,11.2,11.2,0,0,1-7,7,0.6,0.6,0,0,0,0,1.1,11.2,11.2,0,0,1,7,7,0.6,0.6,0,0,0,1.1,0,11.2,11.2,0,0,1,7-7,0.6,0.6,0,0,0,0-1.1" transform="translate(0 0)"/></svg>
<svg id="room" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 391 230"><defs><radialGradient id="radial-gradient" cx="-109.23" cy="481.9" r="0.48" gradientTransform="matrix(391, 0, 0, -230, 42900, 111068)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d8dadf"/><stop offset="1" stop-color="#edeff4" stop-opacity="0"/></radialGradient></defs><title>Rectangle 73</title><rect id="Rectangle-73" width="391" height="230" style="fill:url(#radial-gradient)"/></svg>
<svg id="thumbup" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 54"><title>thumbup</title><path d="M10,52a8.1,8.1,0,0,1-7.9-7.3,8.3,8.3,0,0,1,2-6.7A8.7,8.7,0,0,1,2,32a8.5,8.5,0,0,1,2.1-6A9.7,9.7,0,0,1,2,19.5c0-4.2,4.1-7.3,7.9-7.5H22.4a1.1,1.1,0,0,0,.3-0.9V10.9a8.4,8.4,0,0,1,2.1-6.4A7.1,7.1,0,0,1,30.1,2a8,8,0,0,1,8,8V38A13.9,13.9,0,0,1,24.3,52H10Z" transform="translate(-0.02)" style="fill:#fbfbfc"></path><path d="M23,11c0-.2.4-4.9,1.8-6.5A7.1,7.1,0,0,1,30.1,2a8,8,0,0,1,8,8V38c0,7.9-7.2,14-15.1,14V11Z" transform="translate(-0.02)" style="fill:#ECF1FF;isolation:isolate"></path><path d="M30.1,0a9.1,9.1,0,0,0-6.7,3.2A10.4,10.4,0,0,0,20.7,10H9.8a11.2,11.2,0,0,0-6.2,2.5,9,9,0,0,0-3.5,7A12.5,12.5,0,0,0,1.7,26,11.1,11.1,0,0,0,.1,32a11.4,11.4,0,0,0,1.6,6A10.5,10.5,0,0,0,.1,45,10.1,10.1,0,0,0,10,54H24.1a15.8,15.8,0,0,0,16-15.6q0-.2,0-0.4V10a10,10,0,0,0-10-10m0,4a6,6,0,0,1,6,6V38A11.8,11.8,0,0,1,24.5,50H10a6.1,6.1,0,0,1-5.9-5.5c-0.4-3.2,1.5-6.3,4.7-6.7H8.3c-2.7,0-4.2-2.6-4.2-5.8s1.6-5.8,4.4-5.8H8.8c-3.3-.2-4.7-3.3-4.7-6.7s3.4-5.4,6-5.5H22.4c1.5,0,2.3-1.4,2.3-2.9V10.8C24.3,7.3,27.1,4,30.1,4" transform="translate(-0.02)" style="fill:#A1ACBA"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 12" id="shadow"><title>shadow</title><ellipse style="fill:#e1e4ec"cx="50" cy="6" rx="50" ry="6"/></svg>
</div>
</body></html>
