<div class="kawaii-page">
<div class="hero">
<h1>✧ magical girl user ✧</h1>
<p>pink glitter • snacks • anime • soft chaos</p>
</div>
<div class="stickerboard">
<img src="https://i.postimg.cc/FscKpMy2/IMG-7714.jpg" class="sticker big tilt-left">
<img src="https://i.postimg.cc/GmVqRs8Y/IMG-7719.jpg" class="sticker medium tilt-right">
<img src=" https://i.postimg.cc/GpZLvzBc/IMG-7721.jpg" class="sticker small float">
<div class="note">
🌙 this user is a magical girl
</div>
<div class="note tiny">
sensory issues + overwhelmed by too many noises
</div>
<div class="quote">
“stay strong, sailor scout. you can do it!”
</div>
</div>
</div>
<style>
body {
background: #ffd6ea;
background-image:
radial-gradient(#fff 1px, transparent 1px),
linear-gradient(135deg, #ffd6ea, #f7b7d8, #fbeaff);
background-size: 20px 20px, cover;
font-family: "Trebuchet MS", "Verdana", sans-serif;
color: #8f4f74;
}
.kawaii-page {
max-width: 760px;
margin: 25px auto;
padding: 18px;
background: rgba(255, 245, 252, 0.75);
border: 3px solid #ffb6d9;
box-shadow: 0 0 25px #ff9ccc;
}
.hero {
text-align: center;
background: #ffc7e3;
border: 2px dashed white;
padding: 18px;
margin-bottom: 20px;
}
.hero h1 {
color: #ff5ca8;
text-shadow: 2px 2px white;
font-size: 32px;
margin: 0;
}
.hero p {
font-size: 14px;
letter-spacing: 1px;
}
.stickerboard {
position: relative;
min-height: 700px;
background:
linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)),
url("BACKGROUND-IMAGE-LINK-HERE");
background-size: cover;
border: 3px solid white;
overflow: hidden;
}
.sticker {
position: absolute;
filter: drop-shadow(4px 4px 0 white)
drop-shadow(0 0 8px #ff9ccc);
}
.big {
width: 230px;
top: 40px;
left: 35px;
}
.medium {
width: 170px;
top: 250px;
right: 45px;
}
.small {
width: 110px;
bottom: 80px;
left: 80px;
}
.tilt-left {
transform: rotate(-8deg);
}
.tilt-right {
transform: rotate(7deg);
}
.float {
animation: floaty 3s ease-in-out infinite;
}
.note, .quote {
position: absolute;
background: #ffe4f2;
border: 3px solid #ffb6d9;
color: #9b4f75;
padding: 12px 18px;
font-weight: bold;
box-shadow: 4px 4px 0 #ffc2df;
}
.note {
top: 190px;
left: 90px;
}
.note.tiny {
top: 380px;
right: 35px;
font-size: 12px;
width: 240px;
}
.quote {
bottom: 180px;
left: 45px;
width: 260px;
font-size: 18px;
text-align: center;
}
@keyframes floaty {
0% { transform: translateY(0) rotate(-4deg); }
50% { transform: translateY(-10px) rotate(4deg); }
100% { transform: translateY(0) rotate(-4deg); }
}
a {
color: #ff5ca8;
text-decoration: none;
font-weight: bold;
}
</style>