keroppi layout :3

Tags: green, pastel, keroppi, sanrio, cute

Description:

first layout im ever uploading .... try not to think about how much of a mess the css is.

add, remove, or generally change anything you want, go absolutely wild dude. note that it does have autoplay music written into it now.

credit is appreciated but not necessary :3.

i'd rather you didn't use this as a base or template though?? as in i'd rather you didn't edit this and upload it as your own. if that makes sense?? does that make sense

probably not entirely mobile friendly, but works well enough on my own phone.

you might have to adjust the size of the box around your pfp and status to make it fit. i uploaded this with it sized to mine.

do not repost this or i will break into your house and eat your bones. thanks.

edit: i'm not fixing this anymore, if something breaks again, figure it out yourself. peace out.

edit 2: like just after i uploaded all my images to imgur, the site decided to shit its pants. i quite literally give up. rip in peace.

Preview:

click on the image for a larger preview

Code:

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

 <style>
* { 
 cursor: url(https://i.imgur.com/eDPxvvk.png), auto !important; 
 font-family: Courier New;
}

:root {
  --text: rgb(27, 28, 26);  
  --links: rgb(145,145,145);
  --shadow: rgb(163, 246, 178);
  --headers: rgb(207,249,210);
  --borders: rgba(0,0,0,.2);
}

body {
 margin:0;
 background-image: url(https://i.imgur.com/lczRGU9.jpg);
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-size: cover;
 font-weight: bold;
 }
p {
 color: var(--text);
 font-weight: bold;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(97%) sepia(3%) saturate(2543%) hue-rotate(61deg) brightness(94%) contrast(108%) !important; 
}
button {
  background: white;
  color: var(--text);
  font-weight: bold;
  border: 1px solid black;
}
button:hover {
  border: solid 1px var(--headers);
  transition: 0.2s;
}
input {
  color: var(--text);
  font-weight: bold;
  border: black solid 1px;
}
input:hover {
  border: solid 1px var(--headers);
  transition: 0.2s;
}
nav .top , nav .links{
  background: transparent;
  text-align: center;
}
nav .links li:not(:last-child)::after {
  content: " 🐸";
  color: var(--text);
}
nav .links .active img{
content: url(https://i.imgur.com/GOmHaRo.gif);
}
main {
 background: white !important;
 border: black 1px solid;
}
.col.left h1:before{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 100px;
  background-image: url(https://external-media.spacehey.net/media/s61-bmhfyfocRxMQ40aHkNtXAFVM81moKkrj0bsbA8xE=/https://i.imgur.com/YWUoz8j.png);
  background-repeat: no-repeat;
  background-size: 125px;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 120px;
  background-image: url(https://i.imgur.com/zAN900c.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 220px;
}
.blurbs .inner{
  text-align: center !important;
}
h1 {
  color: rgb(145,145,145);
}
.profile-pic img {
  border: solid black 1px;
  border-radius: 180px;
}
.profile-pic img:hover{
  animation: rotation 0.3s infinite linear;
  /*makes your pfp spin when you hover. put your avatar in the blender, for absolutely no cost !!*/
}
.online{
  content: url(https://i.imgur.com/oHBt3Mc.gif);
} 
.mood {
  padding-top: 3px;
}
.mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 50px;
  background-image: url(https://i.imgur.com/ZNw62yk.gif);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 300px;
}
.url-info {
  display: none;
}
.general-about, .profile .blurbs .section, .friends, 
.profile .contact, .profile .table-section {
  border: var(--borders) solid 1px;
  box-shadow: 4px 4px 0px var(--shadow);
}
nav {
  background: white !important;
  color: var(--links);
  border: black 1px solid;
  margin-bottom: 5px;
}
footer {
  background: white !important;
  border: black 1px solid;
}
.comments-table, .comment-replies {
  border: none;
}
/*may need to edit to fit your statuses*/
.general-about {
  padding-bottom: 25px;
}
.profile-info, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {
  background-color: transparent;
  border: none;
}
#comments {
  height: 300px;
  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 {
  color: var(--links);
  text-shadow: none;
}
a:hover, nav .links 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(--headers);
  box-shadow: none;
  border: none;
  text-decoration: none;
  transition: 0.2s;
}
.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
     if you want you can divide this up and make each one different. */
content: url(https://i.imgur.com/ioQZlDA.gif);
}
.profile .table-section .details-table td {
  background-color: transparent;
}
.profile .blurbs .heading {
  font-size: 15px;
  font-weight: bolder;
  background: transparent;
  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);
}
@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); }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</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 150 comments ( View all | Add Comment )

Vlada˙ . ꒷ 🍰 . 𖦹˙—	1743696351 usingg Report Comment
Kaizita^^	1741954051 voce poderia fazer um da my melody:333 Report Comment
Usagi	1739895971 Using Report Comment
★╯\|S4m !\| ╰★	1739733693 usinn Report Comment
Goob	1739703823 using Report Comment
sveny	1739399837 Using Report Comment
bl00dyqlan	1738958143 could u do a badtz maru layout?? it's ok if not Report Comment maybe ! i’ve been thinking about making layouts again, but layout posting has been down for a while now, as far as i know. coulda been put back up and i didn’t notice . if i do anything i’ll let you know though ^_^ by boyfailure; 1738973458; Report
Strawberry_Shorter_Cake	1738881000 Using!!!<3 Report Comment
xXCoolBonezXx	1738860064 using Report Comment
Éden!!	1738699637 using!! :D Report Comment
Sparrow	1738643813 using :D Report Comment
star🧚🏼‍♀️	1738613227 using <3 Report Comment
kayigi	1738549760 using!! ^^ Report Comment
jaeiie	1738217934 using!! <3 Report Comment
Min	1737644954 Using Report Comment
Lockjawdzz	1737289343 Using♡ Report Comment
♡ M4eve ♡	1736190557 Using <3 Report Comment
vn!llaa	1734135241 Using :3 Report Comment
Ina<3	1733758803 using Report Comment
Hajiii >_^	1732954268 using ^_^ Report Comment