Mid 2000s Barbie Layout

Tags: 2000s, barbie, mid 2000s, 2003, 2004, 2005, 2006, pink, skye sweetnam
Description:

This is a mid 2000s Barbie layout I created after getting inspired by another Barbie layout I saw earlier. As you can see, I used the 2003 - 2005 Barbie logo (which also happens to be my absolute favorite Barbie logo) for the background. In addition, the song playing in the background is "This Is Me" from The Barbie Diaries movie (2006) by Skye Sweetnam. The image near the links at the top and bottom of the page is an image I found of some 2005 Barbie Fashion Fever line dolls in case anybody was wondering. If this layout doesn't scream mid 2000s, then I don't know what does, lol. Let me know if anything is broken and what I need to fix.
Preview:

click on the image for a larger preview
Code:

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

<style>* {cursor: url(https://ani.cursors-4u.net/cursors/cur-11/cur1089.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2012/06/24/s-pink-premium-pointer.html" target="_blank" title="S Pink Premium Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="S Pink Premium Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>:root{--image1:url(https://i.pinimg.com/originals/d6/88/f8/d688f8ef87a740c6044d6808f9a6af35.jpg);--image2:url(https://thumbs.worthpoint.com/zoom/images1/1/0709/17/lot-barbie-fashion-fever-dolls-left_1_fdb36b0145fd313fc6432355898f6f9c.jpg);--image3:url(https://i.pinimg.com/originals/eb/97/07/eb97074ef43d8a83fa4cb6e7d4fc4360.jpg);--image4:url(https://barbieguide.sosugary.com/albums/userpics/10001/Barbie_e_Krissy_il_palazzo_delle_coccole.jpg);--image5:url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.oCcdXiGCdXrlFwn7Acs2kQHaIZ%26pid%3DApi&f=1&ipt=22af9ad390f242dbf57b9b8652cd7d6da579a9b560452a215b778c034e1ea29e&ipo=images);--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>
.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>


<style>

body{

background-image: url(https://wallpapercave.com/wp/wp2775547.jpg);
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/QMXQJYK/fashfever05s-jpg-JPEG-Image-411-540-pixels-2.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://64.media.tumblr.com/fffdc8c4163df9d99f005fb2096849f3/eaec3bdf26d1fdfd-bb/s640x960/72ee911cb06e1591791d123624cb0d7f3ccbc392.pnj);
  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://64.media.tumblr.com/9a5b6aa5ac419d06ead14c27c94ded79/e4ed25d8fb0ed184-dd/s400x600/2467713aafc8766fcbc06c306059b53c9694f660.gifv);
  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://64.media.tumblr.com/9a5b6aa5ac419d06ead14c27c94ded79/e4ed25d8fb0ed184-dd/s400x600/2467713aafc8766fcbc06c306059b53c9694f660.gifv);
  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://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://pixelbank.neocities.org/decome/hearts/2e2814da.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url("https://pixelbank.neocities.org/decome/swirlys/3d21ef26.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url("https://pixelbank.neocities.org/decome/swirlys/3d21ef26.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url("https://pixelbank.neocities.org/decome/sweets/f163080.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url("https://pixelbank.neocities.org/decome/sweets/f163080.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url("https://pixelbank.neocities.org/decome/clothing/c25d7d10.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content:  url("https://pixelbank.neocities.org/decome/clothing/c25d7d10.gif")
}

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://creazilla-store.fra1.digitaloceanspaces.com/silhouettes/7971146/hibiscus-flower-silhouette-4bb7ee-md.png);
        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/4/3/0/6/426034_54a07.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://creazilla-store.fra1.digitaloceanspaces.com/silhouettes/7971146/hibiscus-flower-silhouette-4bb7ee-md.png);
        height: 2em;
        margin-right: 7px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration</style><iframe src="https://www.youtube.com/embed/TvLz2-BvxJg//?&;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/r6syQzs/princess-and-the-pauper-barbie-at-Duck-Duck-Go.png.gif" width="150" height="150"/>

</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/qdzndJw/barbie-swan-lake-at-Duck-Duck-Go-removebg-preview.png" width="150" height="150"/></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 1 of 1 comments ( View all | Add Comment )
doomteensy
1691168671
This is so cute! Do you have the code for previewing the layout?
Report Comment