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.imgur.com/sP2Hxvo.png

    ⇘ Pink Fairy Image on the Side: https://i.imgur.com/RJyZOWl.png

    ⇘ Profile: https://i.imgur.com/SkDfa7z.jpg

    ⇘ Border Image: https://i.imgur.com/ZENajQ8.png

    ⇘ Online: http://dl6.glitter-graphics.net/pub/701/701136jat79z1ht9.gif

    ⇘ .url-info: https://i.pinimg.com/originals/91/32/5d/91325dc03912ba8f564b37edfd4e4012.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.imgur.com/sP2Hxvo.png" width="30px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="20px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="10px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="20px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="30px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="10px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="30px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="10px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="20px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="30px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="20px"/></div><div class="snowflake"><img src="https://i.imgur.com/sP2Hxvo.png" width="10px"/></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://i.imgur.com/RJyZOWl.png');
    background-size: 100%!important;
    background-repeat: no-repeat;
    position: fixed;
    right: 50px;
    bottom: 0px;
    height: 630px;
    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.imgur.com/SkDfa7z.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.imgur.com/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.imgur.com/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.imgur.com/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.imgur.com/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.imgur.com/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.imgur.com/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://i.pinimg.com/originals/91/32/5d/91325dc03912ba8f564b37edfd4e4012.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    height: 250px;
    border: 10px solid transparent!important;
    padding: 20px!important;
    border-image-source: url("https://i.imgur.com/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>
@media (max-width: 600px){
body{
    background-size: cover!important;
}
main{
    width: 100%!important;
}
.jam{
    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 17 of 17 comments ( View all | Add Comment )

aster 🐌	1711302450 using but edited :3c Report Comment
janebug (FROM HOMESTUCK!!!)	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
Jillian	1680034034 Love this layout! Thank you <3 Report Comment
xXRayneQuinnXx	1679021323 I love this one but i dont like the fairy or the random pic of the person layin in the grass. Report Comment
serena ઇઉ	1677871021 using tyy!! Report Comment
Vanessa Sissy Wilson	1677171813 pretty...gonna use it ty Report Comment
♱YARO♱	1677081060 gonna try this one out, thank you!! Report Comment
Valeria	1674852141 usinggg ttyyyy Report Comment
mel	1674493457 using, love it Report Comment
jubilee	1667801109 thanks sm! Report Comment