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 118 comments ( View all | Add 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
nazuna :3	1706063850 using!!! :33 Report Comment
ximena_bg21	1705738663 USANDO :D Report Comment
wes	1703422532 using :3 Report Comment
Nyan	1701532311 thank you for appreciating keroppi too Report Comment
burns X3	1696725895 X3333 Report Comment
Larissa	1696577807 using!tyy Report Comment
Anthony	1693739340 aah its so cuuteee Report Comment
PERI	1692212965 using Report Comment
PERI	1692212965 using Report Comment
kosarii	1690373949 Usando Report Comment
Volcarona	1690237913 I’ve been using a billion different layouts but I like this one a lot,,, Report Comment
Yoons	1689923045 Using~:) Report Comment