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 149 comments ( View all | Add Comment )

cqnelitq	1767592065 UZZ Report Comment
cindy	1767472972 using! s2 Report Comment
Alma penada	1767404589 Usando Report Comment
crazedrabbit	1766991675 maybe using ^_^ Report Comment
its.kal1na:p	1766354955 usingg Report Comment
Lootuswag	1765114039 USSSING Report Comment
Nehemiah Brown	1764272040 USING Report Comment
Acacia 🪽	1762967539 used Report Comment
Morben ´ཀ`	1762923081 using Report Comment
rikhila	1762843030 using lowkey Report Comment
yaree	1762140026 Usingggg :D Report Comment
𝓐melie (≧∇≦) ! !	1762110169 using !!! Report Comment
☆Tomb_for_Two☆	1760123167 using Report Comment
Chanél	1759705364 Using:3 Report Comment
Celeste	1759583200 usingg ! xx Report Comment
ras	1759414570 using Report Comment
XxSaphBatXx	1756760853 Using!! Report Comment
imneonphosphorescent	1754012682 USING Report Comment
y4mii :3	1752597872 USING TYTY Report Comment
XxSaphBatXx	1750060528 Using Report Comment