BUTTERS STOTCH SOUTH PARK LAYOUT!

Tags: butters, south park, myl3z

Description:

!PLS COMMENT IF U USE OR 4 BASE! Im rlly happy at how this turned out and is 2nd to last of my requests (the last 1 is kenny) Anyways this layout has the whole page floating, autoplay music, gifs + gif pfp, butters cusor, and ur friends and comments pfp float when u hover! Last note the last piece of code with the "frame" is the autoplay music, make sure to put it in another section! I hope you enjoy and if u need any help lmk! (●ˇ∀ˇ●)

Preview:

click on the image for a larger preview

Code:

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

<style>
@font-face { font-family: "South Park Font"; src: url('https://dl.dropboxusercontent.com/s/zsizn5uicxqldhn/south%20park.ttf?dl=0'); 
}'); 

}

body{
font-family: "South Park Font";
}
p{
    font-family: "South Park Font";
    color: black; 
    font-size: 100%; 
}
h1, h2, h3, h4, h5, h6 {
    font-family: "South Park Font";
    color: black;
    font-size: 120%;  
}
.profile h1 {
    font-size: 190%;
    margin: 0 0 10px 0;
}
.profile h4 {
    margin: 0;
    font-size: 135%;
}
.profile .blurbs .section h4 {
    margin: 0;
    color: rgb(0 0 0);
}
.count {
    color:#153e2a!important;
}

/*471- [font color]: the link-text up to the friend photo  */
.profile .friends .person p{
 color: #93c2a9!important;

}
  body {
  background: url(https://cdn.discordapp.com/attachments/1067370677960704013/1125530306645086268/AfHKeEL.jpg) no-repeat fixed; background-size:cover;}
}
nav .links, footer .links {
    margin: 0;
    list-style: none;
    background-image:
}
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url(https://cdn.discordapp.com/attachments/1067370677960704013/1125532443412271286/WYWCUsE.gif);
	background-size: cover;
	background-repeat: no-repeat;
        background-position:center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} 
}

 nav .top {
        background-image: url('https://media.giphy.com/media/eM9cU4ne03rkNJuvaG/giphy.gif');
        height: 200px;
        background-size: 800px;
        background-position: center;
        border-radius: 5px;
        position: relative;
        border: 5px dashed #f2f426;
        border-radius: 20px;
        box-shadow: 0px 0px 10px #3c2f2b;
        display: block;
        margin-bottom: 3px


}
.profile {
        background-color: #fff996;
        background-size: 200px;
        position: relative;
        border: 4.5px dashed #153e2a;
        border-radius: 20px;
        box-shadow: 0px 0px 10px #f2f426;
        display: block;
        background-repeat: no-repeat;
        no-repeat fixed;

}

 main {
        background-color: transparent;
        color: ;
}

    .online {
        color: #58c3a8;
        font-family: "South Park Font";
        font-size: 106%
}
    .online img {
        content: url(https://media.giphy.com/media/1m4U6cJlC5wpx1r9IV/giphy.gif);
        height: 50px;
    animation-name: shake;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
}

    .icon, .award img {
        content: url(https://cdn.discordapp.com/attachments/1067370677960704013/1125532443877847080/Ciy2cGz.png);
        display: inline-block;
        height: 2.0em;
        width: 2.4em;
        margin: 0.05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);

}
:root {
    --logo-blue: ;
    --darker-blue: ;
    --lighter-blue: '';
    --even-lighter-blue: #58c3a8!important;
    --lightest-blue: #99d7b6!important;
    --dark-orange: ;
    --light-orange: #58c3a8!important;
    --even-lighter-orange: #99d7b6!important;
    --green: pink;
    --purple: red
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions, .blurbs {
    width: 100%;
    border: 4.5px dashed #88d4e2;
    margin: 10px 0;
    border-radius: 10px; 
}
  .comments-table{
    border: 4.5px dashed #153e2a!Important;
}

  .comment-replies{
    border: 4.5px dashed #153e2a!Important;

}
/* DELETE THIS CODE IF U WANT NO GIF PFP */
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://cdn.discordapp.com/attachments/1067370677960704013/1125532442913165442/gwaNCPM.gif"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 
}

.profile .contact .f-row {
    margin: 7px;
    font-weight: bold;
    font-size: 10px;
}

a {
    color: black;
    text-decoration: none;
    font-family: "South Park Font"!important;
    font-size: 90%;
}

nav .links a {
    text-decoration: none;
    color: black;
    font-family: "South Park Font"!important;
    text-shadow: 0 0 0px ;
    font-size: 0.98em;
    font-size: 11px;

}
.links {
background: transparent !important;
background-position: center center !important;
background-color: transparent !important;
no-repeat fixed !important; 
background-size: 890px !important;
}
.heading {
background-image: url('https://cdn.discordapp.com/attachments/1067370677960704013/1125530306351468544/LhCrvfp.jpg') !important;
background-color: transparent !important;
no-repeat fixed !important; 
border-radius: 5px;
background-size: 300px !important;
background-position: bottom;

}
.blurbs:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 200px;
  background-image: url("https://media.giphy.com/media/l0HlECg7kCz0xb85O/giphy.gif");
  background-repeat: no-repeat;
  background-position-y: center;
  background-size: 500px;
  border-radius: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.col.left:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 300px;
  background-image: url("https://media.giphy.com/media/0RC8qB4P6c4zNuXpuj/giphy.gif");
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: center;
  background-size: 500px;
  border-radius: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
     border: dashed;
   border-color: #38d09e;
   border-width: 4px;
}
.col.right:after{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 95px;
  background-image: url(https://media.giphy.com/media/Tf6GJEGZ0mGHrmbG1e/giphy.gif);
  background-repeat: no-repeat
  background-position: center;
  background-size: 91px;
  margin-bottom: 0px;
  margin-top: 0px;
}

footer {
   background-image: url(https://media.giphy.com/media/U8dNm9hB1nrQ3IY4gx/giphy.gif);
   border: dashed;
   border-color: #dac5ae;
   border-width: 6px;
    height: 250px;
    background-position: center;
    background-size: 1000px;

}

.url-info{display:none !important;
}
/* BANNER AT TOP */
main:before {
height: 100px;
display: block;
content: "";
background-image: url(https://media.giphy.com/media/p5Qqm0QnOt0mS8keMK/giphy.gif);
background-position: center center;
background-size: 120px;
background-color: transparent;
margin-top: 0px;
margin-bottom: 5px;
 background-repeat: no-repeat
no-repeat fixed

}
.profile .url-info :before{
   content: "";
  white-space: pre-wrap;
  display: block;
  height: 260px;
  background-image: url("");
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 500px;
  border: 5px dashed rgb(255 174 107);
  border-radius: 20px;
   box-shadow: 0px 0px 10px #0f0;
  margin-top: 10px;
  margin-bottom: 5px;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon), .profile .friends .person img:not(.icon){
  border-radius: 180px;
}
.comments-table td:first-child img:not(.icon):hover {
  animation: float 0.3s infinite linear;
}
.person img:not(.icon):hover {
  animation: float 0.3s infinite linear;
}


.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);

}
@keyframes spin{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
    @keyframes shake {
0% {
transform:translate(0px,0.3px) rotate(0.3deg);
}
8% {
    transform:translate(0px,0.5px) rotate(-0.5deg);
}

16% {
    transform:translate(0px,1px) rotate(1deg);
}

24% {
    transform:translate(0px,1.5px) rotate(-1.5deg);
}

32% {
    transform:translate(0px,2px) rotate(2deg);
}

40% {
    transform:translate(0px,2.5px) rotate(-2.5deg);
}

48% {
    transform:translate(0px,3px) rotate(3deg);
}

56% {
    transform:translate(0px,3.5px) rotate(-3.5deg);
}

64% {
    transform:translate(0px,3px) rotate(3deg);
}

72% {
    transform:translate(0px,2.5px) rotate(-2.5deg);
}

80% {
    transform:translate(0px,2px) rotate(2deg);
}

88% {
    transform:translate(0px,1.5px) rotate(-1.5deg);
}

96% {
    transform:translate(0px,0.5px) rotate(0.5deg);
}

100% {
    transform:translate(0px,0.3px) rotate(-0.3deg);
}
<style>A:hover{cursor: url("https://downloads.totallyfreecursors.com/cursor_files/butters.cur"), url("https://downloads.totallyfreecursors.com/thumbnails/butters.gif"), auto;}</style><style>HTML,BODY{cursor: url("https://downloads.totallyfreecursors.com/cursor_files/butters.cur"), url("https://downloads.totallyfreecursors.com/thumbnails/butters.gif"), auto;}</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 16 of 16 comments ( View all | Add Comment )

iawnmower	1732257792 Using omg Report Comment
aspen	1718762366 using the font code Report Comment
Fulufulu	1711622264 Использую Report Comment
caro	1707618668 howdy Report Comment
Fizzy!!	1706915750 USING! Report Comment
mad ^^	1705195059 using!! Report Comment
Taco	1703411165 Using :D Report Comment
Eppy boi! :3 🎤 ☆ミ	1701067958 using as base Report Comment Their test acc by :3; 1701068345; Report
KAILER	1700333115 USEIMG Report Comment
KAILER	1700333109 USEIMG Report Comment
mei	1693362855 usw Report Comment
Kaden	1693153931 usinggggggg!!!1!!11 Report Comment
robin !! ★	1690761165 using1!!1!1 Report Comment
Ann♡	1684889772 im definitely gonna use this!! adorable<33 Report Comment
Charlie	1681337386 OMG THIS IS SO CUTE!!!!!!!!!! Report Comment TY!! by Myles; 1681339797; Report TYSM BTW FOR MAKING THIS LAYOUT!! IM SURE U HAD A LOT OF REQUESTS SO I RLLY APPRECIATE U DOING A BUTTERS LAYOUT :33 by Charlie; 1681343532; Report YWW AND TY FOR REQUESTING <3 by Myles; 1681423536; Report