2000s Black & White Layout

Tags: 2000s, y2k, black, white, music, autoplay, layout, pink, emo

Description:

Comment if you use this layout. DAMN ONLY TOOK 5 HOURS TO CODE THIS LAYOUT THIS TIME (so much code...)🥰 Uhm anyway, has autoplay music. Layout inspired by late 2000s and early 2010s soooo yeah. I'm actually really proud of this one.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by danica ౨ৎ (https://layouts.spacehey.com/layout?id=98040) -->

<style>

.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: "💀"

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

	/* Add to Favorites */

	content: "🖤"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

	/* Send Message */

	content: "⛓️"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

	/* Forward to Friend */

	content: "🦇"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

	/* Instant Message */

	content: "🕸"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

	/* Block User */

	content: "🕷"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

	/* Add to Group */

	content: "🎧"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

	/* Report Profile */

	content: "📼"


}

nav .top, footer{
  background-color: black;
  border: 3px solid white;
  border-radius: 3px;
  color: white;
}

h3 , h4, h5, .url-info b {
    color: #f0519e;  
}

h1, .count, .friends a p {
     color: #f0519e;
} 

a {
     color: #f0519e;
}

body{
background:url(https://files.catbox.moe/v2g9pn.jpg);
}

main{
background:url(https://files.catbox.moe/812lyz.jpg);
  border: 3px solid black;
  border-radius: 3px;
}

h1{
background:url(https://files.catbox.moe/0yw6mr.jpg);
  border: 2px solid white;
  border-radius: 3px;
  color: white;
  text-shadow: 0px 0px 5px black;
  text-align: center;
}

main:before {
    width: auto;
    margin-bottom: 25px;
    border: 1px solid black;
    height: 120px;
    display: block;
    content: "";
    background-image: url(https://files.catbox.moe/4g0h37.jpg);
    background-position: center center;
    background-size: cover;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
     background-image: linear-gradient(black, white);
     color: black;
}

.comments-table td:first-child{
    background-image: linear-gradient(black, white)
}

.profile .blurbs .heading, .profile .friends .heading {
     background-image: linear-gradient(black, white);
     color: black;
}

nav .links {
     background-image: linear-gradient(black, white);
     color: black;
     border: 3px solid rgba(0, 0, 0);
     border-radius: 8px;
     box-shadow: 0px 0px 14px black;      
}

.count {
   color: pink;
   text-decoration: underline;
}

footer {
     background-image: linear-gradient(black, white);
     color: pink;
    border: 3px solid rgba(0, 0, 0);
    border-radius: 8px;
    box-shadow: 0px 0px 14px black;
}

.blurbs, .contact, .friends{
  text-align: center;
  border: double 4px pink !important;
  margin-bottom: 15px;
}

#comments, .table-section:not(.table-section + .table-section){
  border: double 4px pink;
  height: 200px;
  overflow-y: scroll;
  text-align: center;
}

.mood, .url-info, .blog-preview{
  text-align: center;
  margin-top: 25px;
  margin-bottom: 10px;
  border: double 4px pink !important;
}

.profile-info{
  border: double 4px pink;
}

.profile .table-section{
  border: double 4px pink;
}

.details-table td:first-child{
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 3px;
}
.details-table td{
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 3px;
}

.comments-table td:first-child{
  background-color: black;
  border-radius: 3px;
}
.comments-table td{
  background-color: #dedede;
  border: 2px solid white;
  border-radius: 3px;
}

img{
  filter: sepia(100%) saturate(0);
}
img:hover{
  filter: sepia(100%) saturate(0) blur(1px);
  animation: shake 1s;
  animation-iteration-count: infinite;
}
@keyframes shake{
  0% {transform: translate(1px, 1px) rotate(0deg);}
  10% {transform: translate(-1px, -2px) rotate(-1deg);}
  20% {transform: translate(-2px, 0px) rotate(1deg);}
  30% {transform: translate(2px, 2px) rotate(0deg);}
  40% {transform: translate(1px, -1px) rotate(1deg);}
  50% {transform: translate(-1px, 2px) rotate(-1deg);}
  60% {transform: translate(-2px, 1px) rotate(0deg);}
  70% {transform: translate(2px, 1px) rotate(-1deg);}
  80% {transform: translate(-1px, -1px) rotate(1deg);}
  90% {transform: translate(1px, 2px) rotate(0deg);}
  100% {transform: translate(1px, -2px) rotate(-1deg);}

</style>

<style>.online { visibility: hidden; } .online img { content: url("http://dl10.glitter-graphics.net/pub/352/352870r1wbtx0gci.gif"); animation-name: none; visibility: visible; height: 43px; width: 90px; }</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/WgpbbGMgA3E?feature=shared//?&;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>

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

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 20 of 86 comments ( View all | Add Comment )

✩_CirUu	1715243382 Using! Report Comment
VioletKillz	1713876463 uzing XD Report Comment
Felixxx	1713679358 Zomg using!! Xp Report Comment
eli ⛧	1712831113 using!! Report Comment
k1tsunemic!!	1712705488 Using!! Report Comment
⋆˚࿔ Roxie 𝜗𝜚˚⋆	1711312041 this is GORGEOUS <33 using! Report Comment
˗ˏˋ ashley ˎˊ˗	1711057441 using !! :3 Report Comment
viv	1710339812 usinggg Report Comment
alex	1710293774 using! Report Comment
Eden	1710104106 using Report Comment
Kaiii	1710101005 Usinggg Report Comment
Kin	1709674912 Usingg Report Comment
Liva	1709538594 Using!!! Report Comment
MAR!!!	1709443264 Using!!! :3 Report Comment
skullxqueenx	1709409543 using :3 Report Comment
max	1709345243 will be using omg Report Comment
Pacy <3	1709232981 Using :)) Report Comment
d3fto	1709093991 Usando!! Report Comment
Bub0ooo	1708611584 Usando :p Report Comment
prismaticc xD	1708600801 using!! Report Comment