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

tobias (´꒳`)♡	1701546733 USING !! Report Comment
ciroroo	1701476062 Using :33 Report Comment
van¡¡a	1701207501 usando!! Report Comment
AUGZ	1700856353 Using!! Report Comment
DUTCH	1700793620 using ! Report Comment
kimzzZ	1700439813 using! Report Comment
harry	1700062687 using Report Comment
Jaune	1699993110 usinggg Report Comment
★𝘥𝘶𝘤𝘬𝘪𝘦_𝘢𝘮𝘢★	1699939275 using!! ^w^ Report Comment
K3I ☆	1699783124 usinggg!! :3 Report Comment
BATGummi	1699580470 ¡Lo estoy usando! <3 Report Comment
Deimos	1699550714 using!! :3c Report Comment
takeo	1699463798 using!! Report Comment
eix	1699432247 USSINGGGG :33!!!!!!!!!!! Report Comment
ILUVN0C0	1698902720 using >;3 Report Comment
xavier.	1698744842 using! Report Comment
CHOMMY!	1698668741 USING Report Comment
cloudyskysparkles	1698523121 using Report Comment
specimen 3 ★	1698435384 using!!! ^__^ Report Comment
xavier.	1698426567 using! Report Comment