here is a template for it, i think puppy made it. it's called a page doll. position it however you'd like
<style>
.page-doll {
position: fixed;
bottom: 10px; /For positioning. Adjust as needed. Can change 'bottom' to 'top'/
right: 10px; /For positioning. Adjust as needed. Can change 'right' to 'left'/
z-index: 1000;
}
.page-doll img {
width: --px; /Change -- to the size you want the page doll to be/
height: auto;
cursor: pointer;
}
</style>
<div class="page-doll">
<img src="IMAGE LINK" alt="Page Doll">
</div>
I saw that Nanni gave you a code, so, for reasons of (i have absolutely no idea where this is located in my enormous notebook), i'll let her speak for me 🕊️
this is for a floating chibi that has a phrase when you click on it, it can be anything:
<style>
.page-doll-static {
position: fixed;
top: 50%;
right: 12px;
width: 100px;
z-index: 9999;
transform: translateY(-50%);
animation: floatUpDown 3.2s ease-in-out infinite;
}
.page-doll-static img {
width: 100%;
height: auto;
display: block;
cursor: pointer;
pointer-events: none;
}
.hover-status-box-bg {
position: absolute;
bottom: -5px;
right: 0;
background: orange;
content: "";
height: 20px;
width: 100%;
}
.hover-status-text {
position: relative;
color: black;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
height: 20px;
width: 100%;
transition: all 400ms ease-in-out;
}
.hover-status-text::before {
position: absolute;
bottom: 1px;
content: "blahblahblah!";
color: black;
}
.page-doll-static:hover .hover-status-text::before {
content: "nanni blahblah";
}
</style>
<div class="page-doll-static">
<img src="LINK OF IMAGE HERE" alt="Floating Page Doll">
<div class="hover-status-box-cont">
<div class="hover-status-box-bg">
<div class="hover-status-text"></div>
</div>
</div>
</div>
also to make it bigger or smaller you change the width
Revospring uses Markdown for formatting
*italic text* for italic text
**bold text** for bold text
[link](https://example.com) for link
