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 nat 𝜗𝜚 (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 163 comments ( View all | Add Comment )

jawo	1790535161 usinggggggg Report Comment
Loserstripe	1784881157 usinggg Report Comment
𝔣𝔞𝔦𝔮𝔞	1784140478 USING!! Report Comment
𝖍𝖆𝖏𝖆𝖗𝖊𝖘𑣲𝄞	1782860627 usinggg Report Comment
MERVIN!	1782299326 Probably using -_- Report Comment
Lilly🪽	1780769553 Using:3 Report Comment
ミxXTyphooneizAlienXxミ	1780681833 Usee Report Comment
\|-/ Renée Revenge	1779909472 Using!! Report Comment
meowthmeds	1777324789 using! but how can i remove the star pfp thing since i dont wanna use it :,) Report Comment
kirakills19	1775629619 usinggg Report Comment
starv3d	1771364656 Usingg Report Comment
crazedfox	1770536552 might be using Report Comment
𑣲┆marlea	1769207051 using!! Report Comment
𓏵 aimée !	1768383751 using!! Report Comment
Paulyyy	1768169997 USEEE :333 Report Comment
ミxXTyphooneizAlienXxミ	1768145008 Usee Report Comment
ronirova	1768074408 using 🫶 Report Comment
cqnelitq	1767592065 UZZ Report Comment
cindy	1767472972 using! s2 Report Comment
Alma penada	1767404589 Usando Report Comment