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

☆°𝄞🎧𝄞!Akira!𝄞🎧𝄞°｡☆	1737832187 Using it! Report Comment
୧ ‧₊˚ą℘℘Ɩɛ🍮 ⋅ ☆	1737727208 Using!!:3 Report Comment
Chris	1737692976 Using add me Report Comment
Emma	1737567848 Usingg!! :D Report Comment
B_vm3vv	1737511920 usingg Report Comment
R3S3NT1D0>_<	1737504847 USINGG <⁠(⁠￣⁠︶⁠￣⁠)⁠↗ Report Comment
Riv!𝜗𝜚˚⋆	1737486066 USING Report Comment
Beanieee:3	1737428603 using this!! tysm<3 Report Comment
☆ 𝓐 !! 𝜗𝜚	1737339725 USING! Report Comment
crunchycougher	1737037600 using thisss bcz its sooo cute >-< Report Comment
Veroo !!	1736909332 This layout is absolutely adorable but this code looks so confusing to me, i've been trying to select only the top right pompompurins code on top of the edit profile thingy to add to my profile for a while now, but it doesn't seem to work T__T If it isn't to much trouble, could u help me out? Idk what to copy and paste to just get that part... Report Comment
KiiKii	1736774064 using~ thank you ^^~ Report Comment
25_tams_22	1736724770 Using!! it is so pretty Report Comment
— 𝓑ibianne! >_<	1736461133 I will use! Report Comment
gigi	1736398651 using Report Comment
Valeri	1736319210 Using!!!!! ^_^ Report Comment
Dollyuhh	1736291706 Using Report Comment
Dollyuhh	1736291705 Using Report Comment
Dollyuhh	1736291704 Using Report Comment
Dollyuhh	1736291703 Using Report Comment