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.