html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>body {
background: radial-gradient(#c7bdcb, #673d72, #070b18) no-repeat fixed;
}
.stars-container {
position: absolute;
left: 5%;
top: 8%;
width: 90vw;
height: 38vh;
}
.star {
position: relative;
width: 1rem;
height: 1rem;
border-radius: 50%;
-webkit-filter: blur(6px);
filter: blur(6px);
background-color: white;
}
.star.star-1 {
top: 10%;
left: 20%;
-webkit-animation: pulsing-star 1.8s 300ms infinite;
animation: pulsing-star 1.8s 300ms infinite;
}
.star.star-2 {
top: 35%;
left: 30%;
width: 0.5rem;
height: 0.5rem;
-webkit-filter: blur(3px);
filter: blur(3px);
}
.star.star-3 {
top: 12%;
left: 63%;
width: 0.8rem;
height: 0.8rem;
-webkit-animation: pulsing-star 1.6s 400ms infinite;
animation: pulsing-star 1.6s 400ms infinite;
}
.star.star-4 {
top: 22%;
left: 80%;
width: 0.4rem;
height: 0.4rem;
-webkit-filter: blur(3px);
filter: blur(3px);
}
.star.star-5 {
left: 53%;
bottom: 5%;
width: 0.3rem;
height: 0.3rem;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.star.star-6 {
left: 12%;
top: 45%;
width: 0.6rem;
height: 0.6rem;
-webkit-animation: pulsing-star 1.8s infinite;
animation: pulsing-star 1.8s infinite;
}
.star.star-7 {
left: 39%;
top: 3%;
width: 0.7rem;
height: 0.7rem;
-webkit-animation: pulsing-star 2s 100ms infinite;
animation: pulsing-star 2s 100ms infinite;
}
.star.star-8 {
left: 73%;
bottom: 19%;
width: 0.2rem;
height: 0.2rem;
-webkit-filter: blur(1px);
filter: blur(1px);
}
.star.star-9 {
left: 6%;
width: 0.2rem;
height: 0.2rem;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.star.star-10 {
left: 90%;
top: 25%;
-webkit-filter: blur(8px);
filter: blur(8px);
-webkit-animation: pulsing-star 1.9s infinite ease-out;
animation: pulsing-star 1.9s infinite ease-out;
}
@-webkit-keyframes pulsing-star {
5% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
30% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulsing-star {
5% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
30% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.naru-container {
position: relative;
width: 35rem;
height: 35rem;
margin: 8% auto 0;
}
.log {
position: absolute;
top: 63%;
left: -15%;
width: 50rem;
height: 9rem;
border-radius: 15%;
background: -webkit-gradient(linear, left top, left bottom, from(#8b5d5b), color-stop(black), to(#3e2929));
background: linear-gradient(#8b5d5b, black, #3e2929);
}
.log-end {
position: absolute;
top: 20%;
width: 0.8rem;
height: 6rem;
background-color: red;
border-bottom-right-radius: 100px;
border-top-right-radius: 100px;
background-color: #634241;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.log-end.log-end-right {
left: 98%;
top: 13%;
height: 6.7rem;
background-color: #6c4847;
}
.moss-patch {
position: absolute;
top: 20%;
left: 80%;
width: 6rem;
height: 1rem;
border-radius: 50%;
-webkit-filter: blur(1px);
filter: blur(1px);
}
.moss-patch.second-patch {
top: 26%;
left: 80%;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.moss-patch .main-moss {
position: absolute;
left: 50%;
width: 1rem;
height: 1rem;
border-radius: 50%;
-webkit-transform: scale(1.2);
transform: scale(1.2);
background-color: #5a7759;
}
.moss-patch .main-moss.moss-1 {
width: 0.8rem;
height: 0.8rem;
left: 40%;
background-color: #658564;
}
.moss-patch .main-moss.moss-2 {
left: 30%;
}
.moss-patch .main-moss.moss-3 {
width: 0.8rem;
height: 0.8rem;
left: 25%;
top: 2%;
}
.moss-patch .main-moss.moss-4 {
left: 20%;
top: 1%;
background-color: #4f684e;
}
.moss-patch .main-moss.moss-5 {
left: 8%;
}
.mushroom {
position: absolute;
width: 7rem;
height: 3rem;
}
.mushroom .mushroom-cap {
position: absolute;
bottom: 80%;
left: 30%;
width: 1rem;
height: 2rem;
border-bottom-right-radius: 100px;
border-top-right-radius: 100px;
background-color: #9894c3;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.mushroom .mushroom-cap.middle-cap {
left: 90%;
bottom: 33%;
}
.mushroom .mushroom-cap.last-cap {
left: -23%;
top: 15%;
-webkit-transform: rotate(220deg);
transform: rotate(220deg);
}
.mushroom .mushroom-cap .mushroom-stem {
position: absolute;
top: 36%;
right: 92%;
width: 1.4rem;
height: 0.5rem;
border-radius: 35%;
background-color: #5c569b;
}
.naru-body {
position: absolute;
top: 22%;
left: 22%;
width: 18rem;
height: 18rem;
border-radius: 100px 200px 300px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #291a12;
}
.naru-hair {
position: absolute;
top: 5%;
width: 0;
height: 0;
border-left: 1.1rem solid transparent;
border-right: 1.1rem solid transparent;
border-bottom: 1.1rem solid #3b251a;
-webkit-transform: rotate(10deg) skewX(-50deg);
transform: rotate(10deg) skewX(-50deg);
border-radius: 50px;
-webkit-box-shadow: 12px 11px 20px #7cccf6;
box-shadow: 12px 11px 20px #7cccf6;
opacity: 0.9;
}
.naru-hair.spike-2 {
left: 4%;
top: 0%;
}
.naru-hair.spike-3 {
left: 19%;
top: -4%;
}
.naru-hair.spike-4 {
left: -2%;
top: 16%;
}
.naru-hair.left-spike-arm {
left: -6%;
top: 65%;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-box-shadow: 13px -17px 26px #7cccf6;
box-shadow: 13px -17px 26px #7cccf6;
}
.naru-hair.left-spike-arm.spike-6 {
left: -4%;
top: 69%;
}
.naru-hair.spike-arm {
left: 89%;
top: 16%;
-webkit-box-shadow: -1px 14px 25px #7cccf6;
box-shadow: -1px 14px 25px #7cccf6;
-webkit-transform: rotate(-11deg);
transform: rotate(-11deg);
}
.naru-face {
position: absolute;
top: 5%;
left: 8%;
width: 5rem;
height: 5rem;
border-radius: 200px 50px;
background-color: #d3f6ff;
-webkit-filter: blur(1px);
filter: blur(1px);
}
.naru-face.naru-face-copy {
top: 10%;
left: 15%;
background-color: #64c3f5;
width: 2.5rem;
height: 2.5rem;
border-radius: 25%;
-webkit-filter: blur(10px);
filter: blur(10px);
opacity: 0.9;
}
.naru-face-glow {
position: absolute;
top: 21%;
left: 28%;
width: 2rem;
height: 3rem;
border-radius: 200px 50px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
background: radial-gradient(circle at center, #1dbde5, #291a12 100%);
-webkit-filter: blur(14px);
filter: blur(14px);
}
.naru-eye {
position: absolute;
top: 25%;
left: 13%;
width: 0.8rem;
height: 0.45rem;
border-radius: 100px/50px;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-filter: blur(1px);
filter: blur(1px);
background-color: #291a12;
}
.naru-eye.naru-right-eye {
top: 10%;
left: 27%;
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
.naru-eye-reflect {
position: absolute;
top: 60%;
left: 60%;
width: 0.2rem;
height: 0.2rem;
border-radius: 50%;
background-color: #dcf1fd;
opacity: 0.8;
}
.naru-eye-reflect.naru-right-eye-reflect {
top: 0%;
left: 40%;
}
.naru-mouth {
position: absolute;
top: 19%;
left: 22%;
width: 1.3rem;
height: 0.1rem;
border: 3px solid;
border-radius: 50%;
-webkit-transform: rotate(310deg);
transform: rotate(310deg);
border-color: transparent transparent #291a12;
-webkit-filter: blur(1px);
filter: blur(1px);
}
.naru-belly {
position: absolute;
top: 38%;
left: 35%;
height: 8rem;
width: 11rem;
border-radius: 100px 0px;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
background: radial-gradient(circle at center, #1dbde5, #291a12 100%);
-webkit-filter: blur(15px);
filter: blur(15px);
}
.naru-shoulder-shadow {
position: absolute;
left: 20%;
top: 34%;
width: 8rem;
height: 4rem;
border-radius: 100px 40px;
-webkit-transform: rotate(1230deg);
transform: rotate(1230deg);
background-color: #291a12;
-webkit-filter: blur(6px);
filter: blur(6px);
z-index: 2;
}
.naru-shoulder-shadow.reflect-shoulder-shadow {
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
left: 53%;
-webkit-filter: blur(15px);
filter: blur(15px);
background: -webkit-gradient(linear, left top, left bottom, from(#1dbde5), to(#060403));
background: linear-gradient(#1dbde5, #060403);
z-index: 0;
}
.naru-forearm {
position: absolute;
left: 18%;
top: 45%;
width: 9rem;
height: 3.5rem;
border-radius: 100px 40px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
background: radial-gradient(#1f130d 50%, #935e41);
z-index: 1;
}
.naru-forearm.right-forearm {
top: 53%;
-webkit-transform: rotate(-10deg) translateX(190px);
transform: rotate(-10deg) translateX(190px);
}
.naru-finger {
position: absolute;
background-color: #422a1d;
width: 2rem;
height: 1.1rem;
bottom: 50%;
left: 38%;
border-radius: 100px 40px;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
z-index: 3;
}
.naru-finger.naru-right-finger {
left: 50%;
bottom: 46%;
height: 0.7rem;
width: 1.5rem;
border-radius: 0px 10px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
background-color: #4db9f3;
-webkit-filter: blur(1px);
filter: blur(1px);
}
.naru-finger-line {
position: absolute;
background-color: #291a12;
width: 1.2rem;
height: 0.1rem;
border: 1px solid;
border-radius: 50%;
bottom: 45%;
left: 39%;
-webkit-box-shadow: -5px 2px 6px #d3ae9a;
box-shadow: -5px 2px 6px #d3ae9a;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
border-color: transparent;
z-index: 1;
-webkit-filter: blur(1px);
filter: blur(1px);
opacity: 0.5;
}
.naru-finger-line.top-finger-line {
bottom: 47%;
left: 40%;
}
.naru-finger-line.naru-right-finger-line {
bottom: 44%;
left: 52%;
width: 2rem;
}
.naru-finger-line.naru-top-right-finger-line {
left: 52%;
bottom: 48%;
width: 2rem;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.naru-elbow-highlight {
position: absolute;
left: 63%;
bottom: 16%;
width: 2.5rem;
height: 4rem;
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
border-radius: 50%;
-webkit-filter: blur(7px);
filter: blur(7px);
background: -webkit-gradient(linear, left top, right top, from(#1dbde5), to(#060403));
background: linear-gradient(left, #1dbde5, #060403);
}
.naru-thigh {
position: absolute;
width: 6.2rem;
height: 4.2rem;
left: 55%;
top: 60%;
border-radius: 50% 30%;
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
background: radial-gradient(ellipse, #291a12 50%, #1dbde5 150%);
-webkit-filter: blur(2px);
filter: blur(2px);
}
.naru-thigh.left-thigh {
left: 24%;
top: 59%;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.naru-leg {
position: absolute;
top: 65%;
left: 54%;
width: 6.3rem;
height: 6rem;
-webkit-clip-path: polygon(71% 17%, 23% 17%, 27% 69%, 44% 95%, 63% 71%);
clip-path: polygon(71% 17%, 23% 17%, 27% 69%, 44% 95%, 63% 71%);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
background-color: #291a12;
}
.naru-leg.left-leg {
left: 29%;
-webkit-transform: rotate(-27deg);
transform: rotate(-27deg);
}
.naru-foot {
position: absolute;
top: 75%;
left: 59%;
width: 2rem;
height: 4rem;
border-radius: 30px 30px 70px;
background: -webkit-gradient(linear, left top, left bottom, from(#291a12), to(#935e41));
background: linear-gradient(#291a12, #935e41);
-webkit-filter: blur(1px);
filter: blur(1px);
}
.naru-foot.left-foot {
left: 35%;
-webkit-transform: rotateY(170deg);
transform: rotateY(170deg);
}
.naru-toe-line {
position: absolute;
top: 85%;
left: 10%;
width: 1rem;
height: 0.1rem;
border: 1px solid;
border-radius: 50%;
-webkit-transform: rotate(290deg);
transform: rotate(290deg);
border-color: transparent transparent #291a12;
}
.ori-container {
position: relative;
top: 38%;
width: 18rem;
height: 8rem;
margin: 8% auto 0;
}
.ori-body {
position: absolute;
left: 30%;
top: 30%;
width: 6rem;
height: 3.7rem;
border-radius: 50%;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
background: -webkit-gradient(linear, left top, left bottom, from(#f4fbfe), to(#26abf0));
background: linear-gradient(#f4fbfe, #26abf0);
}
.ori-arm {
position: absolute;
left: 45%;
top: 25%;
width: 1.5rem;
height: 3rem;
border-radius: 100px/70px;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
-webkit-box-shadow: -1px 2px 3px #0e8acc;
box-shadow: -1px 2px 3px #0e8acc;
background: -webkit-gradient(linear, left top, left bottom, from(#f4fbfe), to(#64c3f5));
background: linear-gradient(#f4fbfe, #64c3f5);
-webkit-filter: blur(1px);
filter: blur(1px);
}
.ori-ear {
position: absolute;
bottom: 80%;
left: 60%;
width: 1.3rem;
height: 4rem;
border-radius: 500px 10px 90px 500px;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
background: -webkit-gradient(linear, left top, left bottom, from(#f4fbfe), to(#94d5f8));
background: linear-gradient(#f4fbfe, #94d5f8);
-webkit-filter: blur(1px);
filter: blur(1px);
}
.ori-ear.front-ear {
bottom: 55%;
left: 82%;
-webkit-transform: rotate(201deg);
transform: rotate(201deg);
}
.ori-head {
position: absolute;
left: 55%;
width: 5rem;
height: 4rem;
border-radius: 50%;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
background: radial-gradient(white, #acdff9 60%);
}
.ori-hair {
position: absolute;
left: 69%;
bottom: 90%;
width: 0.5rem;
height: 3rem;
border-radius: 50px 0px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
background-color: #dcf1fd;
-webkit-filter: blur(1px);
filter: blur(1px);
}
.ori-hair.right-hair {
bottom: 80%;
left: 75%;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.ori-eye {
position: absolute;
height: 0.6rem;
top: 20%;
left: 15%;
border: 1px solid #095a84;
-webkit-filter: blur(1px);
filter: blur(1px);
}
.ori-eye.ori-right-eye {
height: 0.8rem;
left: 45%;
top: 50%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.ori-nose {
position: absolute;
top: 45%;
left: 9%;
width: 0.4rem;
height: 0.8rem;
border-radius: 100px/150px;
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
-webkit-filter: blur(1.5px);
filter: blur(1.5px);
background-color: #64c3f5;
}
.ori-tail {
position: absolute;
left: 6%;
top: 30%;
width: 4rem;
height: 5rem;
border-radius: 500px;
border: 1rem solid;
border-color: #c4e8fb transparent transparent;
-webkit-filter: blur(1px);
filter: blur(1px);
z-index: 2;
}
.ori-tail .tail-tip {
position: absolute;
top: -3%;
right: 85%;
width: 1rem;
height: 1.2rem;
border-radius: 50%;
background-color: #c4e8fb;
}
</style>
</HEAD>
<BODY>
<div class="stars-container">
<div class="star star-1"></div>
<div class="star star-2"></div>
<div class="star star-3"></div>
<div class="star star-4"></div>
<div class="star star-5"></div>
<div class="star star-6"></div>
<div class="star star-7"></div>
<div class="star star-8"></div>
<div class="star star-9"></div>
<div class="star star-10"></div>
</div>
<div class="naru-container">
<div class="log">
<div class="log-end"></div>
<div class="log-end log-end-right"></div>
<div class="moss-patch">
<div class="main-moss"></div>
<div class="main-moss moss-1"></div>
<div class="main-moss moss-2"></div>
<div class="main-moss moss-3"></div>
<div class="main-moss moss-4"></div>
<div class="main-moss moss-5"></div>
</div>
<div class="moss-patch second-patch">
<div class="main-moss"></div>
<div class="main-moss moss-1"></div>
<div class="main-moss moss-2"></div>
<div class="main-moss moss-3"></div>
<div class="main-moss moss-4"></div>
<div class="main-moss moss-5"></div>
</div>
<div class="mushroom">
<div class="mushroom-cap">
<div class="mushroom-stem"></div>
</div>
<div class="mushroom-cap middle-cap">
<div class="mushroom-stem"></div>
</div>
<div class="mushroom-cap last-cap">
<div class="mushroom-stem"></div>
</div>
</div>
</div>
<div class="naru-body">
<div class="naru-hair"></div>
<div class="naru-hair spike-2"></div>
<div class="naru-hair spike-3"></div>
<div class="naru-hair spike-4"></div>
<div class="naru-hair spike-arm"></div>
<div class="naru-hair left-spike-arm"></div>
<div class="naru-hair left-spike-arm spike-6"></div>
<div class="naru-face"></div>
<div class="naru-face naru-face-copy"></div>
<div class="naru-face-glow"></div>
<div class="naru-eye">
<div class="naru-eye-reflect"></div>
</div>
<div class="naru-eye naru-right-eye">
<div class="naru-eye-reflect naru-right-eye-reflect"></div>
</div>
<div class="naru-mouth"></div>
</div>
<div class="naru-belly"></div>
<div class="naru-shoulder-shadow"></div>
<div class="naru-shoulder-shadow reflect-shoulder-shadow"></div>
<div class="naru-forearm"></div>
<div class="naru-finger-line top-finger-line"></div>
<div class="naru-finger-line"></div>
<div class="naru-finger"></div>
<div class="naru-forearm right-forearm">
<div class="naru-elbow-highlight"></div>
</div>
<div class="naru-finger naru-right-finger"></div>
<div class="naru-finger-line naru-top-right-finger-line"></div>
<div class="naru-finger-line naru-right-finger-line"></div>
<div class="naru-thigh"></div>
<div class="naru-leg"></div>
<div class="naru-foot">
<div class="naru-toe-line"></div>
</div>
<div class="naru-thigh left-thigh"></div>
<div class="naru-leg left-leg"></div>
<div class="naru-foot left-foot">
<div class="naru-toe-line"></div>
</div>
<div class="ori-container">
<div class="ori-body"></div>
<div class="ori-arm"></div>
<div class="ori-ear"></div>
<div class="ori-head">
<div class="ori-eye"></div>
<div class="ori-eye ori-right-eye"></div>
<div class="ori-nose"></div>
</div>
<div class="ori-ear front-ear"></div>
<div class="ori-hair"></div>
<div class="ori-hair right-hair"></div>
<div class="ori-tail">
<div class="tail-tip"></div>
</div>
</div>
</div>
</BODY>
</HTML>