Untitled

<!DOCTYPE html>
<html>
<style>


body{

    background-image:url("[BACKGROUND IMAGE.]");
}

div {
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
animation-iteration-count: infinite;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {top:0px;}

    50%  {top:20px;}

    100% {top:0px;}
}


#pronouns {
animation-direction: reverse;

}


</style>

<body>
<img style="position:absolute; left:350px; z-index: +1;" src="[STATIC IMAGE OF CHARACTER]">
<div id="name">
<img src="[NAME OF CHARACTER AS FLOATING IMAGE]" />
</div>

<div style="left:700px; z-index: +2;" id="pronouns">
<img src="[OTHER FLOATING IMAGE. GENDER? PRONOUNS? WHATEVER YOU WANT]">

</div>
    <footer>code by matto :^)</footer>
<body>

</html>