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 20 of 21 comments ( View all | Add Comment )

carter	1744170753 using!! Report Comment
carter	1744170751 using!! Report Comment
𓏵 ⋮ KENNY OR BUTTERS ₊ ⊹	1739579808 using!!! Report Comment
ChaseBurger	1732864590 using! Report Comment
Finn!	1732594874 using <33 Report Comment
iawnmower	1732257792 Using omg Report Comment
aspen	1718762366 using the font code Report Comment
Fulufulu	1711622264 Использую Report Comment
Caroline	1707618668 howdy Report Comment
Fizzy!!	1706915750 USING! Report Comment
mad ^^	1705195059 using!! Report Comment
Mayonnaise	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
Gaige !! ★	1690761165 using1!!1!1 Report Comment
Ann♡	1684889772 im definitely gonna use this!! adorable<33 Report Comment