kyle broflovski layout

Tags: south park, kyle broflovski, simple, layout, computer

Description:

this is a regular layout but i tried to make it south park coded
this layout inculdes

custom logo custom online icon no contact icons (i left the base for contact icons incase you want to change the icons) old scrollbar code custom cursor autoplay music (dreidel song) it can float and i tried to make it computer kinda thats all i can remember rn lol

Preview:

click on the image for a larger preview

Code:

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

<iframe width="0" height="0" src="https://www.youtube.com/embed/ZEK0c6Bae9A/?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<style>
body {
    background-image: url("https://i.pinimg.com/564x/b9/4d/fb/b94dfb4d1c8ad196591b7532565f8742.jpg");
  background-attachment: fixed ;
  background-repeat: repeat;
  background-size: 100%;
  background-position: center;
}
.top, .links, .heading, footer, button {
   background-color:#55C623!important;

<style>

<div class="star">
<style>
nav .links{
    text-align: center;
}
nav .links a{text-shadow:none;
}
nav .links a{text-shadow:none;}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: "★";
    color: white;
    font-weight: bold;

</style>

<style>.contact .inner a img {
    font-size: 0;
    }
    .contact .inner a img:before {
    font-size: 1em;
    display: block
   }
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("")
}
</style>
<style>
.online{
content: url(https://i.ibb.co/4F9kkjP/2021040pcxapz9pmh.gif);
}
</style>

<style>
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

}
</style>
<style>
}
h4 {
   color: #FD5F13!important;
}
.contact, .url-info, .table-section, .profile-info {
   border-color: #1c832e!important;
}
/*comment section color*/
td {
   background-color: white!important;
border: 1px solid white!important;   
}
input, button:not(.logout-btn) {
   border: 1px groove #219835!important;
}
.row.profile {
   border: 1px dashed #000000!important;
}
.logo-fallback {
   height: 38px !important;
}

</style>

<style>
    .top{
        
    color: black;
        
    }    
    main{

    color: black!important;
        
    }
    footer{
        
    color: black;
        
    }
</style>

<style>
   :root {
--logo-blue:white;
--darker-blue: #186e27;
--lighter-blue:black;
--even-lighter-blue: black;
--lightest-blue:black;
--dark-orange: #FD5F13;
--light-orange:#FD5F13;
--even-lighter-orange: white;
--green:#186e27;
}
</style>



<style>



h1{

  animation: type 3s steps(27);

  color: black;

  font-size: 10px;

  font-family: courier;

  white-space: nowrap;

  overflow: hidden;

 }

@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}

@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}

body::before {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

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>
<style>
    table.details-table{
        
border: 1px solid white!important;   
        
    }
    .profile .details-table td{

border: 1px solid white!important;   

    }
</style>
<style>
    main{
     
    background-color: white!important;
   
        
    }
</style>



<style>
    table.details-table{
        
    background-color: #219835!important;
 
        
    }
    .profile .details-table td{
        
    background-color: #55C623!important;
    
    }
</style>

<style>
    table.details-table{
        
border: 1px #FD5F13!important;   
        
    }
    .profile .details-table td{

border: 1px solid white!important;   

    }
</style>

<style>
a:hover {

background: url(https://th.bing.com/th/id/R.19399a01abda2bdecf59648b78573d02?rik=kfuGCjqq8z0gpg&pid=ImgRaw&r=0);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

</style>
<style>

img:hover , contact-icon: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>
<style>
@import url('https://fonts.cdnfonts.com/css/microsoft-sans-serif');
body 
{
    font-family: 'Microsoft Sans Serif', sans-serif;     
    -webkit-font-smoothing: none !important;                               
}
</style>
<style>

@keyframes spin{

  from{ transform:rotate(0deg); }

  to{ transform:rotate(0deg); }

}

.general-about .profile-pic img{

  border-radius: 50%;

  animation: spin 7s infinite linear;

}

</style>
<style>
.profile .url-info {
    display: none;
}
</style>
<style>
::-webkit-scrollbar {
width: 16px
}

::-webkit-scrollbar:horizontal {
height: 17px
}

::-webkit-scrollbar-corner {
background: #eee
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
}

::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}

::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}

::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}

::-webkit-scrollbar-button:vertical {
height: 17px
}

::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

</style>
<style>
  
  .logo {
  
  content:url("https://media.discordapp.net/attachments/1083062800752054305/1083620321367687278/SouthPkLogo.png")
  
  }
  
</style>
<style>* {cursor: url(https://cur.cursors-4u.net/toons/too-5/too498.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2008/12/07/south-park-kyle-broflovski-3.html" target="_blank" title="South Park - Kyle Broflovski"><img src="https://cur.cursors-4u.net/cursor.png" alt="South Park - Kyle Broflovski" style="position:absolute; top: 0px; right: 0px;"/></a>

replace this text w your bio

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

Scene kyle broflovski	1769947253 using TwT Report Comment
˙{L0C4L-M34T-H34D}˙	1766631274 using the online icon! ^^ Report Comment
mylobys3a	1740726638 using Report Comment
JACKOBS	1738238048 using! Report Comment
DungeonsAndFAGGOTS	1735016262 Using>_< Report Comment
Thhathho	1733866108 usando Report Comment
nyla	1728253038 using!!! Report Comment
ecosfolio	1715694936 using!! Report Comment
Melz	1696631914 usingggg Report Comment
lya☥	1690315153 Whats the command for the computer effect?? Mien disappeared and i cant tell which one it isss🙏🏻 Report Comment its the code after h1 with body before!! by finn; 1690500113; Report THANK U SO MUCH OMGG🙏🏻🙏🏻 by lya☥; 1690500262; Report