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

009.	1773101903 using. Report Comment
xanthexoxo	1772811091 using Report Comment
miette	1772507984 using ! Report Comment
Aurora_mortis	1771607107 looks awesome, will use Report Comment
Aurora_mortis	1771607107 looks awesome, will use Report Comment
uliss2	1770498055 ty11!!! Report Comment
OhDee	1769931567 Using fn Report Comment
☕	1768941040 using Report Comment
𝑚𝑖𝑘𝑒𝑦	1767319632 Using!! Report Comment
sammy!!	1766880644 mayb using !!! Report Comment
onyxx	1765332314 usingg Report Comment
Finney🎩	1764531944 Using! Report Comment
Alorah ✩	1761614271 USINGG! Report Comment
니키는 당신을 사랑해요	1759269545 Using and ty for making thiss Report Comment
The Wolverine	1752817512 using Report Comment
Agatha	1751557617 usingg Report Comment
𝕄𝕒𝕪𝕤𝕒𝕝𝕜𝕚𝕣𝕚𝕚	1749537851 Usingg Report Comment
𝝑𝝔﹒﹒✿　☄️ ָ 　 𝐔ranus 𝐋ucilfer　﹒୭ ﹕◖𖢷𔓕	1749223454 Vou usar 🫶 Report Comment
Morii	1749042052 Using <3 Report Comment
sinol	1748180341 using Report Comment