Late 2000s Barbie Layout

Tags: 2000s, late 2000s, 2007, 2008, 2009, barbie, pink
Description:

The late 2000s (2007 - 2009) were a pretty interesting era for the iconic Barbie doll. It was the era of the short lived Luv Me 3 line, the I Can Be line really took off around this time frame, and it was also the era where the Fashion Fever line was replaced with the current Fashionistas line (though 2009 - 2014 Fashionistas dolls were very articulated and overall built better than the 2015 - present "Fashionistas"). Additionally, it was the era right before Barbie's little sister Kelly was replaced with Chelsea in 2010 (and also the era where most Kelly dolls had longer and more articulated limbs). I made sure to make this layout as historically accurate as possible (based on late 2000s Barbie movies/dolls/online Adobe Flash games/logos). The code below contains the autoplaying song "Love Is For Peasants" from Barbie as the Island Princess (2007).
Preview:

click on the image for a larger preview
Code:

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

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

<style>:root{--image1:url(https://www.joylot.com/afullsize_thumbs1/ss/622585653.jpg);--image2:url(https://www.mommytechbytes.com/wp-content/uploads/2013/05/Barbie-i-can-be_online.jpg);--image3:url(https://i.ebayimg.com/images/g/u20AAOSw1DtXGH9Z/s-l400.jpg);--image4:url(https://i.pinimg.com/736x/96/4f/4d/964f4df010bd4f473a81cdbbaf998234--doll-set-mattel.jpg);--image5:url(https://images4.fanpop.com/image/photos/17000000/three-musketeers-barbie-movies-17005213-640-480.jpg);--time:30s}.pdg_slideshow{width:100%;height:500px;position:relative}@media only screen and (max-width:768px){.pdg_slideshow{height:300px}}.pdg_slideshow_image{background-size:contain;background-repeat:no-repeat;background-position:center;width:100%;height:100%;position:absolute}.pdg_slideshow_image#image1{background-image:var(--image1);animation:slide1 var(--time) ease 0s infinite normal none}.pdg_slideshow_image#image2{background-image:var(--image2);animation:slide2 var(--time) ease 0s infinite normal none}.pdg_slideshow_image#image3{background-image:var(--image3);animation:slide3 var(--time) ease 0s infinite normal none}.pdg_slideshow_image#image4{background-image:var(--image4);animation:slide4 var(--time) ease 0s infinite normal none}.pdg_slideshow_image#image5{background-image:var(--image5);animation:slide5 var(--time) ease 0s infinite normal none}@keyframes slide1{0%,20%,100%{opacity:0}1%,19%{opacity:1}}@keyframes slide2{0%,20%,40%,100%{opacity:0}21%,39%{opacity:1}}@keyframes slide3{0%,40%,60%,100%{opacity:0}41%,59%{opacity:1}}@keyframes slide4{0%,60%,80%,100%{opacity:0}61%,79%{opacity:1}}@keyframes slide5{0%,80%,100%{opacity:0}81%,99%{opacity:1}}</style>
<div class="pdg_slideshow">
<div class="pdg_slideshow_image" id="image1"></div>
<div class="pdg_slideshow_image" id="image2"></div>
<div class="pdg_slideshow_image" id="image3"></div>
<div class="pdg_slideshow_image" id="image4"></div>
<div class="pdg_slideshow_image" id="image5"> </div>
</div>

<style>

body{

background-image: url(https://www.commonsensewithmoney.com/wp-content/uploads/2010/01/Barbie-Logo-.gif);
background-color: white;
background-size: 300px;

}

main{

background-color: rgba(255, 255, 255, 0.9);
border: groove #ff309b 6px ;
color: #ff309b;
border-radius: 3px;
font-size: 13px;
 box-shadow: 0px 0px 9px #ff75bc!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/NmhY5TV/barbie-i-can-be-2009-at-Duck-Duck-Go.png);
background-size: 411px;
height: 64px;
border-radius: 5px;
margin: 12px!important;
border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;

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

.top{

background-image: -webkit-linear-gradient(#ffbade, #ff309b)!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(#faf2f6,#fffcfe)!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/447/447826eewa4rjleq.gif);
  background-repeat: no-repeat;
  background-size: 300px;
  background-position-x: center;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
border-radius: 4px;
  display: block;
  height: 130px;
  width: px;
  background-image: url(https://cdn.shopify.com/s/files/1/0166/6656/t/333/assets/Head01.gif?v=7693216546048990231);
  background-repeat: no-repeat;
  background-size: 130px;
  background-position-x: center;

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

.table-section{
border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;
}
.table-section .heading{
background: -webkit-linear-gradient(#faf2f6,#fffcfe)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
:root {
    --logo-blue: none; 
    --darker-blue: #c42778; 
    --lighter-blue: none; 
    --even-lighter-blue: none;
    --lightest-blue: none;
    --dark-orange: red; 
    --light-orange: none; 
    --even-lighter-orange: none; 
    --green: white;
}
footer{
background: -webkit-linear-gradient(#ffbade, #ff309b)!important;
  -webkit-background-clip: text;
color: white;
border-radius: 3px;
outline: groove #ff309b 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/383/383300flbq01eaxr.gif);
}

.blurbs:after{
  content: "";
  white-space: pre-wrap;
border-radius: 5px;
  display: block;
  height: 50px;
  width: px;
  background-image: url(https://img1.picmix.com/output/stamp/normal/7/6/1/7/1197167_7d087.gif);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;
}
.friends .heading:before{
content: url


}
.blurbs .heading:before{
content: url(https://i.pinimg.com/564x/08/49/f5/0849f5197a223e77303a6f32173378f7.jpg);
}
.friends:after{
  content: "";
  white-space: pre-wrap;
border-radius: 3px;
  display: block;
  height: 50px;
  width: px;
  background-image: url(https://img1.picmix.com/output/stamp/normal/7/6/1/7/1197167_7d087.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{

filter: grayscale(100%) blur(1px);
-webkit-mask-image: url(https://cdn.discordapp.com/attachments/1002765210932744333/1093413057243381800/hart.png);

-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://cdn.discordapp.com/attachments/1002765210932744333/1093413057243381800/hart.png);

-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/q5fYTKx/th-1459245062-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/JyWmp2z/th-2187200486-removebg-preview.pn")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url("https://i.ibb.co/JKrmXdb/th-4243731438-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/Nmy14Mb/th-2335412797-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/FWLGQML/th-2229549658-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/zbfFtZ1/th-1816242194-removebg-preview.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url("https://i.ibb.co/k22QPL4/th-2868948945-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/xJFSgZs/th-2393585526-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/168/168378tkjqfm4nq8.gif);
        height: 2em;
        margin-right: 7px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 2s;
    }
</style>




<style>

.icon {
content: url(https://img1.picmix.com/output/stamp/normal/3/7/0/5/1385073_eba90.gif);
display: inline-block;
height: 1.5em;
width: 1.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/706/706282kaaom301hk.gif);
        height: 2em;
        margin-right: 7px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration</style><iframe src="https://www.youtube.com/embed/NWW4Sdxrcbk//?&;amp;;autoplay=1&;loop=1&;controls=1&quot;" 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 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/x8Y7Rw3/th-969174442-removebg-preview.png" width="300" height="200"/>

</div> 


<div style="">

 <div style="float:  ; &#10;&#10;max-height: 400px; &#10;&#10;position: fixed; &#10;&#10;right:1px; &#10;&#10;top: 9px; &#10;&#10;z-index: 600;"><img src="https://i.ibb.co/8zXX0xV/barbie-i-can-be-dolls-at-Duck-Duck-Go-removebg-preview.png" width="200" height="200"/>

</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/t8n1RMN/luv-me-3-barbie-at-Duck-Duck-Go-removebg-preview.png" width="150" height="150"/></div>

</div> 

<div style="">

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

</div> 


</div></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 3 of 3 comments ( View all | Add Comment )
MagicalGirlVibes
1720241188
Using !
Report Comment