The Buzz on Maggie Layout

Tags: 2000s, 2005, 2006, disney, mid 2000s, skye sweetnam, the buzz on maggie
Description:

This layout is based on the obscure and short lived mid 2000s Disney Channel cartoon "The Buzz on Maggie", which ran from June 17th, 2005 - May 27th, 2006. This layout features the theme song "Just The Way I Am" by Skye Sweetnam. The series is based on a 13 year old female fly named Maggie Pesky and her family, plus her best friend Rayna Cartflight. Let me know if anything is broken and if I need to fix anything.
Preview:

click on the image for a larger preview
Code:

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

<style> 

body{

background-image: url(https://i.ibb.co/m8YD5Xc/orange-star-background-at-Duck-Duck-Go.png);
background-color: white;
background-size: 380px;

}

main{

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

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

.links{
background-image: url(https://i.ibb.co/dWyTkvS/green-swirl-background-at-Duck-Duck-Go.png);
background-size: 300px;
height: 64px;
border-radius: 3px;
margin: 12px!important;
border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;

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

.top{

background: -webkit-linear-gradient(#ffcc99, #cc6600)!important;
  -webkit-background-clip: text;
border-radius: 3px;
outline: groove #ff309b 3px;
}
.blurbs .heading{

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

border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;
}

.friends{

border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;
}

.friends .heading{

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

background: -webkit-linear-gradient(#faf2f6,#fffcfe)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
.col.left:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 34px;
  width: px;
  background-image: url(https://dl.glitter-graphics.com/pub/1030/1030417u2wzjbw63c.gif);
  background-repeat: no-repeat;
  background-size: 300px;
  background-position-x: center;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
border-radius: 3px;
  display: block;
  height: 130px;
  width: px;
  background-image: url(https://i.ibb.co/qnxyZmL/The-Buzz-on-Maggie-The-Buzz-on-Maggie-Wiki-Fandom-1.png);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;

}
.contact{
border: solid # #cc3399 2px;
outline: groove #8f246b 3px;
}

.table-section{
border: solid #ff9933 2px;
outline: groove #cc6600 3px;
}
.table-section .heading{
background: -webkit-linear-gradient(#ffeb99,#cca300)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
:root {
    --logo-blue: none; 
    --darker-blue: #ff661a; 
    --lighter-blue: #ffe066; 
    --even-lighter-blue: #ffe680;
    --lightest-blue: #ffeb99;
    --dark-orange: #990073; 
    --light-orange: #ffaa80; 
    --even-lighter-orange: none; 
    --green: white;
}
footer{
background: -webkit-linear-gradient(#ffcc99, #cc6600)!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/121/121901w06wmrds3w.gif);
}

.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/619/619380a8c7yo5al4.gif);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;
}
.friends .heading:before{
content: url


}
.blurbs .heading:before{
content: url(https://imgbb.com/"><img src="https://i.ibb.co/7jqhSny/Main-qimg-6fb7d40c8912de0d874007e35f81f46e-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/1264/1264441lnbyh51sg0.gif);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;

 
}

  .logo {
  
  content:url("https://i.ibb.co/yRzT2f5/z3-Tx-Dlz-ECj-Q6-D4-Zw-V2-Lmno4-Ulds-jpg-JPEG-Image-600-900-pixels-Scaled-68-removebg-preview.png")
  
  }


@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{

filter: grayscale(40%) blur(1px);
-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;

}
.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://pixelbank.neocities.org/decome/hearts/2e2814da.gif")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url("https://i.ibb.co/yyq27XQ/Maggie-Pesky-The-Buzz-on-Maggie-Wiki-Fandom-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/LpyF6qp/Aldrin-Pesky-The-Buzz-on-Maggie-Wiki-Fandom-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/wgWzZ9r/Rayna-Cartflight-The-Buzz-on-Maggie-Wiki-Fandom-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/q5PCsz2/Pupert-Pesky-The-Buzz-on-Maggie-Wiki-Fandom-removebg-preview-1.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url("https://i.ibb.co/NpR8HMS/Dawn-Swatworthy-The-Buzz-on-Maggie-Wiki-Fandom-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/hKhhtqN/Maria-Monarch-The-Buzz-on-Maggie-Wiki-Fandom-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/ZM43B3M/Bella-Pesky-The-Buzz-on-Maggie-Wiki-Fandom-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/121/121901w06wmrds3w.gif);
        height: 2em;
        margin-right: 7px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 2s;
    }
</style>




<style>

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

}

<style>
.online img {
        content: url(https://img1.picmix.com/output/stamp/normal/9/8/1/1/531189_5e0f3.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/FXcDrqP/The-Buzz-on-Maggie-The-Buzz-on-Maggie-Wiki-Fandom.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/wgWzZ9r/Rayna-Cartflight-The-Buzz-on-Maggie-Wiki-Fandom-removebg-preview.png" width="150" height="175"/></div>

<div style="float:; max-height: 400px; position: fixed; left:1px; botton: 9px; z-index: 600;"><img src="https://i.ibb.co/q5PCsz2/Pupert-Pesky-The-Buzz-on-Maggie-Wiki-Fandom-removebg-preview-1.png" width="150" height="175"/></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/yyq27XQ/Maggie-Pesky-The-Buzz-on-Maggie-Wiki-Fandom-removebg-preview.png" width="150" height="275"/>

</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>  
  


<div><iframe src="https://www.youtube.com/embed/u-vekbesgr4//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy" data-ruffle-polyfilled="" width="0" height="0" frameborder="0">
</iframe></div>
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 0 of 0 comments ( View all | Add Comment )