Gloomy layout

Tags: edgy, dark, emo, grey, sad, red, black, goth

Description:

old layout this shit broken i think idk get a better looking layout you dweeb

Preview:

click on the image for a larger preview

Code:

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

<style>



img {



  filter: grayscale(80%);



}



HTML,BODY{cursor: url("http://www.rw-designer.com/cursor-view/160656.png"), url("http://www.rw-designer.com/cursor-view/160656.png"), auto;}



:root {



    --logo-blue:black;



    --darker-blue: rgb(167,37,36);



    --lighter-blue: grey;



    --even-lighter-blue: lightgrey ;



    --lightest-blue: grey;



    --dark-orange: lightgrey;



    --light-orange: lightgrey;



    --even-lighter-orange: grey;



}



html:before {



  animation: grain 8s steps(10) infinite;



  background-image: url('https://www.linkpicture.com/q/LPic6470ef1e752fd1387000227.jpg');



  content: "";



  height: 300%;



  left: -50%;



  opacity:.4;



  position: fixed;



  top: -110%;



  width: 300%;



  pointer-events:none;



}




.profile {



  background-image: url("https://www.linkpicture.com/q/LPic6470ee5477cc11113692589.jpg");



}



@keyframes grain {



  0%, 100% { transform:translate(0, 0) }



  10% { transform:translate(-5%, -10%) }



  20% { transform:translate(-15%, 5%) }



  30% { transform:translate(7%, -25%) }



  40% { transform:translate(-5%, 25%) }


  50% { transform:translate(-15%, 10%) }


  60% { transform:translate(15%, 0%) }


  70% { transform:translate(0%, 15%) }


  80% { transform:translate(3%, 35%) }


  .logo {

  content:url("https://cutewallpaper.org/24/myspace-logo-png/download-myspace-png-image-with-no-background-pngkeycom.png")

  }


background:url("https://www.linkpicture.com/q/LPic6470ee75bfeec2061395448.jpg") no-repeat fixed; background-size: cover;}



</style>

<style>



@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@300&family=Audiowide&family=Black+Ops+One&family=Chakra+Petch:ital,wght@1,300&family=Rock+Salt&family=Saira:wght@300&family=Special+Elite&family=Stick+No+Bills:wght@200;300&family=Urbanist&display=swap');



p{



  font-family: 'Special Elite', cursive;



  font-size: 130%;



  color: white;



}



h1,h2,h3,h4,h5{



  font-family: 'Special Elite', cursive;



  font-size: 160%;



  color: white;



}



body{







background:url("https://www.linkpicture.com/q/LPic6470ef42b558c530749406.jpg")



}



.online{content:url("https://www.myspacegens.com/images/online_now/146.gif");}



</style>



<style>



body:before {



	content: " ";



	height: 100vh;



	width: 100vw;



	display: block;



	position: fixed; 



	top: 0; 



	left: 0; 



	z-index: 100;



	background-image: url('https://media.giphy.com/media/LmWnCBTOGUmw8/source.gif');



	background-size: cover;



	background-repeat: no-repeat;



background-position:center;



	animation: yourAnimation 3s ease 0s 1 normal forwards;



	pointer-events: none;



}



@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 







One Gif, Full Screen, Slide Up







body:before {



	content: " ";



	height: 100vh;



	width: 100vw;



	display: block;



	position: fixed;



	top: 0;



	left: 0;



	background-image: url('https://media.tenor.com/W8NMPBhLmj4AAAAM/blue-spiral.gif');



	z-index: 100;



	background-size: cover;



	background-repeat: no-repeat;



background-position:center;



	animation: slideUp 3s ease 0s 1 normal forwards;



	pointer-events: none;



}







.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://www.linkpicture.com/q/LPic6470eed6e375e28410951.gif")

}

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

	/* Add to Favorites */

	content: url("https://www.linkpicture.com/q/LPic6470eed6e375e28410951.gif")

}

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

	/* Send Message */

	content: url("https://www.linkpicture.com/q/LPic6470eed6e375e28410951.gif")

}

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

	/* Forward to Friend */

	content: url("https://www.linkpicture.com/q/LPic6470eed6e375e28410951.gif")

}

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

	/* Instant Message */

	content: url("https://www.linkpicture.com/q/LPic6470eed6e375e28410951.gif")

}

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

	/* Block User */

	content: url("https://www.linkpicture.com/q/LPic6470eed6e375e28410951.gif")

}

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

	/* Add to Group */

	content: url("https://www.linkpicture.com/q/LPic6470eed6e375e28410951.gif")

}

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

	/* Report Profile */

	content: url("https://www.linkpicture.com/q/LPic6470eed6e375e28410951.gif")

</style>
<style>
    .top input{
        
    background-color: grey !important;

        
    }
</style>
<style>
    footer{
        
    background-color: rgb(167,37,36) !important;

</style>
<style>

li.active .icon { 
    content:url("https://www.linkpicture.com/q/LPic6470ef090d9f9438656911.gif"); 
    width: 20px;
    height: 20px;
    }

</style>
<style>
.person {
  filter: grayscale(100%) blur(2px) saturate(100%);
  transition: filter 400ms ease-in-out;
}
.person:hover {
  filter: none !important;
    animation-name: shake;
    animation: shake 4s;
    animation-iteration-count: infinite;
}
</style>
<style>
h1, .count, .friends a p {
     color: rgb(167,37,36);
} 

</style>
<style>
.profile .friends .person p{
 color: rgb(167,37,36)!important;
}
</style>
<style>
table, th, td {

  border: 0px solid;

     }

:root {
/* change the interests to your likings */
  --topic1: "General";
  --topic2: "Music";
  --topic3: "Movies";
  --topic4: "Television";
  --topic5: "Books";
  --topic6: "Heroes";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color: transparent !important;
letter-spacing:normal !important;
text-shadow: 3px 3px rgb(167,37,36) !important;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
</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 135 comments ( View all | Add Comment )

✧V4MP1R3⁠✧	1721518109 Using^^ Report Comment
pluhh	1720032039 usingf meow Report Comment
Bunny Bat	1719037217 Using! Report Comment
macabre	1718050311 usinhg Report Comment i didn't mean to send a lot of that what by macabre; 1718050361; Report how ther fuck did you comment that like 20o times by Operator; 1718050660; Report we all jus built diff ig LLOL by macabre; 1718052736; Report all of the "albert has commented on your layout" couldnt even fit into one screenshot by Operator; 1718052792; Report I bet my ss could (just wait till I get my phone back) by macabre; 1718054277; Report
macabre	1718050311 usinhg Report Comment
macabre	1718050311 usinhg Report Comment
macabre	1718050311 usinhg Report Comment
macabre	1718050311 usinhg Report Comment
macabre	1718050311 usinhg Report Comment
macabre	1718050310 usinhg Report Comment
macabre	1718050310 usinhg Report Comment
macabre	1718050310 usinhg Report Comment
macabre	1718050310 usinhg Report Comment
macabre	1718050310 usinhg Report Comment
macabre	1718050310 usinhg Report Comment
macabre	1718050310 usinhg Report Comment
macabre	1718050310 usinhg Report Comment
macabre	1718050310 usinhg Report Comment
macabre	1718050310 usinhg Report Comment
macabre	1718050310 usinhg Report Comment