gothic black & red layout

Tags: goth, 2000s, black, red, gothic

Description:

dis is kinda really simple cause it's my first layout, you may not repost or use this as a base. comment if u r gonna use it, thank you

Preview:

click on the image for a larger preview

Code:

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

<img src="https://64.media.tumblr.com/0449bd8bdc9ba178e415fbef42a749a6/a5f913f8ba41c2e0-71/s400x600/a0af87b06d873e6ab6dcee78d8323cb37cfebf30.gifv" width="500px" height="100px"/>


you may erase this text right here to put stuff about you, do not erase the image above unless u want to

<style>
 

@font-face { 

font-family: 'blackside'; 

src: url(https://dl.dropbox.com/s/dbo8631uydhb45w/Blackside%5B1%5D.ttf); 

}
@font-face { 

font-family: 'aviorte'; 

src: url(https://dl.dropbox.com/s/sdquqtas7279o0u/Aviorte_Personal_Use_only%5B1%5D.ttf); 

}
@font-face { 

font-family: starlight; 

src: url(https://dl.dropbox.com/s/cfcp07kvx3qut4s/starlight.ttf); 

}



/* main configs */
body { 
background: url(https://dl.dropbox.com/s/lp9k7iy22xv9d8a/HD-wallpaper-red-leather-fabric-luxury-pattern-texture.jpg);
font-weight: light;


}
 
main {
background: black;
position: 700px;
box-shadow: 0px 0px 25px 8px rgba(0,0,0,0.75);
}

.profile-pic {
  border-style: solid;
border-width: 20px;
border-image: url("https://cdn.discordapp.com/attachments/657655298613575691/853068735812206612/lace-border-png-37013.png") 60 fill round;
margin-top: 20px;
margin-bottom: 20px;
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
 }   



/* name */
h1{
font-size: 50px !important;
font-family: 'blackside'; 
padding-left: 2px !important;
color: black;
text-shadow: 0px 0px 6px White;
}

h1::first-letter {
text-transform: uppercase;

}

/* right headings */
.profile .blurbs .heading, .profile .friends .heading {
color: transparent;
background-color:transparent;
text-transform:lowercase !important;
color: white;
}


/* left headings */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: transparent;
color: transparent;
}

.contact .heading{ font-size:0; }
.contact .heading:before{ content: url(https://dl.dropbox.com/s/o46zqq4b19cu8kl/Picsart_22-10-31_12-34-53-924.png); overflow:hidden;
}

  .table-section .heading{ font-size:0; }
.table-section .heading:before{ content: url(https://dl.dropbox.com/s/o46zqq4b19cu8kl/Picsart_22-10-31_12-34-53-924.png); }




/* section h4 */
.profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
background: rgb(150,4,4);
background: linear-gradient(360deg, rgba(150,4,4,1) 71%, rgba(255,27,27,1) 83%, rgba(189,12,12,1) 96%);
border: 9px ridge #2B2B2B;
-webkit-box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);

-moz-box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);

box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);
text-shadow: 0 0 9px black;
}

.profile .blurbs .section h4 {
font-family: starlight; 
text-transform:lowercase;
color: white;
text-shadow: 0 0 9px black;

}





/* text configs */
h4 {
font-size: 0.1px !important;
padding-left: 2px !important;
color: black;
text-shadow: 0 0 9px black;
 }

p {
font-family: starlight; 
color: white;
text-transform:lowercase !important;
text-shadow: 0 0 9px black;
   } 

   a {
font-family: 'aviorte'; 
font-size: 20px;
     color: white; 
   }


a:hover {
     color: white; 

}
    .count {
        color: #2B2B2B;
text-shadow: 0 0 9px black;
    }

.profile .friends .person p {
color: #2B2B2B;  
font-family: 'aviorte'; 
text-shadow: 0px 0px 6px White;
}
.profile .friends .person p:hover {
color: #2B2B2B;  
}




/* blog */

DIV.blog-preview{
text-align: center;
border: 7px ridge DarkRed;
background-image: url(https://dl.dropbox.com/s/3xgvbss0xo6d7zj/29830fc7ab95b376bf136c08c8e226de.jpg);
text-transform:lowercase !important;
color: white;
-webkit-box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);

-moz-box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);

box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);


}





 /* images */

.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
border-style: solid;
border-width: 10px;
border-image: url("https://cdn.discordapp.com/attachments/657655298613575691/853068735812206612/lace-border-png-37013.png") 60 fill round;
}


.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://64.media.tumblr.com/62134fcae1f4b6e701e28c08c3a50550/09b0656ab042c182-b6/s75x75_c1/97a8c11bb6d4f6dada1e95a51760dac4660a967c.gifv);
}

.profile-pic, .profile .friends .person img:not(.icon), .profile .friends .person p, .profile h1{ 
    filter: grayscale(100%);

}    
.icon {
        content: url(https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
}





/* contact configs */
.profile .contact {
background-color: rgba(171, 118, 207, 0.4);
}
.profile .contact {
border: none;
font-family: 'blackside';
background: transparent;
text-transform: lowercase;

}

.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 friend */
	content: url(https://64.media.tumblr.com/72ce3df652cb02da74f606171b6c9d40/df9993671d388a92-c9/s75x75_c1/aed97fbd1064eb3886ab3f78249c8ebb23da7533.gifv);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add 2 fav */
	content: url(https://64.media.tumblr.com/72ce3df652cb02da74f606171b6c9d40/df9993671d388a92-c9/s75x75_c1/aed97fbd1064eb3886ab3f78249c8ebb23da7533.gifv)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chat */
	content: url(https://64.media.tumblr.com/72ce3df652cb02da74f606171b6c9d40/df9993671d388a92-c9/s75x75_c1/aed97fbd1064eb3886ab3f78249c8ebb23da7533.gifv)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: url(https://64.media.tumblr.com/72ce3df652cb02da74f606171b6c9d40/df9993671d388a92-c9/s75x75_c1/aed97fbd1064eb3886ab3f78249c8ebb23da7533.gifv)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: url(https://64.media.tumblr.com/72ce3df652cb02da74f606171b6c9d40/df9993671d388a92-c9/s75x75_c1/aed97fbd1064eb3886ab3f78249c8ebb23da7533.gifv)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: url(https://64.media.tumblr.com/72ce3df652cb02da74f606171b6c9d40/df9993671d388a92-c9/s75x75_c1/aed97fbd1064eb3886ab3f78249c8ebb23da7533.gifv)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add 2 group */
	content: url(https://64.media.tumblr.com/72ce3df652cb02da74f606171b6c9d40/df9993671d388a92-c9/s75x75_c1/aed97fbd1064eb3886ab3f78249c8ebb23da7533.gifv)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: url(https://64.media.tumblr.com/72ce3df652cb02da74f606171b6c9d40/df9993671d388a92-c9/s75x75_c1/aed97fbd1064eb3886ab3f78249c8ebb23da7533.gifv)
} 

.contact .inner a img {
 font-size: 0;
}
.contact .inner a img:before {
 font-size: 1em;
 display: block
}




/* about, interests n comments details */
.profile .table-section .details-table td {
background: #2B2B2B;
border: 7px ridge DarkRed;
-webkit-box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);

-moz-box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);

box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);

}


.profile .friends .comments-table td {
background-image: url(https://dl.dropbox.com/s/3xgvbss0xo6d7zj/29830fc7ab95b376bf136c08c8e226de.jpg);
border: 7px ridge DarkRed;
}
.comments-table td*{
 

  }
.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
filter: grayscale(100%);   

}

.comments-table td:first-child img{
    filter: grayscale(100%);
border-style: solid;
border-width: 10px;
border-image: url("https://cdn.discordapp.com/attachments/657655298613575691/853068735812206612/lace-border-png-37013.png") 60 fill round;
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);

}

.profile .comments-table .comment-replies{
background-color: Black;
border: none;
color: white;

}

.general-about .details{
padding: 2px;
    background: rgb(150,4,4);
background: linear-gradient(360deg, rgba(150,4,4,1) 71%, rgba(255,27,27,1) 83%, rgba(189,12,12,1) 96%);
border: 9px ridge #2B2B2B;
-webkit-box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);

-moz-box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);

box-shadow: inset 0px 0px 51px 0px rgba(0,0,0,0.75);
}




/* nav bar */
nav{ 
font-size: 13px !important;
text-shadow: 1px 1px black;
text-transform:none;
padding-left:3px;
text-align: center;
    }


nav .links {
background: rgb(28,27,27);
background: linear-gradient(360deg, rgba(28,27,27,1) 61%, rgba(79,79,79,1) 94%, rgba(62,62,62,1) 96%);
filter: grayscale(100%);
box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.75);
}

nav .links a:hover {
color: DarkRed;
}

nav .top{
/* has search bar logo n button */
background: rgb(28,27,27);
background: linear-gradient(360deg, rgba(28,27,27,1) 61%, rgba(79,79,79,1) 94%, rgba(62,62,62,1) 96%);
box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.75);
}
/* the spacehey logo */
nav img.logo{
filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%)
    hue-rotate(10deg) brightness(96%) contrast(89%);

}

  .search-wrapper input[type=text] {
    background: linear-gradient(360deg, rgba(150,4,4,1) 71%, rgba(255,27,27,1) 83%, rgba(189,12,12,1) 96%);
    font-family: starlight;
    border: 5px ridge #2B2B2B;
    

  }
  button{
    font-family: aviorte;
    background: rgb(121,121,121);
background: linear-gradient(360deg, rgba(121,121,121,1) 83%, rgba(190,190,190,1) 94%);
color: black;

}


.profile .url-info {
border: none;
color: transparent;
font-size: 0.1px;

}
.profile .table-section {
border: none;
}







/* general comments configs */ 

table.comments-table {
border: 2px inset DarkRed;
}




footer {
color: white !important;
box-shadow: 0px 0px 25px 8px rgba(0,0,0,0.75);
text-decoration: underline !important;
text-decoration-style: dotted !important;
background: rgb(28,27,27);
background: linear-gradient(360deg, rgba(28,27,27,1) 61%, rgba(79,79,79,1) 94%, rgba(62,62,62,1) 96%);
  }    

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

𝙝𝙖𝙢𝙯𝙖	1750121953 using Report Comment
⛧lucy⛧	1746279730 using! Report Comment
⁺‧₊˚ ཐི⋆⚰︎⋆ཋྀ ˚₊‧	1745633977 using Report Comment
⁺‧₊˚ ཐི⋆⚰︎⋆ཋྀ ˚₊‧	1745633977 using Report Comment
Kat	1745036828 Usando <3 Report Comment
Kat	1745036827 Usando <3 Report Comment
lureg0th.	1744182781 using! Report Comment
jonah	1744000102 using ! Report Comment
✂️ 𓂅 𝗙𝗔𝗖𝗘𝕃𝔼𝕊𝕊 ﹆ׂׂ ˖ ̨𖥔	1743323556 Using!! Report Comment
HEDONEX	1742958520 Using Report Comment
RIII111	1742134362 using <3 Report Comment
. grim , 🌹	1741954840 using !! Report Comment
Brandi	1741681947 using :p Report Comment
draculola ♡	1740970892 <3 Report Comment
Moon	1738655857 using for nav and contacts Report Comment
Riley! :3	1738568936 using part! Report Comment
syunikiss	1738123634 gonna use, thx Report Comment
S0F1.JPG	1737575742 Using Report Comment
juucrypt	1736955208 Using!! Report Comment
nyam6e	1736743324 possibly using Report Comment