Woodland Shade

Tags: cottagecore, woods, green, soft green, pink, clean, simple

Description:

Copy the code that's in the box below and test it out in the Profile Editor in Friends View.

I have the blog version for this layout HERE

I truly appreciate your comments and thank you so much for using this layout. To keep things organized and prevent spam, I only check My Layouts blog for messages. If you have any questions, feedback, concerns, or suggestions, please leave them there, and I will do my best to respond. I may take up to 2 weeks to reply sometimes so I apologize in advance. But you may also find the answer for any questions you have there if someone else already commented. 💜

Image Credits —
⇘ Profile Background: https://e1.pxfuel.com/desktop-wallpaper/166/283/desktop-wallpaper-cottagecore-spring-cottagecore.jpg
⇘ Online Icon: https://64.media.tumblr.com/fdc4a2d4b2b0efd470396fed5339f436/9cd7c663e33f0456-06/s75x75_c1/17d7a3e483283ff49da2d460d7f161bf35f5b21b.gifv
⇘ URL info div: https://media.tenor.com/2LmQ0ZyvHRcAAAAC/cottage-core-butterflies.gif
⇘ Blog Preview Background: https://i.pinimg.com/originals/e5/e9/45/e5e945308b555af9ec5e2795483795e3.gif
⇘ Vines: https://i.ibb.co/C5NBsLd/vines.png

[last updated March.20.2025]

Preview:

click on the image for a larger preview

Code:

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

<style>
  @import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&family=Oranienbaum&display=swap');
</style>

<style>
/* mobile code, don't delete */
@media(max-width: 30em){
  .blog-preview:after{
    display: block;
    content:"";
    height:180px;
    margin-top:-175px;
    margin-right:30px!important;
    border-bottom:3px solid #F7FAF7!important;
    border-top:3px solid #F7FAF7!important;
    box-shadow: DarkSeaGreen 4px 0px!important;
}  
.blog-preview h4{padding-left:0px!important;}
.blog-preview p{padding-left:10px!important;}
h1{text-align: center;}
}
/* ~~~~ */
</style>

<style>

/* fonts and colors */
.icon{ font-size:11px!important;}

a{
    color: #8A8178;
    font-family: 'Oranienbaum', serif;
    font-size: 13px!important;
}
p, b, .count, nav label, nav .top, button{
    color:#314539;
    font-family: 'Oranienbaum', serif;
    font-size: 13px!important;
}
nav .links a{
    text-shadow: none;
    color:#97AF97;
}
.blog-preview p a, .section h4{ 
    color:#DBC585!important;
}
a:hover{ 
    text-decoration:none!important; 
    color:limegreen!important;
}
h1{
    color:#314539;
    font-family: 'Fleur De Leah', cursive;
    font-size: 40px!important;
    font-weight:1;
    padding-left:20px;
}
h2, h3, h4{
font-family: 'Oranienbaum', serif;
font-size: 13px!important;
letter-spacing: 1px;
color:DarkOlivegreen;
}
.mood p b{
    font-family: 'Fleur De Leah', cursive;
    font-size:18px!important;
    font-weight: 1;
}
.friends .person p{
    font-family: 'Fleur De Leah', cursive;
    letter-spacing: 1px;
    font-size: 16px!important;
    text-transform:lowercase;
}
body {
    background-color: #F7FAF7;
    background-image: url("https://e1.pxfuel.com/desktop-wallpaper/166/283/desktop-wallpaper-cottagecore-spring-cottagecore.jpg");
    background-size:50%;
}

/* nav area */
nav .top{
    background-color: #559955;
    color:#445533;
    letter-spacing: 1px;
}
nav .top button{
    background-color: #559955;
    color:#445533;
    letter-spacing: 1px;
    border:none;
}
nav .links{
    background-color: #607560;
    border-radius: 0px 0px 10px 10px;
    text-align: center;
}

/* this is the logo color. 
To change the color go to https://codepen.io/sosuke/pen/Pjoqqp
if you need more help check my blog https://blog.spacehey.com/entry?id=5523 */
nav img.logo{
    filter: brightness(0) saturate(100%) invert(24%) sepia(6%) saturate(4470%) hue-rotate(47deg) brightness(91%) contrast(68%)!important;
}
/* this is the search box */
[id='q']{
    border:1px solid green;
    background-color: rgba(85, 107, 47, 0.1);
    border-radius: 3px;
    color:lime;
}

main{
    background-color: #F7FAF7;
    margin-top:30px;
    border-radius:13px;
}

/* left side */
.details p{
    text-align: justify;
}
.profile-pic img{
    border-radius: 5px;
}
.mood p:after{
    display: inline;
    content:" ₊*   .:°";
    color: #9EABBE;
    font-weight: bold;
    font-family: "Arial";
}
.online {
  font-family: 'Fleur De Leah', cursive;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-size: 16px!important;
}
.online img{
  content: url('https://64.media.tumblr.com/fdc4a2d4b2b0efd470396fed5339f436/9cd7c663e33f0456-06/s75x75_c1/17d7a3e483283ff49da2d460d7f161bf35f5b21b.gifv');
  animation: none;
}

/* contact area */
.contact .heading{
    background-color: transparent!important;
    padding:0px!important;
    margin-bottom: 20px;
}
.contact h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding-left:5px;
    padding-top:5px;
}
.contact{
    border:none!important;
    border-spacing: 0px 3px;
}
.contact .inner{
    padding-left:20px;
    padding-right:20px;
}

/* the url box where you can add a picture */
.url-info{
    background-image: url("https://media.tenor.com/2LmQ0ZyvHRcAAAAC/cottage-core-butterflies.gif");
    background-size: 100%100%;
    border:none!important;
    border-radius: 5px;
    height: 170px;
    margin-top:30px!important;
    margin-bottom:30px!important;
}
.url-info p{
    opacity:0.0; /* hide the url text */
}

/* the interests table */

.table-section .heading{
    background-color: transparent!important;
    padding:0px!important;
    margin-bottom:10px;
}
.table-section h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding-left:5px;
    padding-top:5px;
}
.table-section{
    border:none!important;
    background-color: transparent;
}
.table-section .inner{
    padding:0px 10px;
}
.details-table{
    border-spacing: 0px 10px; /* adds space between each section*/
}
.table-section td:first-child{
    background-color: #D8E5D1;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 5px 0px 0px 5px;
}
.table-section td:nth-child(2){
    background-color: #BFD9AF;
    border-radius: 0px 5px 5px 0px;
}


/* the right side 
.profile-info says "SoSo is your friend"
or "edit profile" */
.profile-info{
   display: none;
}

/* the blog-preview */

/* this is the image above the blog posts */
.blog-preview:before{
    display: block;
    content:"";
    background-image: url("https://i.pinimg.com/originals/e5/e9/45/e5e945308b555af9ec5e2795483795e3.gif");
    background-size: 100%100%;
    border:5px solid #F7FAF7;
    border-radius: 13px;
    outline:3px solid DarkSeaGreen;
    outline-offset: 5px;
    height:150px;
    margin-top:10px;
    margin-left:5px;
    margin-right:5px;
}

/* this is the green line next to the blog titles */
.blog-preview:after{
    display: block;
    content:"";
    height:170px;
    margin-top:-178px;
    margin-right:35px;
    box-shadow: DarkSeaGreen 3px 0px;
}

/* this is some styling before the blog titles. 
you can delete this code if you don't want 
anyhting to appear infront of the blog titles*/
.blog-preview p:before{
    content: "°:. *₊";
    color: #9EABBE;
    font-weight: bold;
    font-family: "Arial";
    display: inline-block;
    margin-right:5px;
}

/* adding some indents*/
.blog-preview h4{padding-left:10px;}
.blog-preview p{padding-left:25px;}

/* blurbs area */
.blurbs .heading{
    background-color: transparent!important;
}
.blurbs h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding:7px;
}
.section h4{
    border:none;
}
.blurbs .inner{
    padding:0px!important;
    margin:20px;
    margin-top:0px;
}

/* about me section */
.section:nth-child(1){
    text-align: justify;
    letter-spacing: 1px;
    overflow-y: scroll;
    height:200px;
    padding: 5px;
}
/* who I'd like to meet section */
.section:nth-child(2){
    text-align: justify;
    letter-spacing: 1px;
    overflow-y: scroll;
    height:200px;
    padding:5px;
}

/* friends area */
.friends .heading{
    background-color: transparent!important;
}
.friends h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding:7px;
}
.friends-grid{
  text-align:center;
  padding:0px!important;
}
/* the comments table */

.comments-table{
    border-spacing: 0px 10px; /* adds space between each section*/
    border:none;
    padding:0px 10px;
}
.comments-table td{
    border:none;
}
.comments-table button{
    background-color: transparent;
    border:3px solid DarkSeaGreen;
    border-radius: 5px;
    margin:3px;
}
/* side where friends profile pic appears */
.comments-table td:first-child{
    background-color: #D8E5D1;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 5px 0px 0px 5px;
}
.comments-table td:first-child img{
    border-radius:5px;
}
/* side where comments appear */
.comments-table td:nth-child(2){
    background-color: #BFD9AF;
    border-radius: 0px 5px 5px 0px;
}

/* .comment-replies is the entire box where friends reply to comments and 
.comment-reply targets a single comment */

.comment-replies{
    border: 3px solid rgba(143, 188, 139, 0.5);
    border-radius: 5px;
    margin:10px;
}
/* the vine image between comment replies */
.comment-reply:not(:first-child):before{
    display: block;
    content:"";
    background-image: url("https://i.ibb.co/C5NBsLd/vines.png");
    background-size: 30%;
    height: 30px;
    width: 100%;
    margin-top:-30px;
}
.comment-reply{
    border:none!important;
}

footer{
    background-color: transparent;
}

/* scrollbar styles */

::-webkit-scrollbar {
    width: 1px;
    height: 4px;
}
::-webkit-scrollbar-track {
    border: 1px solid DarkSeaGreen;
}
::-webkit-scrollbar-thumb {
    background: DarkSeaGreen; 
}
::-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 29 comments ( View all | Add Comment )

amunet ⋆˚꩜｡𓇼	1745084293 using :) Report Comment
majorofda534	1744660168 using!! Report Comment
Ray レイ	1744465784 I LOVE THIS AND I WILL BE USING THIS Report Comment
Ezra	1743813281 Using :3 Report Comment
𝐀𝐧𝐭𝐡𝐨𝐬	1743804034 using! Report Comment
denki	1743634282 using <3 Report Comment
Mitsuki	1741794396 using ( changed alot tho ) Report Comment
༻٭Apolline٭༺	1740849338 Usiiing <33 Report Comment
(🩰) R.	1740195393 using! ♡ Report Comment
Anni𓇼𓏲*ੈ✩‧₊	1738012130 usingg Report Comment
Caelyn	1737254438 Using! Thanks Report Comment
Miri	1735865477 using, thanks! Report Comment
Rhiannon	1735833619 Using! Report Comment
paris ♥	1729044463 using <33 Report Comment
Kipp	1722327092 using <3 Report Comment
MINT	1722295427 using :D Report Comment
moosya!!! ☆	1717335266 using! Report Comment
Jeanney_	1712824731 so pretty, using <3 Report Comment
Aileen Marnes	1712633517 use Report Comment
Shark !! 🦈	1710960056 Is pretty , using Report Comment