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 496 comments ( View all | Add 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
⌞ 💫 ᯓ ࿔ Elio .ᐟ	1746374438 Using! Report Comment
⌞ 💫 ᯓ ࿔ Elio .ᐟ	1746374438 Using! Report Comment
⌞ 💫 ᯓ ࿔ Elio .ᐟ	1746374438 Using! Report Comment
⌞ 💫 ᯓ ࿔ Elio .ᐟ	1746374433 Using! Report Comment
jaeulfy ₊˚⊹ ᰔ	1746348006 using!! Report Comment
Ellie!	1746305015 usinggg Report Comment
aiko .ᐟ	1745753546 using Report Comment
˖˙✿ amendoim ! 🥜꒱	1745720496 Usando! Report Comment