Kyle From SouthPark Layout

Tags: southpark/kyle

Description:

This is Kyle form South Park Layout if you use please comment saying "using" this is own by Ocarina Layouts

Preview:

click on the image for a larger preview

Code:

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

   <style>
main:before {
width: 100%;
height: 250px;
display: block;
margin-top: -6px !important;
content: "";
background-image: url('https://i.imgur.com/fYA5ljV.png');
background-position: top center;
background-size: cover;
border-radius: 0 0 0px 0px !important;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
</style>



<style>
.Ocarina Layouts !! { BACKGROUND P R O P E R T I E S }
body {
background:url(https://i.imgur.com/4hKQHLf.png) #5bbe4e;
background-position:bottom right;
background-attachment:fixed;
background-repeat:no-repeat;
</style>

<style>
:root{--logo-blue: limegreen; --darker-blue:limegreen; --lighter-blue: limegreen; --even-lighter-blue: white; --lightest-blue: white; --dark-orange: gray; --light-black: white; --even-lighter-gray:white; green: gray}

h1, h4{color:white}

.online img{content: ; animation: none;}
.online{color: limegreen}

.profile .contact, .blurbs, .friends{background-color:white; border: none}
.profile .contact .heading, .profile .table-section .heading{background-color: limegreen}

.profile .url-info{background-color: white}
</style>

<a href="https://spacehey.com/ocarina" target="_blank"><div style="position:fixed; top:0; left: 0; z-index: 9; width: 160px; height: 82px; filter: hue-rotate() saturate();"><img src="https://i.imgur.com/70zgNDY.png" alt=""/></div></a>
<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.imgur.com/Ww2mfKF.jpg');
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;} } 
</style>


<style>
    .profile{

    display:flex;
    flex-direction: column;
    overflow-y: auto;

}
    .profile .left{width: 100% !important;}
    .profile-pic{width: 100% !important;}
    .general-about{text-align: center !important;}
     h1{text-align: center !important;}
</style>



<style>
    .comments-table td{
        
    background-color: COLOR !important;
    background-image: url('https://i.imgur.com/4hKQHLf.png') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
        
    }
</style>


<style>
.profile {
  background-color: orange;
}
</style>





<style>
html:before , body:before{
  animation: grain 8s steps(10) infinite;
  background-image: url
  content: "";
  height: 300%;
  left: -50%;
  opacity:.1;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: consolas;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}


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

.col, main, footer, nav::before, nav .links, nav .top {
animation: float 3s;
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);
}
</style>

<style>
img:hover , .url-info:hover , .online:hover {
  animation: shake 1s;
  animation-iteration-count: infinite;
}

@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); }
}
</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 7 of 7 comments ( View all | Add Comment )

BootyBlasterAli	1752535469 using Report Comment
lilli 🖤’s patrick stump	1741130054 using Report Comment
Alina	1726436947 usingg Report Comment
Con	1705194519 using Report Comment
pizza	1689843749 using. Report Comment
🪨🌿 : TOPH 。^ ^	1684527924 USING!! Report Comment
queerpark	1680292885 oo using ! Report Comment