Eerie Forest

Tags: #green ; #simple ; #plant ; #forest
Description:

This layout creates a eerie vibe, if your looking for something like this then I've got you. Feel free to use it, and you don't need to credit me cuz idrc. Though, if you do leave a comment!
Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');
/*change things around in this section to modify backgrounds, colors, fonts, and the curve*/
:root{
     --background:url(https://64.media.tumblr.com/185b358e666a2deee0e4dd8156142156/64e799d2cbd5e21a-d8/s640x960/f31baa79df1a2b0a327fef6e6029eb24ac9fec84.gif);
     --bottom-background:#6b6863;
     --blast-off-bronze: #6b6561;
     --army-green: #a39e9b;
     --dark-sky-blue: #6e5a4f;
     --bone: #a39e9b;
     --grullo: #a39e9b;
     /*this next one is for the profile background. change the .8 to a anything from 0-1 to change the transparency*/
     --profile-color: #403e3d;
     /*this next one is for the header background. same deal as the profile color for transparency*/
     --header-color:#363534 ;
     /*this is for the navigation bar background color.*/
     --nav-color:#4a4844;
     /*this is for the footer background color*/
     --footer-color:#4a4844;
     --border-color: ;
     --border-color2: rgba(116, 154, 103, .2);
     /*this changes the background of your table of intersts and comments*/
     --table-background: rgba(200, 196, 205, .16);
     --border-color: #000000;
     --border-color2: rgba(116, 154, 103, .2);
     --header-color2: rgba(56, 64, 43, .4);
     --curve:3px;
     /*here are the customizable topics for the interests section*/
     --topic-1:"General";
     --topic-2:"Songs";
     --topic-3:"Movies";
     --topic-4:"Shows";
     --topic-5:"Current Hyperfixiations";
     --topic-6:"Plan For The Future";
    /*this is where you can edit the online icon*/
     --online-icon: url("https://i.imgur.com/eAIS8L5.gif");
     /*this is where you can edit the supporter tag*/
     --supporter: url("https://i.imgur.com/RfapVgR.png");
     /*this is the where you can edit the fonts*/
     --headers:'Neucha', cursive;
     --body: 'Neucha', cursive;
     
      
  }
  /*this next bit is the background behind the main profile.*/
body, .bodycontent{
    background:var(--background);
    background-attachment: fixed!important;/*this is what allows the background to scroll with you. change "fixed" to "scroll" if you want this feature turned off*/
    background-size: 100%; /*fits the background to the device being used. Mobile phones will just have a repeating background. if you don't mind it looking stretched out when using phones, add a 100% right before the semicolon.*/
    border-color:#00000000;
    border-width:55px; 
    border-style:dotted
  }

/*now for the rest of the profile.*/
main{
    background:none;
    padding-top:0px!important;
}

.profile{
    background-color:var(--profile-color)!important;
    /*delete the astriskes and slashes in the next line of code if you want a cute custom flower patch at the bottom of your profile. I dont like it but I'm leaving it in here in case anyone wants to use it*/
    /*
    background:var(--bottom-background) bottom no-repeat;
    background-size: 100px;
    background-repeat: repeat-x;
    */
    padding-top:none!important;
    border: groove 10px;
    border-color:var(--bone);
    border-top:none;
}
nav ul{
    background-color: var(--nav-color)!important;
    border: groove 10px;
    padding-top:none!important;
    border: groove 10px;
    border-color:var(--bone);
    border-top:none;
    border-bottom:none;
}
.top{
    background-color: var(--profile-color)!important;
     padding-top:none!important;
    border: groove 10px;
    border-color:var(--bone);
    border-bottom:none;
}
footer{
    background:var(--footer-color)!important;
}
p, .count{
    color:var(--bone);
    font-family: var(--body);
}
a{
    color:var(--dark-sky-blue);
    font-family: var(--body);
}
.friends-grid p{
    color:var(--grullo)!important;
text-align:center!important;
}
.friends-grid img{
    border-radius:500px;
    box-shadow: 3px 3px var(--army-green);
    object-fit: contain;
    height:100px;
    width:100px;
}
h1, h2, h3, h4, h5{
    font-family: var(--headers);
    color: var(--blast-off-bronze);
    text-align: center!important;
}
td{
    background: var(--table-background)!important;
}
.section h4{
    color:var(--bone)!important;
}

.blurbs .inner .section:nth-child(1) h4{ 
    font-size:5; 
}

.blurbs .inner .section:nth-child(1) h4:before{ 
    content: "Introductions"; /* put your own "about me" header here*/
    font-size: 25px;
    
}
.blurbs .inner .section:nth-child(2) h4{ 
    font-size:5; 
    
}
.blurbs .inner .section:nth-child(2) h4:before{ 
    content: "Foraging for Friendships"; /*put your own "who id like to meet" header here*/
    font-size: 25px;
    
}
.blurbs .heading{
    display:none;
}
.contact a{
    font-size: 15px;
}
/* this next bit hides the URL info*/
.profile .url-info{
    display:none;
}
/*this gives everything the border and background*/
.contact, .mood, .table-section, .blog-preview, .friends, .profile .blurbs .inner, .profile h1{
    background:var(--header-color)!important;
    border:solid var(--border-color) 2px!important;
    border-radius: var(--curve)!important;
}
/*this is just some fixing things*/
.contact .heading, .friends .heading, .profile .table-section .heading, .profile .friends p{
    background: none!important;
    text-align: center!important;
}
.blog-preview h4{
    background-color:var(--header-color2);
}
.blog-preview, .mood{
    text-align: center;
}
/*this next bit fixes the friends and comments sextions from being off center*/
DIV.friends:nth-child(3){
    text-align:center;
}
.profile .friends .heading{
    padding-left:30px;
}
#comments .heading{
    padding-left:0px!important;
}
table.comments-table p{
    text-align:left!important;
}
#comments, .contact{
    border-top:none!important;
    border-bottom:solid 2px var(--slate-gray)!important;
    border-radius: var(--curve);
    border-top-right-radius: 0px!important;
    border-top-left-radius: 0px!important;
}
.mood, .friends{
    border-bottom:0px!important;
    border-bottom-left-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
}
.contact .heading, .profile .friends .heading h4{
    background-color:var(--header-color2)!important;
}
.profile .friends .heading h4{
    border-radius:3px!important;
}
.profile .friends .heading{
    padding-top:5px;
}
#comments{
   Height:300px;
   Overflow:scroll;
}
.comments-table .report{
    font-size:30px!important;
}
.comments-table .report .icon{
    content: url(https://i.imgur.com/0BTdk8p.png);
    height:18px;
    width:10px;
}
.comments-table td:last-child img{
    height:12px;
    width:12px;
    Border:0px solid!important;
    Border-radius:0px!important;
}
.comments-table td{
    background-color:var(--header-color2)!important;
}
.comments-table td:first-child img{
    height:90px;
    width:90px!important;
    border-radius: 500px!important;
    Object-fit:contain;
}
.comments-table{
    border-radius:var(--curve)!important;
    border:none;
}
.comments-table td{
    border-color:white;
}
.comments-table p{
Font-size:20px!important;
}
.comments-table td:first-child p{
Font-size:20px!important;
text-align: center!important;
}
.comments-table tr:first-child td:first-child{
    border-top-left-radius: var(--curve);
}
.comments-table td:first-child{
    font-size:20px;
    text-align:center;
Padding:20px;
.comment-table tr:last-child img{
Border-radius:0px!important;
Border:none!important;
}
.comments-table tr:first-child td:last-child{   
    border-top-right-radius:var(--curve)!important;
}
.comments-table tr:last-child td:first-child{
    border-bottom-left-radius: var(--curve);
}
.comments-table tr:last-child td:last-child{
    border-bottom-right-radius: var(--curve);
}

/*this next string makes the profile photo into a circle and fits photos into it*/
.profile-pic img{
    height:160px!important;
    width:160px!important;
    border-radius:500px;
    border:var(--border-color) 2px solid;
    object-fit:contain;
    overflow:hidden;
}
.details{
    background-color:var(--header-color);
    border:solid var(--border-color) 2px;
    height:160px;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
}
/*this next bit is hides the origional interest labels*/
.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{
  letter-spacing:normal !important;
  Text-shadow: 2px 2px var(--bone);
}
/*and this is what customizes them. it can easily be done in the root*/
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content:var(--topic-1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content:var(--topic-2)!important;
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content:var(--topic-3)!important;
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content:var(--topic-4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content:var(--topic-5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content:var(--topic-6);
}
/*this is where the online image is changed. it looks funky from your perspective with the edit profile link, but it looks fine from other people's point of view*/
.online{
content:var(--online-icon);
height:20px;
width:20px;
}
/*this is where the supporter image is changed*/
.supporter img{
font-size:0;
} 
.supporter:before{
display:inline-block;
width:15px;
height:15px;
margin-right:5px;
content:"";
background:var(--supporter); no-repeat 0 0;
background-size:100%;

}
}
.supporter a{
    Color:var(--blast-off-bronze);
}
.mood{
    text-align:center;
padding-left:3px;
}

</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 2 of 2 comments ( View all | Add Comment )
IamYohaan!
1685680544
using, thx! <3
Report Comment
Hunter Haste
1668535270
mmmmmmm thank you
Report Comment