dreamy 2000s pink/purple pixel layout!

Tags: #2000s, #pink, #gif, #layout, #purple, #cute, #pixel, #90s, #music, #autoplay

Description:

my first ever layout! may be messy srry
(ps: this layout plays music but you can remove it! the code for the yt link is at the very bottom of the about me code)
when typing in ur about me, js do it at the top of the code to avoid moving the cat gif weirdly :)
works best on pc!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 🎧ྀི nkz._⊹₊⋆ (https://layouts.spacehey.com/layout?id=104115) -->

<div style="float:  ; max-height: 800px; position: fixed; right: 1px; top: 10px; z-index: 200;"><img src="https://i.pinimg.com/originals/7b/df/06/7bdf0652d820489e07b41129ecc8b1e4.gif" width="150" height="150"/></div>


<div style="float:  ; max-height: 800px; position: fixed; left: 1px; down: 10px; z-index: 200;"><img src="https://64.media.tumblr.com/78d6b18a74dd48df9daba04feed6d935/e1b1142484d86b2d-de/s640x960/0ec9bdc4cf3072664cb146675b07396530af0241.gifv" width="1000" height="30"/></div>



<style>
  
  

  

/*PASTE SCROLLBAR CODE HERE*/
  
  


body{
background-image: url('https://i.pinimg.com/originals/8c/32/38/8c3238aa2593dab2b44dceab3b421a8e.gif');
background-position:undefined;
background-attachment: scroll;
background-size: contain;
background-color: #ffffff;
}

main{
background-image: url('https://i.pinimg.com/originals/13/a1/22/13a122a75ae1ab3c918041e784aaa264.gif');
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: #ffffff;
border: 0px Dotted #ffffff;
}

.contact, .url-info, .table-section, .blurbs, .friends, .comments {
background-color: #ffbde7;
}

span[itemprop='name'] {
color: #000000;
font-family: Sans-Serif;
}

h4 {
color: #000000;
font-family: Sans-Serif;
}

.section h4, .details-table td:first-child {
color: #000000!important;
font-family: Sans-Serif;
}

a, .count {
color: #0000ff;
font-family: Sans-Serif;
}

a:hover {
color: #ffff00;
font-family: Sans-Serif;
}

body,main {
color: #000000;
font-family: Sans-Serif;
}

.details-table td, .details-table td:first-child{
background: none!important;
}
.heading{
background: none!important;
}
.comments-table td{
background: none!important;
}
</style>




<style>html:after {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://64.media.tumblr.com/849c4259435e5ff9789dd42e23fbf003/tumblr_p422nhq6vi1qzm8dwo1_640.gifv);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.4;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain 
  70% { transform:translate(0%, 15%) }
}</style>



<style>main:before {
	width: 100%;
	height: 100px ;
	display: block;
	content: "";
	background-image: url('https://64.media.tumblr.com/592c5234e91a730df36505989a7323c7/ca8f9eb3b4a37895-b3/s400x600/0eda5a60cb00bf1130055b41bd7b2f9b7b977a90.gifv');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}</style>








<style>

h1{
  animation: type 3s steps(27);
  color: white;
  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>
/*contacting*/

div.contact > div.heading > h4:before{
        content: url(http://i11.photobucket.com/albums/a168/evelynregly/minigifs/th_mini023.gif);
    }

div.contact > div.heading > h4:after{
        content: url(https://hosting.photobucket.com/albums/a168/evelynregly/minigifs/th_mini109.gif);
    }

/*interests*/

    div.table-section:nth-child(7) > DIV.heading:before{
        content: url(your img link);
    }

 div.table-section:nth-child(7) > DIV.heading:after{
        content: url(your img link);
    }

/*links*/
 
    div.table-section:nth-child(8) > DIV.heading:before{
        content: url(your img linkif);
    }

 div.table-section:nth-child(8) > DIV.heading:after{
        content: url(your img link);
    }

/*blurbs*/

div.blurbs > div.heading > h4:after{
        content: url(http://i11.photobucket.com/albums/a168/evelynregly/minigifs/aa4.gif);
    }
div.blurbs > div.heading > h4:before{
        content: url(your img link);
    }

/*friends*/

div.friends > div.heading > h4:after{
        content: url(https://64.media.tumblr.com/3157fa098682cb00118ba89ee276725a/c38486af78aafdc8-d4/s250x400/7d333b31306fd42425d5dc9c96f5ea342a602e10.gifv);
    }
div.friends > div.heading > h4:before{
        content: url(your img link);
    }

/*comments*/

div#comments.friends > div.heading > h4:after{
        content: url(https://hosting.photobucket.com/albums/o260/mhilka/minigifs/divflowera16.gif);
    }
div#comments.friends > div.heading > h4:before{
        content: url(your img link);
    }

</style>


<style>
.general-about .profile-pic img{
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
</style>

<style>
.general-about .profile-pic img{
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
}
.profile .friends .person img {
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
}
.comments-table img,
.person img{
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
}
</style>




<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>



<iframe width="0" height="0" src="https://www.youtube.com/embed/3pcfCWi3T7o?si=wQJ8TaRHSxLgaNoq//?&;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>

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.