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

Cosmo☆	1731529916 using Report Comment
Cosmo☆	1731529914 using Report Comment
ellywelly23	1731333959 using Report Comment
Pumpkinkiller01	1729594963 using Report Comment
Kleide (autoplay)	1728440550 using ^^ Report Comment
ruby	1727391219 probs using Report Comment
ashie ^-^	1726724674 using! Report Comment
⌗ ﹒◖Khoi!! ✿	1719642031 Using <3 Report Comment
skibidigoop	1719641624 Using :3 Report Comment
𝙨𝙖𝙡..	1717030860 usinggg Report Comment
Kaliiquis	1716136574 Using <3 Report Comment
Xaly.na_	1715890503 Using! Report Comment
AZ26Hunter	1709000645 using Report Comment
୨ ۪☁️ ֢﹗Chuu ۪ あ ׁ ₊	1708978072 No lo e usado, PERO QIE BELLEZA ><!! Report Comment
denjistan	1708929840 xie xie Report Comment
Feiren	1707700642 using! Report Comment
Xx_Sweetie_Pup_xX	1706639643 usin! :3 Report Comment
Thomas!! (Clayton's Versión)	1706359095 USING!!! Report Comment
paupau	1706306460 using! ^^ Report Comment
coffee✨	1706211026 thank you so much using!!! Report Comment