Forest and Frames

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

Description:

Feel free to customize as you wish.
If you have any questions, please comment below or go to my blog here.
If you don't want the falling sparkles, delete the snowflake code.
If you don't want the fairy image on the side, delete the fairy code.

Background 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

⇘ Layout Preview:

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

✮ 𝖈𝖍𝖆𝖗𝖑𝖎𝖊 ✮	1731863458 using :) Report Comment
𝔍𝔬𝔧𝔬𝔟𝔟𝔶	1731213255 using>> Report Comment
ariel	1730664201 might use it for now or layer Report Comment
♱ the crunchening ♱	1729437237 Love this layout ! How do i edit the about me text to be white ? Report Comment
St✧rry!˚🦋༘	1727979412 using! ₊˚⊹ཐི༏ཋྀ󠀮⋆₊ ⊹ Report Comment
cory	1727384902 love it!! using :3 Report Comment
Pigeon	1726004635 using Report Comment
Jay (alt)	1725782798 hey just so you know there seems to be an issue with the boarders? They work on nein-mc but when I put them into my blog they don't seem to come up. The layout is rlly good but I just thought I'd tell you :))) Report Comment I think it has to do with imgur pictures. I saved them to another site and update the layout. let me know if you still have trouble with it :) by Bela; 1725842979; Report ill try it out now :) by Jay (alt); 1725855625; Report
Jay (alt)	1725779557 using thank you so much!! Report Comment
SupremeBeanzz	1725037129 Using the snowflake code :] Report Comment
❀☽MKitten_0☾❀	1723405744 hey tired using, doesn't work Report Comment
poet 🐌	1711302450 using but edited :3c Report Comment
🌟 Saki/Kiz (Janebug)	1695019840 Using Report Comment
Tails Pinestalker	1694474273 Using a modified one, but leaving credit! Such a cute design! Report Comment
vickee	1686622609 using! i changed it a lil bit Report Comment
sabri	1686344582 using! Report Comment
Liss sanchez	1684955684 The layout doesnt show images anymore :”) Report Comment it's because of the updated imgur site! lol the images are still there but imgur banned spacehey for some reason so.. I have to go back and upload those images to another site like imgbb. But it's taking forever to update each layout lol there's a box with the image credits, if you want you can use the links to those images to save them and upload them to imgbb to be able to use them right away. by Bela; 1684997670; Report
h3avenlyk1ttie	1681967605 so pretty, using :)) you have so many pretty designs! Report Comment
rae ☆	1681493506 this is so cute but how do i get rid/change the image of the person lyng in the grass? thx !!! <33 Report Comment it's the .url-info background image. you can replace it with whatever image you want :) by Bela; 1681524361; Report
💜CLOUDY HEART !!☁️	1680361231 Using this !! Thank youuu Report Comment