Into the Green Forest

Tags: green, forest, crashtestdummy, woods, leaves, simple, layout, crashtestdummy

Description:

Simple forest layout

First in another trilogy

green, fall, winter

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Crash Test Dummy (https://layouts.spacehey.com/layout?id=2870) -->

<style>

@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=Allerta+Stencil&family=Amita&display=swap');

.profile {
  font-family: 'Allerta Stencil', sans-serif;  
}

.profile .left h1 {
	
    font-family: 'Amita', cursive;
	line-height:1em;
	
}

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
    font-family: 'Akaya Kanadaka', cursive;
	line-height:1em;
	text-shadow: 0 0 7px black;
	font-size:2em;
	color:#228B22;
	
}

.profile-info {
	background: var(--pdg_profileInfo);
	background-size: cover;
	background-position: center;
	color: #228B22;
	padding:6em 0;
    border-radius: 15px 15px 15px 15px;
}

nav .top {
    background: rgba(0,0,0,0.0);
    color:#228B22 ;
}
nav .top a{
    color:#228B22 !important;
}
nav .links {
    background: transparent!important;
    background-size: 100%100%!important;
    text-align: center;
}
nav .links a{
    color:#228B22 !important;
}
#q, button {
color: limegreen	;
background-color: #006400;
border: 1px solid limegreen	;
font-family: inherit;
}

nav img.logo { 
	filter: brightness(0) saturate(0%) invert(10%) sepia(80%) saturate(5622%) hue-rotate(100deg) brightness(100%) contrast(100%) drop-shadow(0px 1px 0px green) !important;
}



:root {
        --dark-orange: #333;
        --light-orange: #181818;
        --pageTexture: url(https://i.imgur.com/Tt0Nb1K.gif);
        --yourBackground: url(https://i.imgur.com/SUzMKKY.jpg);
        --hover: #00FF00;
        --links: #228B22;
        --pdg_blurbSticker: url(none);
        --pdg_profileInfo: url(https://i.imgur.com/ymqNeiT.jpg);
    }
    
    a{color: var(--links) !important;}
    a:hover{color: var(--hover) !important;}
    
    a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
text-decoration: underline;
text-decoration-style: wavy;
}
.logout-btn:hover,
.logout-btn:active{
text-decoration: underline;
text-decoration-style: wavy;
}
nav .top a:hover{
text-decoration: underline;
text-decoration-style: wavy;
}
nav .links a:hover{
text-decoration: underline;
text-decoration-style: wavy;
}
    
    body {
	background-image: var(--yourBackground);
	background-size: cover;
	background-attachment: scroll;
	background-position:center;
	no-repeat fixed;
    background-color: darkgreen;

}

.profile .right .blurbs:after {
	background-image: var(--pdg_blurbSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(2) translateY(-2rem);
	position: absolute;
	right: 0;
	z-index: -1;
}

 main {
        border-radius: 0 0 15px 15px;
        background: #00000066; !important;
        backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
    }
  html:before {
	display: block;
	position: fixed;
	pointer-events: none;
	content: " ";
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	right: 0;
	background-image: var(--pageTexture);
	background-size: cover;
	background-attachment: fixed;
	background-position:center;
	opacity: .9;
	z-index: 25;
}  
    .blog-preview p {
        background-color: darkgreen;
        padding: 5px 15px;
        border-radius: 15px;
        color:#32CD32 ;
    }
    .blog-preview p a{
        color: #c00!important;
    }
    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: white!important;
    }
    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
    }
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    table.details-table {
        border-collapse: collapse;
    }
    table.details-table td {
        background-color: transparent !important;
    }
    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #2a2a2a !important;
        border-bottom: 2px solid;
    }
    
    .container {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
    }
    footer {
        border-radius: 15px;
        background: #00000066; !important;
        display: block !important;
    }
    table.comments-table td {
        background-color: #00000066; !important;
    }
    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }
    .profile .friends .person img {
        border-radius: 500px;
    }
    .blog-preview p {
        font-size: 1.4rem;
    }
    a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }
    
    .comments-table, .details-table {
	border: 1px solid #00000066;
	border-collapse: separate;
	border-spacing: 0 .5em;
}

h1, h2, h3, h4, h5,a, p, nav label, .section {color: #228B22;}

.profile .left h1 {
	text-transform: capitalize;
	font-size: 3rem;
	color: #228B22;
	text-shadow: 3px 3px 0 black;
}

.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add to friends */
	content: "\2795"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "\2b50"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "\1F4ac"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "\23e9"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "\1F4f1"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "\274c"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "\1F465"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "\1f5e3"
}

.profile .blurbs .section h4 {
	color:#228B22 ;
}




</style>

<style>

.online{content:url(https://i.imgur.com/NObYS0y.gif);
    width: 55px;
    height: 55px;
}
</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 7 of 7 comments ( View all | Add Comment )

RealHumanBeing	1700141502 using. Report Comment
ink	1649217636 aaaaaa, it's so cute. for sure using Report Comment
Marianne	1637431099 Thanks for the beautiful forest layout, and all of your excellent layout work! Report Comment
hayley	1632011077 using :) Report Comment
DE Navarro	1629044268 Is there anyway to get rid of the animated leaves?? Report Comment did u figure out how by genevieve; 1648321101; Report No, sorry, just built my own. Thanks. by DE Navarro; 1648386404; Report
DE Navarro	1629044095 Thanks for the nature layout. Report Comment
Lynn McCarty	1623505639 Giving this a try. Thanks for making a good layout! Report Comment