🪀 crd tuto: name embed

<style>
@font-face {
font-family: funkhouse;
src: url(https://dl.dropbox.com/s/2bxao21r582gf5d/FUNKHOUS.ttf);
}

#yop, .letter {
position: absolute;
}

#yop {
padding: 0.25em;
background: transparent;
font-family: funkhouse;
color: #ffdef0;
-webkit-text-stroke: 0.5px #FFA4D6;
-webkit-filter: drop-shadow(0px 0px 1.5px #FFA4D6);
left: 7.5em;
bottom: 6.8em;
opacity: 98%;
}

.letter {
font-size: 5.5em;
padding: 0.25em;
animation: float 1s linear infinite;
}

.first {
left: 0.1em;
}

.second {
left: 0.55em;
animation-delay: 0.15s;
}

.third {
left: 1em;
animation-delay: 0.25s;
}

.fourth {
left: 1.25em;
animation-delay: 0.4s;
}

@keyframes float { 0% {
transform: rotate(0) translateY(0); }
50% { transform: rotate(15deg) translateY(-10px); }
75% { transform: rotate(-15deg) translateY(0); }
100% { transform: rotate(0) translateY(0);
}
}

</style>
<body>
<div id="yop"><span class="first letter">N</span><span class="second letter">a</span><span class="third letter">l</span><span class="fourth letter">u</span>
</div>