pompompurin layout :3

Tags: yellow, pompompurin, sanrio, cute, pastel

Description:

hiii !!! this is the layout another i have uploaded was based off of, so i figured, why not dust it off and post it as well? add some variety, yknow? im here to represent the sanrio cast that aren't my melody and kuromi LMAO

this should work on mobile, it works just fine on my own phone

again, change, recolor, or add whatever you would like, i am posting this for you to have fun with. so go nuts bro !!!

i have a few added classes at the end that i explained in some comments, so i'd recommend giving them a read. if you have any questions, lemme know and i'll do my best 2 help u :) i know i tend to talk. a lot. and it can get confusing.

credit IS appreciated but not entirely necessary.

and if you repost this i will hunt you down and eat your bones.

~~yes i know the cursor is rilakkuma but shhhhhh shhhhhhhhh its fine SHHHH~~

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by shark bait (https://layouts.spacehey.com/layout?id=19117) -->

<style> 
/* hey
if you're reading this and you wanna use this,
there is a ton of shit in comments at the end
pls read it, it might be helpful to you */

* { 
 cursor: url("https://external-media.spacehey.net/media/sK4Wv6Xt4mVwioy_11ZPdui5lpnN3sf8Zrrp-nbAkLRc=/https://64.media.tumblr.com/bfeb4de99f006cc06feea83abe148856/a84c21d2139b6d83-bc/s75x75_c1/24db06b329a4fa5574a74ea096ce743a699bc040.png"), auto !important;
 font-family: monospace; 
 font-weight: bold;
}

:root {
  --links: rgb(145,145,145);
  --text: rgb(27, 28, 26);
  --headers: rgb(247,249,187);
  --shadows: rgb(247,249,187);
  --borders: rgba(0,0,0,.2);
  --shift: rgb(247,249,187);
}
html {
 animation: fadeIn ease 3s;
 animation-iteration-count: 1;
 animation-fill-mode: forwards;
}
body {
 margin:0;
 background-image: url("https://external-media.spacehey.net/media/siL8d6TRCgrD-9v4vKw9a_RExiiPA-JILT0nSABwypUQ=/https://64.media.tumblr.com/accf3c0dadd5dc2f91bc758b6f7d0ddc/f02cca1d11dd88d1-d2/s250x400/08db0cc875a3f08337ab2440c27fb824cc5202c2.png");
 background-attachment: fixed;
 }
p {
 color: var(--text);
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(1004%) hue-rotate(18deg) brightness(111%) contrast(90%) !important; 
    height:30px;
}
button {
  background: white;
  color: var(--text);
  border: 1px solid black;
}
button:hover {
  border: solid 1px var(--shift);
  transition: 0.2s;
}
input {
  background: white;
  color: var(--text);
  border: black solid 1px;
}
input:hover {
  border: solid 1px var(--shift);
  transition: 0.2s;
}
nav .top , nav .links{
  background: transparent;
  text-align: center;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " 🍮";
}
nav .links .active img{
content: url(https://64.media.tumblr.com/502bf72622c5b6d59972c0fa802a4bf1/2d88e18a0c651708-84/s75x75_c1/6dff529d5e0fe8b53a050ac8d0047e4b870e461c.gifv);
}
main {
 background: white !important;
 border: black 1px solid;
}
.col.left h1:before{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 115px;
  background-image: url("https://external-media.spacehey.net/media/svrL6uEQWvG4GjbkkEbitMR_2eNH4mXUEajdwZDgYDjU=/https://64.media.tumblr.com/2effc31904ffe578a83c5ef1770c3395/571afedb7b42989a-44/s250x250_c1/ddaeb5dd3a6ef936897e8fdabfe77360517aaed1.gifv");
  background-repeat: no-repeat;
  background-size: 120px;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 110px;
  background-image: url("https://external-media.spacehey.net/media/sF7kfDIWDZwQWZn-lnjJGlDdhRG9SxgCr6KC5YrQSXC8=/https://64.media.tumblr.com/a7c7ed4688f72f040b6d5445764bb9c4/8443660b5cb7ab6e-49/s2048x3072/e0bb87727a2d822c2b63cd4f6cd6b17b7e8d3868.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 350px;
}
h1 {
  color: var(--links);
}
.profile-pic img {
  border: solid black 1px;
  border-radius: 180px;
}
.profile-pic img:hover{
  animation: rotation 0.3s infinite linear;
  /*every time i update this i make this faster*/
}
.online{
  content: url("https://external-media.spacehey.net/media/sTMqu2qir4v_wvrfw10ij-CLrHT3I-Vbau5q7U4oiN5A=/https://www.myspacegens.com/images/online_now/003.gif");
} 
.mood {
  padding-top: 2px;
}
.mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 50px;
  background-image: url(https://external-media.spacehey.net/media/sFcLG20nHyu9BUN4kw035aIsIIE6A-uQ9hLS-C8aR3EA=/https://64.media.tumblr.com/b23b1836395a8de830bbfe7da9921d99/tumblr_pmuivtxCZl1y5fz9ko4_250.gifv);
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: 300px;
}
.blurbs .inner {
  text-align: center !important;
}
.url-info {
  display: none;
}
nav {
  background: white !important;
  color: var(--links) !important;
  border: black 1px solid;
  margin-bottom: 5px;
}
footer {
  background: white !important;
  border: black 1px solid;
}
.comments-table, .comment-replies {
  border: none;
}
.profile-info, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {
  background: none;
  border: none;
}
#comments {
  height: 400px;
  overflow-y: scroll;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon){
  border: 1px solid black;
  border-radius: 180px;
}
.comments-table td:first-child img:not(.icon):hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
a, nav .links a, nav .links .special a {
  color: var(--links);
  text-shadow: none;
}
a:hover, nav .links a:hover, nav .right a:hover {
  color: var(--headers);
  text-decoration: none !important;
  transition: 0.2s;
}
.logout-btn {
  color: var(--links);
  box-shadow: none;
}
.logout-btn:hover {
  color: var(--shift);
  box-shadow: none;
  border: none;
  text-decoration: none;
  transition: 0.2s;
}
.col.left:after {
  pointer-events: none;
  content: url(https://external-media.spacehey.net/media/sU-4mw8ySAhlQaxPb6_7qrqivvj7p-i7b1zIPN5Wddvc=/https://64.media.tumblr.com/45fb09de59e3d09e55bd1944e09acc19/e608c13f7a84b28e-69/s400x600/c2bace90cb13863741b20056f00627b5a00f7130.png);
}
.profile .contact, .profile .table-section,  .profile .blurbs .section, .friends  {
 border: var(--borders) solid 1px;
 box-shadow: 4px 4px 0px var(--shadows);
}
.contact .inner a img {
  font-size: 0;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
  /*changes the icons*/
 content: url(https://external-media.spacehey.net/media/s8vRZPeOfK3daiHhJOp1MB28sJDrV6UPmbxPYyaFJxZ4=/http://i387.photobucket.com/albums/oo314/paravidatoda/div78.gif);
 margin-right: -6px;
}
.contact a, .table-section a {
  color: var(--links);
}
.contact a:hover, .table-section a:hover {
  color: var(--shift);
  text-decoration: none;
  transition: 0.2s;
}
.profile .table-section .details-table td {
  background: none;
}
.profile .blurbs .heading {
  font-size: 15px;
  background: none;
  color: var(--links);
}
.col.right h4 {
  color: var(--links);
  text-align: left;
}
.profile .blurbs .section h4, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
  background: var(--headers);
  color: var(--links);
  background-image: url(https://i.imgur.com/VTQtuRz.gif);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 9px;
  padding-left: 5px;
  padding-bottom: 5px;
}
.person p {
  color: var(--links) !important;
}
.person img{ 
  border: 1px solid black;
  border-radius: 180px;
  display: absolute;
  height: 100px;
  object-fit: cover;
  width:100px;
}
.person:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.count {
  color: var(--links);
}
footer::after{
  bottom: 0;
  font-size:0;
  left: 77%;
  position:fixed;
  pointer-events: none;
  content:url("https://external-media.spacehey.net/media/s2lhOibD_UhgdpF0vfbppnINxbiYbr8NKh1a9GB1UXDg=/https://64.media.tumblr.com/ae91e9d18b0da620cef11f361228d481/tumblr_p3mzsfF1wn1w8sgt6o2_400.png");
}
/* makes other people's avatars shake
around when you hover on them hehe */
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* this makes your profile picture spin weeeeeee */
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
/* does the fade in thing when you click on your profile */
@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
} 
/* assign this to your iframes 
so put 
class="player"
in the iframe tag
it will put the player in the bottom left of the screen
and it'll be invisible until you hover over it :)*/
.player {
  opacity: 0;
  left: 0;
  bottom: 0;
}
/* when you hover over where the iframw is, itll appear.
adjust the transition to mess w how fast it appears,
this was just based off my own guess. */
.player:hover {
  opacity: 100%;
  transition: 0.3s;
}
/* i assign this to my stamps in my interests table.
basically, class="stamps" for every img tag.
makes it s that its 2 in every row. 
its not a necessity but if you'd like to convert
one of the interest table cells to a dedicated
stamp section, here you go */
.stamps{
  height: 45px;
  width: 85px;
}
/* makes it so that the iframe w player assigned to it and
the pic in the corner don't crowd everything on mobile screens */
@media screen and (min-width: 0px) and (max-width: 720px) {
  footer:after { display: none; }
  .player { display: none; }
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 503 comments ( View all | Add Comment )

𝐋et :3	1752634900 using tyy !! Report Comment
[ ♯ 𝔸𝕞𝕪 ʚɞ 🍮🎹⋆.˚]	1752272191 Using! :D Report Comment
✮˚ᥫ᭡ Sannie 𝜗𝜚˚⋆	1751551901 USING!! Report Comment
xxAmyxx	1751396586 Using Report Comment
XxDunj4xX	1751126526 Heyy!!! I don’t wanna sound weird or stupid or anything but do you know how I can only get the yellow colour around the texts? I hope you know what I mean🥹 Report Comment not weird or annoying at all! to get the color around the headers i used .profile .blurbs .section h4, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading { background: var(--headers); color: var(--links); padding-left: 5px; padding-bottom: 5px; } there was originally an image in there for the little x in the corner but iirc that broke a while ago so i deleted it. 👍 by shark bait; 1751130005; Report Thank you so much!!!🥹🥹🥹 by XxDunj4xX; 1751131087; Report Huh, it doesn’t work:( by XxDunj4xX; 1751139458; Report huhhhh that's weird ,,, did you change the color from var(--link/--header) ? by shark bait; 1751149405; Report I didn’t by XxDunj4xX; 1751173017; Report Awh man:( I just copied everything(except for the Pompompurin stuff) and yet I still didn’t get the yellow background behind the texts:( by XxDunj4xX; 1751175277; Report okayyy i see the problem in a couple lines you deleted the urls to background images but didnt delete both parentheses. go thru and delete all the unclosed parentheses (or close em) and it should work 👍 by shark bait; 1751175615; Report Alright I will! Thank you for your help🥹 by XxDunj4xX; 1751184801; Report
bedek. ☆	1750421145 its not working Report Comment images aren’t really working across the entire website rn 🥀 sorry man by shark bait; 1750457101; Report
Chloe	1750111659 Usinggg Report Comment
rabanete	1749669000 〜(￣▽￣〜) Report Comment
zyzy !! ๑ ˚ ૮₍´˶• . • ⑅ ₎ა	1748195210 usandoo :33 Report Comment
zyzy !! ๑ ˚ ૮₍´˶• . • ⑅ ₎ა	1748195189 usandoo :33 Report Comment
🍨 Jay ૮꒰˶ฅ́˘ฅ̀˶꒱ა	1748049012 Using!! Also amazing 𐔌՞⁔•͈ ·̫ •͈⁔՞𐦯 Report Comment
Cake Sword	1747947109 using Report Comment
Sofi	1747869925 using Report Comment
Sylvanian Corner	1747261282 using!! tysm! Report Comment
ri.uy19	1747223408 using Report Comment
jinsae	1747213606 using >o< Report Comment
angel ✶⋆.	1747138361 usinggggg Report Comment
angel ♱	1746791167 using!! Report Comment
s1nj3lly	1746386629 usinggg Report Comment
⌞ 💫 ᯓ ࿔ Elio .ᐟ	1746374438 Using! Report Comment