On a Dark, Rainy Night...

Tags: tragiictayy, layout, layouts, simple, black, dark, forest, emo, goth

Description:

If you use this layout, please comment below, or add me on here. Thank you. :)

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Cinzel&display=swap');
</style>

<style>

:root{
    --headers: #ffffff;
    --text: #9e9d9e; 
    --names: #403a3c;
    --links: #403a3c;
    --hover #000000;
    --borders: 2px solid #484848;
    --background_image: url('https://thumbs.gfycat.com/ChubbyNiceCommabutterfly-max-1mb.gif');
    --font-family: 'Amiri', serif!important;
    --curve: 0px;

   --mytopics: "Current Playlist: ";
}

h3, h4, h5{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2, .count {color: var(--text) !important;} /* color of text */
.friends a p{font-size: 8px!important; color: var(--names) !important;} /* color of names, and friends counter */
.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--text) !important;} /* color of search */
.section h4 {color: var(--headers); !important;} /* aboutme & want2meet headings */

b {
  color: #939393;
  font-family: 'Amiri', serif!important!
  letter-spacing: 0px;
}

i {
   color: #939393;
   font-family: 'Amiri', serif!Important;
   letter-spacing: 2px;
}

body{
    background-image: var(--background_image)!important;
    background-color: #000000;
    background-size: contain;
    background-attachment: fixed;
}

.blog-preview {display:none! important;}
.details-table td:first-child{display:none! important;}
.right .section h4{display:none !important;}

.heading{
    background: black !important;
    font-family: 'Cinzel', serif!important;
    text-align: center;
    text-shadow: 2px 2px 5px black;
    border: var(--borders)!important;
    border-top: transparent!important;
    border-right: transparent!important;
    border-left: transparent!important;
}

h1{
    display: none!important;
}

.w-40 >  p {
    display: none;
}

nav{
    background-color: #222222;
    border: solid 6px #484848;
    border-radius: var(--curve);
    box-shadow: 5px 10px 8px 0px black;
}
nav .top{
    background: #222222;
}
nav .top a, nav .links a{
    color: var(--text);
}
nav .links{
    color: var(--links);
    background-color: #000000;
    border: solid 6px #484848;
    border-bottom: transparent!important;
    border-right: transparent!important;
    border-left: transparent!important;
    text-align: center;
    font-family: 'Cinzel', serif!important;
    font-size: 10px;
    text-transform: lowercase;
}

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: "  ";
    color: var(--links);
}

nav img.logo{
    filter: invert(74%) sepia(18%) saturate(2%) hue-rotate(314deg) brightness(109%) contrast(87%);!important;
}

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 0px solid var(--text) !important;
    color:var(--text) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 0px solid var(--text) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--text) !important;}



.general-about {
  background:;
  color: white;
  border: none!important;
  text-align: left;
  height: 220px;
  padding: 15px;
}

.mood{color: white; border: none!important; background:; margin-bottom: 10px;}

.online{
    display: none!important;
    color: var(--links) !important;
    text-transform: lowercase;
} 
.online img{
    display: none!important;
}

h2, h3, h4, h5, a, p, nav label, .section{ 
    font-family: 'Amiri', serif!important;
    font-color: white;	
    font-size: 8px;
    text-align: center;
    text-transform: lowercase;
}

hr{
    border: var(--borders);
}

.blurbs, .friends, .profile .table, .blog-preview, .profile .table-section, .contact{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: black!important;
}
.icon{border:none !important;}
.comment-replies{border:none;} 
.comment-reply:not(:first-child){border-top: 2px solid var(--links);} 

td{
    background-color: transparent!important;
}

main:before { 
width: 100%;
height: 250px;
display: block;
content: "";
background-image: url("https://www.desktopbackground.org/download/1280x1024/2010/07/07/44834_in-the-dark-forest-wallpapers_1920x1080_h.jpg");
background-position: center;
background-size: cover!important;
background-repeat: no-repeat;
filter: grayscale(100%);
border: solid 6px #484848;
border-top: transparent!important;
border-right: transparent!important;
border-left: transparent!important;
}

main{
    background: #222222;
    border-radius: var(--curve) !important;
    border: solid 6px #484848;
    border-top: transparent!important;
    outline: none !important;
    box-shadow: 5px 10px 8px 0px black;
}

.table-section{
    border:none !important;
    background-color:var(--box_color_and_seethru)!important;
    border-radius: var(--curve) !important;
}

.table-section:nth-last-child(2) .details-table tr:nth-chold(2)
{display:none!important;}
.table-section:nth-last-child(2) .details-table tr:nth-child(3){display:none! important;}
.table-section:nth-last-child(2) .details-table tr:nth-child(4){display:none! important;}
.table-section:nth-last-child(2) .details-table tr:nth-child(5){display:none! important;}
.table-section:nth-last-child(2) .details-table tr:nth-child(6){display:none! important;}

.table-section:last-child {
  display: none !important;
}

.w-40 .table-section:nth-last-child(2) .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -200px;}

.w-40 .table-section:nth-last-child(2) .heading::after{
  content: var(--mytopics);
}

.heading, .blog-preview h4, .section h4{
    background: none !important;
    text-align: center;
    font-size: 8px;
    text-transform: lowercase;
}

.profile {
    letter-spacing: 0px;
    font-size: 8px!important;
}

.profile-info {
    display: none!important;
    background-color: #000000!important;
    background: url('');
    background-position: center;
    background-size: 350px;
    background-repeat: none!important;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 300px;
    font-family: 'Amiri', serif!important;
}

.profile-pic img{
    outline:none !important;
    border-radius: var(--curve) !important;
    padding:5px;
    filter: grayscale(100%);
    background-color:;
    border: none;
}

.friends-grid{
    text-transform: lowercase;
    text-align: center;
    height: 200px!important;
    overflow-y: scroll;
}
.friends-grid img{
    filter: grayscale(100%);
    border-radius: var(--curve) !important;
}

h2, h3, h4, h5, p{padding-left:5px !important;} 
.profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;}
.friends{margin-bottom: 20px;}

.profile .contact a{font-size: 8px;}

.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 user */
	content: "  "
} 

.url-info{
    background: url('https://1.bp.blogspot.com/-T7i8jgAUsHg/YLW4rCzXawI/AAAAAAAAOLk/IFBqJjQe5bcZChANshtDqRnsYmU3dYXZACLcBGAsYHQ/s1280/Aesthetic%2BSad%2B4K%2BWallpaper%2BFor%2BiPhone%2B%25285%2529.jpg');
    background-color: #000000;
    background-position: center;
    background-size: cover;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 300px;
    filter: grayscale(100%);
}
.url-info p{
    opacity: 0.0;
}

.comments-table {
    text-transform: lowercase;
    display: block;
    height: 200px!important;
    overflow-y: scroll;
    border: 0px solid black !important;
    outline: none !important;
    border-radius: 8px;
    padding:5px;
    border-spacing: 4px;
    text-align: center;
    font-size: 8px;
    filter: grayscale(100%);
}

.comments-table td:first-child{
    filter: grayscale(100%);
    background-image: url('');
    background-size: cover;
    background-position: center;
}

.comments-table td{
    filter: grayscale(100%);
    background-image: url('');
    background-size: cover;
    background-position: center;
    border: 0px solid black;
    padding:10px;
    border-radius: 8px;
}

.container {
  padding: 70px!important;
}

footer{
    background: transparent;
}
</style>

<style>


body {
    margin-bottom: fixed;
}

.myBox {
    width: 200px;
    height: 200px;
    overflow: scroll;
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    border: none!important;
}
::-webkit-scrollbar-thumb {
    background: Black; 
    border-radius: var(--curve);
}
::-webkit-scrollbar-thumb:hover {
    background: black;  
}
</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 189 comments ( View all | Add Comment )

Agatha	1751557617 usingg Report Comment
𝕄𝕒𝕪𝕤𝕒𝕝𝕜𝕚𝕣𝕚𝕚	1749537851 Usingg Report Comment
𝝑𝝔﹒﹒✿　🎀 ָ 　 𝐌ikhail 𝐌aeve　﹒୭ ﹕◖𖢷𔓕	1749223454 Vou usar 🫶 Report Comment
Morii	1749042052 Using <3 Report Comment
sinol	1748180341 using Report Comment
Koi	1748121222 using Report Comment
P4RK3R ᯓ★	1747661064 usingg Report Comment
angel♡	1747163850 using!! Report Comment
𝒜𝒟𝐼	1746675256 using Report Comment
lly, cowboy fora da lei	1746322582 usando Report Comment
launch	1745823423 using Report Comment
poisonxx27	1745211050 using Report Comment
mortox.	1745029187 Using! Report Comment
Saiko	1745028002 Using Report Comment
kamzi	1743952204 usando Report Comment
Abi_DL	1743945760 Using Report Comment
hunxyz	1741337570 using Report Comment
ba†	1740801523 using! Report Comment
𝕵𝖊𝖓𝖓𝖆	1740205789 using ! Report Comment
sam.2real	1740194575 using lmao. looks real good! Report Comment