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 boyfailure (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 474 comments ( View all | Add Comment )

lily! ☆	1744647563 Using!! :)) Report Comment
arum	1744519677 using, thankyou! Report Comment
Franz	1744438567 using! Report Comment
jaz	1744385781 using! Report Comment
kina ★!	1744373263 using! Report Comment
— Maters. ✰	1744344358 Usando🙏🙏🙏 Report Comment
☆JushinaMomoᵇʳ	1743894351 Can you make a chococat one?? Report Comment
☆JushinaMomoᵇʳ	1743894292 Using <3 Report Comment
Isa 💕	1743825046 usandoo Report Comment
Y𝒖ri's mʋffin ⋆౨ৎ˚⟡˖ ࣪	1743816280 USANDOOOO Report Comment
𝖘𝖒𝖔𝖑𝖈𝖔𝖔𝖐𝖎ɛɛɛ	1743568114 not using atm but AAAAAAAAAAAAAAAA THIS IS SO CUTE EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE Report Comment
𐔌 ⊹₊🏵️ kazuyuki 🍀 ݁˖ ꒱	1743443594 ok so; currently using this and having an issue where the boxes / windows for text don't show up at all- I don't think I touched or remove anything, but does anyone know what part of the code they would be in? Report Comment okayy so i have played around with the code on your page, and stuck this layout on my alt just to see if it was a spacehey issue, and i have . absolutely no idea why its doing that. the specific part that controls the headers is .profile .blurbs .section h4, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading though . i dunno man by boyfailure; 1743460003; Report thats alright; thank you for attempting to find it anyways, I'll try and see what the issue is or find it out and I'll update you if I do find out by 𐔌 ⊹₊🏵️ kazuyuki 🍀 ݁˖ ꒱; 1743467226; Report from what i can tell, it's just not recognizing the :root? it's saying stuff like --text is undefined, which it is. not. which is also why borders aren't showing up. i have absolutely no clue why it's doing that, as there is absolutely nothing to disrupt the :root. i guess you Could replace all the variables manually, but that would be a pain in the Ass. i also tried everything i could think of; turned off every style sheet, deleted every image, removed any line of code i thought might be off. i am stumped. sorry my layout is being evil by boyfailure; 1743468269; Report its ok LOLL 3 I understand yea, it happens sometimes- I have a few friends who might be better at this stuff than me so I'm running it by them, but I am thinking I'll probably have to go in manually and replace them, which could suck, but it shouldn't take like forever. if nothing's happening at work as well then I have a fast computer to use so it should be ok; thank you again tho for trying to help by 𐔌 ⊹₊🏵️ kazuyuki 🍀 ݁˖ ꒱; 1743468709; Report ok easier question LOL where is the little banana icon next to the profile pic located? can't find it for some reason by 𐔌 ⊹₊🏵️ kazuyuki 🍀 ݁˖ ꒱; 1743527941; Report I did just end up replacing all the variables manually and it wasn't too bad tbh [I just kept the things I wanted to paste on a seperate pastebin and did ctrl+f to find the --headers and etc that needed to be replaced with rgb(145,145,145); basically, and that solved it] but I'm not sure what went wrong in the first place still, but at least theres that solution by 𐔌 ⊹₊🏵️ kazuyuki 🍀 ݁˖ ꒱; 1743530736; Report well ! im glad it worked out somehow in the end. really really weird that happened in the first place though. but the little banana online thing is .online ^_^ i really really should've labeled what everything was with a comment but alas . by boyfailure; 1743541439; Report it is odd, yea, but at least its solved- and ty for pointing me to the little banana thing, I'll go off and do smth with that once I get the chance. thanks again for the help by 𐔌 ⊹₊🏵️ kazuyuki 🍀 ݁˖ ꒱; 1743547674; Report no problem at all ! :) by boyfailure; 1743553250; Report
𐔌 ⊹₊🏵️ kazuyuki 🍀 ݁˖ ꒱	1743428172 using i love pompompurin chat Report Comment
⺀ dexter !	1743359456 usin! :3 Report Comment
∘˚ berry🍓 ! 𐂯	1743357118 OMG IM USING AND IM STICKING TO IT THIS TIME I KEEP CHANGING MY PROFILE LOL Report Comment
duskmoon	1743254302 usingg Report Comment
grottymonday	1743197671 using Report Comment
Eve !	1743126896 using Report Comment
awie.x0x0	1742965888 Using Report Comment
al	1742735497 using, thx Report Comment