Forest and Frames

Tags: fairy, purple, forest, green, brown, pink

Description:

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

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 —
⇘ Falling Pink Sparkle: https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png
⇘ Fairy Image on the Side: https://64.media.tumblr.com/eb0d69b8ac609edcc129d2bbf8c321f7/b62af5340e1fd48a-26/s1280x1920/a050428dce148431300b3abbd4dc955bb10b7659.png
⇘ Profile: https://i.postimg.cc/tRnbKsT8/forest.jpg
⇘ Border Image: https://i.postimg.cc/4dXcrvfb/ZENajQ8.png
⇘ Online: http://dl6.glitter-graphics.net/pub/701/701136jat79z1ht9.gif
⇘ .url-info: https://storage.googleapis.com/pod_public/1300/181432.jpg

[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=21456) -->

<div class="snowflakes">
    <div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="30px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="20px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="10px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="20px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="30px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="10px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="30px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="10px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="20px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="30px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="20px"/></div><div class="snowflake">
    </div>
</div>



<style>
/* customizable snowflake styling */
.snowflake {color: purple;font-size: 1em;font-family: Arial, sans-serif;text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);}@-webkit-keyframes snowflakes-fall {0% {top: -10%}100% {top: 100%}}@-webkit-keyframes snowflakes-shake {0%, 100% {-webkit-transform: translateX(0);transform: translateX(0)}50% {-webkit-transform: translateX(80px);transform: translateX(80px)}}@keyframes snowflakes-fall {0% {top: -10%}100% {top: 100%}}@keyframes snowflakes-shake {0%, 100% {transform: translateX(0)}50% {transform: translateX(80px)}}.snowflake {position: fixed;top: -10%;z-index: 9999;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: default;-webkit-animation-name: snowflakes-fall, snowflakes-shake;-webkit-animation-duration: 10s, 3s;-webkit-animation-timing-function: linear, ease-in-out;-webkit-animation-iteration-count: infinite, infinite;-webkit-animation-play-state: running, running;animation-name: snowflakes-fall, snowflakes-shake;animation-duration: 10s, 3s;animation-timing-function: linear, ease-in-out;animation-iteration-count: infinite, infinite;animation-play-state: running, running}.snowflake:nth-of-type(0) {left: 1%;-webkit-animation-delay: 0s, 0s;animation-delay: 0s, 0s}.snowflake:nth-of-type(1) {left: 10%;-webkit-animation-delay: 1s, 1s;animation-delay: 1s, 1s}.snowflake:nth-of-type(2) {left: 20%;-webkit-animation-delay: 6s, .5s;animation-delay: 6s, .5s}.snowflake:nth-of-type(3) {left: 30%;-webkit-animation-delay: 4s, 2s;animation-delay: 4s, 2s}.snowflake:nth-of-type(4) {left: 40%;-webkit-animation-delay: 2s, 2s;animation-delay: 2s, 2s}.snowflake:nth-of-type(5) {left: 50%;-webkit-animation-delay: 8s, 3s;animation-delay: 8s, 3s}.snowflake:nth-of-type(6) {left: 60%;-webkit-animation-delay: 6s, 2s;animation-delay: 6s, 2s}.snowflake:nth-of-type(7) {left: 70%;-webkit-animation-delay: 2.5s, 1s;animation-delay: 2.5s, 1s}.snowflake:nth-of-type(8) {left: 80%;-webkit-animation-delay: 1s, 0s;animation-delay: 1s, 0s}.snowflake:nth-of-type(9) {left: 90%;-webkit-animation-delay: 3s, 1.5s;animation-delay: 3s, 1.5s}.snowflake:nth-of-type(10) {left: 25%;-webkit-animation-delay: 2s, 0s;animation-delay: 2s, 0s}.snowflake:nth-of-type(11) {left: 65%;-webkit-animation-delay: 4s, 2.5s;animation-delay: 4s, 2.5s}
</style>

<style>
.fairy {
    background: url('https://64.media.tumblr.com/eb0d69b8ac609edcc129d2bbf8c321f7/b62af5340e1fd48a-26/s1280x1920/a050428dce148431300b3abbd4dc955bb10b7659.png');
    background-size: 100%!important;
    background-repeat: no-repeat;
    position: fixed;
    right: 50px;
    bottom: 0px;
    height: 400px;
    width: 250px;
    z-index: 1000;
    opacity: 1;
}
</style>
<div class="fairy"></div>

<style>
/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Kufam&family=Reggae+One&display=swap');
</style>

<style>
:root{
    --headers: #206A5D;
    --text: #F8E1F4; 
    --names: #794C74;
    --links: #BD9862;
    --hover: cyan;
    --font-family: 'Kufam', sans-serif;
}

h3, h4, h5, details summary{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover, button:hover{color: var(--hover) !important; text-decoration: none!important;} /* color of links on hover */
.friends a:hover{color: var(--hover) !important; text-decoration: none!important;} /* color of links on hover */
p, b, h2, .count {color: var(--text) !important;} /* color of text */
.profile .friends .person p{color: var(--names) !important;} /* color of names and friends counter */
.profile .friends .person p:hover{color: var(--hover) !important;}
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers)!important;} /* aboutme & want2meet headings */
.blurbs .heading, .table-section .heading, .contact .heading{display:none;} 

h2, h3, h4, h5{
    font-family: 'Reggae One', cursive;
    font-size: 14px!important;
    font-weight: normal;
}
p, b, .section{ 
    font-family: var(--font-family)!important;
    font-size: 12px!important;
    font-weight: normal;
}
a, nav label{
    font-family: 'Caveat', cursive;
    font-size: 16px!important;
    font-weight: normal;
    text-transform: lowercase;
    font-variant: small-caps;
}

.heading, .blog-preview h4, .section h4{
    background: none !important;
    text-align: center;
}

.container{
    width: 100%;
}

body{
    background-image: url('https://i.postimg.cc/tRnbKsT8/forest.jpg');
    background-color: black;
    background-size: 100%;
    background-attachment: fixed;
    background-position: center center;
    color: var(--text)!important;
    text-align: center;
}
nav .top{
    background: transparent;
    color:var(--links);
}
nav .top a{
    color: var(--text);
}
nav .links{
    background-color: transparent;
    text-align: center;
    margin-bottom: 40px;
}
nav .links a, footer .links a{
    color:var(--text);
    border:4px ridge #BD9862;
    background-color: black;
    padding:5px;
    text-shadow:none;
}
/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

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

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
    filter: brightness(0) saturate(100%) invert(60%) sepia(67%) saturate(247%) hue-rotate(356deg) brightness(90%) contrast(94%)!important;
}

/* the search wrapper and button */

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

button{
    border: 0px solid var(--links) !important;
    background-color: transparent !important;
    color:var(--links) !important;
    font-family: 'Caveat', cursive;
    font-size: 16px!important;
    font-weight: normal;
    text-transform: lowercase;
    font-variant: small-caps;
}


/* this is where your name appears */
h1{
    color: #F8E1F4;
    font-family: 'Reggae One', cursive;
    font-size: 20px!important;
    font-weight: 1;
    text-align: center;
    border: 10px solid transparent;
    padding: 10px;
    border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png");
    border-image-slice: 80;
    border-image-repeat: repeat;
    border-image-width: 30px;
    background-color: rgba(0, 0, 0, 0.8);
    margin-bottom: 40px!important;
}

.general-about .details{
    border: 10px solid transparent;
    padding: 20px;
    border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png");
    border-image-slice: 80;
    border-image-repeat: repeat;
    border-image-width: 30px;
    background-color: rgba(0, 0, 0, 0.8);
    padding-bottom: 80px!important;
    margin-bottom: 40px!important;
}

.profile-pic img{
    padding: 30px;
}

.online { visibility: hidden; } 
.online img{
    content: url("http://dl6.glitter-graphics.net/pub/701/701136jat79z1ht9.gif");
    visibility: visible;
    float:right;
}

.mood{
    border: 10px solid transparent;
    padding: 20px;
    border-image-source: url('https://i.postimg.cc/4dXcrvfb/ZENajQ8.png');
    border-image-slice: 60;
    border-image-repeat: repeat;
    border-image-width: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    margin-bottom: 40px;
}

.profile-info {
    border: 10px solid transparent!important;
    padding: 20px!important;
    border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png")!important;
    border-image-slice: 80!important;
    border-image-repeat: repeat!important;
    border-image-width: 30px!important;
    background-color: rgba(0, 0, 0, 0.8)!important;
    margin-bottom: 40px!important;
}
.profile .blurbs .inner{
    padding: 0px!important;
}
.blog-preview, .profile .blurbs .section:first-child, .profile .blurbs .section:nth-child(2), #comments{
    border: 10px solid transparent;
    padding: 20px;
    border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png");
    border-image-slice: 80;
    border-image-repeat: repeat;
    border-image-width: 30px;
    background-color: rgba(0, 0, 0, 0.8);
    margin-bottom: 40px;
}

.friends:not(#comments), .contact, .details-table{
    border: 10px solid transparent!important;
    padding: 20px!important;
    border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png")!important;
    border-image-slice: 80!important;
    border-image-repeat: repeat!important;
    border-image-width: 30px!important;
    background-color: rgba(0, 0, 0, 0.8)!important;
    margin-bottom: 40px!important;
}
.profile .left .table-section:last-child {display:none;}
.contact{
    text-align: left!important;
}
.icon{
    border:none !important;
    font-size: 10px!important;
}
.comment-replies{
    border:2px solid var(--links); /* this is the border around the replies */
    
} 
.comment-reply:not(:first-child){
    border-top: 2px dotted var(--links); /* line in between comment replies*/
}

/* your interest and comments table row background color */
td{
    background-color: transparent!important;
}

/* the middle section of your profile */
main{
    background: transparent;
    border: transparent !important;
    width: 60%;
    margin:auto!important;
}

/* the interest table */
.table-section{
    border:none !important;
    background-color:transparent!important;
}
.url-info{
    background-image: url('https://storage.googleapis.com/pod_public/1300/181432.jpg');
    background-size: 100%100%;
    height: 200px;
    border: 10px solid transparent!important;
    border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png")!important;
    border-image-slice: 80!important;
    border-image-repeat: repeat!important;
    border-image-width: 30px!important;
    background-color: rgba(0, 0, 0, 0.8)!important;
    margin-bottom: 40px!important;
    margin-top: 40px!important;
}
.url-info p{
    opacity: 0.0;
}

.comments-table{
    border:none!important;
    border-spacing: 0px 20px;
}
.comments-table td{
    padding:7px;
}
.comments-table td:first-child{
    border-right:none;
}
.comments-table tr{
    border: 3px solid #8C328A;
}
footer{
    background:none!important;
    border:none!important;
}

::-webkit-scrollbar {
    width: 2px;
    height: 3px;
}
::-webkit-scrollbar-track {
    border: 1px solid #000;
}
::-webkit-scrollbar-thumb {
    background: #000; 
}
</style>

<style>
/* this is the mobile code */
@media (max-width: 600px){
body{
    background-size: cover!important;
}
main{
    width: 100%!important;
}
.fairy{
    display: none;
}
nav .links li{
    display:inline-flex;
    flex-direction:row;
}
}
</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 49 comments ( View all | Add Comment )

Evangelineִֶָ🦋ִֶָ་࿐	1749924952 Using! This is so cute I love it <3 Report Comment
Ghostbird	1749518763 this is so cool i am def using Report Comment
Lucii	1748881241 Using!! :3 Report Comment
idk	1746707709 using!! Report Comment
Maggie	1745856985 using, btw it's absolutely amazing <3 Report Comment
Aziz	1745403363 using Report Comment
𝘬𝘦𝘺 ꩜	1745257547 using! Report Comment
Cory	1745005384 Using! Thank you for creating, dear friend Report Comment
simon	1744505682 It looks AMAZING! Used it for my profile :] Report Comment
Harlow!!	1743888986 using :33 Report Comment
ᯓ★ 𝓼𝘵ᴀ𝐫	1743587913 usingg :3 Report Comment
Tris:D	1742003603 Usinggg :D Report Comment
Noctuidae	1741713078 Using <33 Report Comment
D0M1N0!!	1739685997 using! Report Comment
Kruk	1739036872 using!! thanks <3 Report Comment
🌟 Saki/Kiz (Janebug)	1738537241 Using ^^ Report Comment
heyits.Azureé 𓋹	1736732712 using Report Comment
Nori Kuznetsova	1736379576 Using Report Comment
vxl~tine	1736347420 using Report Comment
RosePixie	1736153086 I swear this layout was made for me!! So sweet, now all I need to do is figure out how to make the text white :) Report Comment