Codename: Kids Next Door Layout

Tags: 2000s, codename kids next door
Description:

Here is a layout I created based on the 2002 - 2008 Cartoon Network series "Codename: Kids Next Door", filled mostly with images of Sector V (the main sector featured in the series) and The Delightful Children From Down The Lane (as TDCFDTL and as Sector Z from the 2006 special "Operation: Z.E.R.O."). Let me know if anything is broken and what needs to be fixed.
Preview:

click on the image for a larger preview
Code:

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

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-10/cur970.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/29/metal-pointer.html" target="_blank" title="Metal Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Metal Pointer" style="position:absolute; top: 0px; right: 0px;"/></a> 

<style>

.logo {

content:url("https://i.ibb.co/2vHZdx7/codename-kids-next-door-at-Duck-Duck-Go-removebg-preview.png");

}

</style>


<style>

body{

background-image: url(https://i.ibb.co/5cGCGSL/codename-kids-next-door-sector-v-at-Duck-Duck-Go.png);
background-color: white;
background-size: 850px;

}

</style>
<style>

main{

background-color: rgba(255, 255, 255, 0.7);
border: groove #990033 6px ;
color: #000000;
border-radius: 3px;
font-size: 13px;
 box-shadow: 0px 0px 9px #804000!important;
}

h4{
font-size: 16px;
 background: -webkit-linear-gradient(#ffffff, #000000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h1{
font-size: 30px!important;
 background: -webkit-linear-gradient(#ffffff, #000000);
-webkit-text-stroke: 0.8px #000000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.links{
background-image: url(https://i.ibb.co/k0RCcNc/Rainbow-Monkey-Happy-Sugar-Land-KND-Code-Module-Fandom-1.png);
background-size: 1000px;
height: 60px;
border-radius: 3px;
margin: 12px!important;
border: solid #cc0044 2px;
outline: groove #990033 3px;

}
nav .links a{
 text-shadow: 0px 0px 9px #fff2fe!important;
}

.top{

background: -webkit-linear-gradient(#cca300, #fffae6)!important;
  -webkit-background-clip: text;
border-radius: 3px;
outline: groove #806600 3px;
}

.blurbs .heading{

background: -webkit-linear-gradient(#cccccc,#000000)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
.blurbs{

border: solid #cc0044 2px;
outline: groove #990033 3px;
}

.friends{

border: solid #cc0044 2px;
outline: groove #990033 3px;
}

.friends .heading{

background: -webkit-linear-gradient(#000000,#b3b3b3)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
.contact .heading{

background: -webkit-linear-gradient(#000000,#b3b3b3)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}

.contact{
border: solid #cc0044 2px;
outline: groove #990033 3px;
}

.table-section{
border: solid #cc0044 2px;
outline: groove #990033 3px;
}

footer{
background: -webkit-linear-gradient(#cca300, #fffae6)!important;
  -webkit-background-clip: text;
color: white;
border-radius: 3px;
outline: groove #993366 3px;
}

table.comments-table{

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

.table-section{

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

.online{
content: url(https://dl.glitter-graphics.com/pub/2291/2291708xakx0kr763.png);
}

.blurbs:after{
  content: "";
  white-space: pre-wrap;
border-radius: 4px;
  display: block;
  height: 50px;
  width: px;
  background-image: url(https://dl.glitter-graphics.com/pub/658/658720wtxfy15ryl.gif);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;
}

.friends .heading:before{
content: url


}
.blurbs .heading:before{
content: url("https://i.ibb.co/k3dczHk/th-367285766-removebg-preview.png);
}
.friends:after{
  content: "";
  white-space: pre-wrap;
border-radius: 4px;
  display: block;
  height: 50px;
  width: px;
  background-image: url(https://dl.glitter-graphics.com/pub/658/658720wtxfy15ryl.gif);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;

 
}

@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); }
}
.comments-table img,
.person img{


-webkit-mask-size: 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

transform:scale(1.025,1.025);

position:relative;

top:-0.25em;

}
.general-about .profile-pic img{

-webkit-mask-image: url(https://img1.picmix.com/output/stamp/normal/9/8/1/1/531189_5e0f3.gif);

-webkit-mask-size: 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

transform:scale(1.025,1.025);

position:relative;

top:-0.25em;

}
  .profile{
        
    direction: rtl;
    
    }
    .blurbs{
    
    direction: ltr;
        
    }
    .blog-preview{
        
    direction: ltr;
        
    }
    .friends{
    
    direction: ltr;
        
    }
    .general-info{
        
    direction: ltr;
        
    }
    .contact{
        
    direction: ltr;
    
    }
    .url-info{
        
    direction: ltr;
        
    }
    .details-table{
        
    direction: ltr;
        
    }
    .profile .table-section .heading{
    
    direction: ltr;
        
    }
    .details p{

    direction: ltr;

   }
   .mood{

       direction: ltr;

   
}
.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("https://i.ibb.co/88dFMYk/th-4112908508-removebg-preview.png")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url("https://i.ibb.co/JQqcMjQ/th-3654500006-removebg-preview.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url("https://i.ibb.co/TmLCrKT/Cree-Lincoln-render-removebg-preview.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url("https://i.ibb.co/FJZTGYS/Toiletnator-Render-removebg-preview.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url("https://i.ibb.co/s36zQtL/th-2051577991-removebg-preview.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url("https://i.ibb.co/9bRmDRZ/Common-Cold-render-removebg-preview.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url("img src="https://i.ibb.co/3SsKRB3/Father-aflame-removebg-preview.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content:  url("https://i.ibb.co/w4cHsZr/Heinrich-Von-Marzipan-render-removebg-preview.png")
}

img:hover, .friends:hover{
      animation:shake 10s;
      animation-iteration-count:infinite;
filter: none;
}
@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%
   
}


<style>
.online img {
        content: url(https://dl.glitter-graphics.com/pub/2291/2291708xakx0kr763.png);
        height: 2em;
        margin-right: 7px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 2s;
    }
</style>




<style>

.icon {
content: url(https://i.ibb.co/kmdvzsd/th-2777921492-removebg-preview.png);
display: inline-block;
height: 3.5em;
width: 3.5em;
margin: 0 .05em 0 .1em;
vertical-align: -0.3em;
color: rgba(0,0,0,0);

}

<style>
.online img {
        content: url(https://dl.glitter-graphics.com/pub/2115/2115983pfseu52w1p.gif);
        height: 2em;
        margin-right: 7px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 2s;
    }
</style>

    <div class="mobileHide">

        <style>

   .mobileHide { display: inline;}

   /* Smartphone Portrait and Landscape */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){  .mobileHide { display: none;}}

</style>

<div style="">

 <div style="float:  ; &#10;&#10;max-height: 400px; &#10;&#10;position: fixed; &#10;&#10;right:1px; &#10;&#10;bottom: 9px; &#10;&#10;z-index: 600;"><img src="https://i.ibb.co/j6N4dzw/th-3925655056-removebg-preview-1.png" width="200" height="200"/>

</div> 

<div style="float:; max-height: 400px; position: fixed; right:1px; top: 9px; z-index: 600;"><img src="https://i.ibb.co/cJ2KdwN/th-4116263126-removebg-preview-1.png" width="250" height="250"/></div>

<div style="float:; max-height: 400px; position: fixed; left:1px; bottom: 9px; z-index: 600;"><img src="https://i.ibb.co/kmdvzsd/th-2777921492-removebg-preview.png" width="250" height="250"/></div>


</div></div>

 <div class="mobileHide">

        <style>

   .mobileHide { display: inline;}

   /* Smartphone Portrait and Landscape */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){  .mobileHide { display: none;}}

</style>

<div style="">

 <div style="float:  ; &#10;&#10;max-height: 400px; &#10;&#10;position: fixed; &#10;&#10;left:1px; &#10;&#10;top: 9px; &#10;&#10;z-index: 600;"><img src="https://i.ibb.co/qg246ND/th-3590481454-removebg-preview.png" width="200" height="200"/>

</div> 


</div></div>


<style>
.friends-grid::before {
	width: 1000px;
	height: 80px;
	object-fit: cover;
	margin-bottom: 10px!important;
}


.friends-grid::before{
    content: "Recently added friends (by https://spacehey.com/classroom)";
    display: flow-root;
    font-size: 30px;
    color: var(--lighter-blue);
    font-weight: 800;
    text-align: center !important;
    margin: 10px 300px 500px 0px;   
    position: relative;
  animation-fill-mode: forwards;
}
.friends {
border: none;
    overflow: hidden;
}

.friends-grid {
  position: relative;
  animation: myfirst 15s linear infinite;
  animation-fill-mode: forwards;
}
 
@keyframes myfirst {
0% {left:-1550px;}
100% {left:500px;} 
}

.friends-grid {
	display: flex;
	flex-wrap: nowrap;
}
</style>  
  


<iframe src="https://www.youtube.com/embed/y1Q3K4No?loop=1&autoplay=1&controls=0&start=0&&#x201D;title=" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="&#x201D;&#x201D;" data-ruffle-polyfilled="" width="0" height="0" frameborder="0">
</iframe>
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 2 of 2 comments ( View all | Add Comment )
*Lilette45*
1732323293
using. i love this show!
Report Comment
* clyde/ivan
1692659670
using but updating some to my liking :)
Report Comment