Green rainy layout!!

Tags: green, frog, rain, aesthetic, core, animation, bugs, dragon, plants, nature

Description:

Dark Rainy Green Layout!!!

Anyone is free to use, Just DO NOT REMOVE CREDIT

(Or move it somewhere else yk)

THIS LAYOUT FEATURES???

⋄ A rainy intro gif screen!!!
⋄ A floating dragon and spinning frog in the corner of your screen!!
⋄ Floating body animation
⋄ A silly little snail cursor
⋄ A plant filled banner!!
⋄ An animated caterpillar as online symbol >:D
⋄ Customized comments/links/interest box!!

WARNING THAT MY LAYOUTS ARE MADE FOR A COMPUTER/TABLET!! THEY WILL NOT LOOK VERY GOOD ON MOBILE/PHONE (sorry mobile users)

Everything else is the usual customization stuff!!!

I truly apologize for my messing coding, I cannot organize for the life of me. If you edit my code I cannot guarantee you it will work because of override issues :(

If any issues come up with my coding, msg me on discord @ykkeio for a quick response!! If you msg me on here I cannot guarantee a quick response!!!!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 🎧 : ̗̀➛ ykkeio (https://layouts.spacehey.com/layout?id=26524) -->

<style>

body{ background-image: );
background-image:url(https://64.media.tumblr.com/578ed7dbe9e1ab2f938d1cdb789a9de2/9aad0ce247ef6597-d9/s500x750/a03e154c2760904535590144a7a421ac056cf636.gifv);
Background-size: 100%;
}

main:before {
      background-image: url(https://i.pinimg.com/originals/c6/92/11/c69211ae836eb9ea3dd5a887feeec6c0.jpg);
      background-position: center center;
      background-size: 100%;
display: block;
content: "";
    width: 98%;
    height: 150px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
filter: grayscale(40%); 
  }

.row {
    width: 100%;
    display: table;
    table-layout: fixed;
    background-color: #6d76705c;
}

.general-about .details {
width: 300px;}

.profile .table-section, .profile .contact{
    margin-top: 20px;
}

footer {
	margin: 1em;
	position: relative;
}

main .right {
    width: 300px;
    background-color: #white;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    margin-top: 20px;
    border: 2px solid #ffffff00;
}

a{color: #edc886;}

.profile .friends .person p {
    color: #ffcc00;
}

.profile .friends .person img{
  border-radius: 100%;
    color: #ffffff;
    }



.col.w-40 {
    width: 43%;
}

nav .links {
    background-color: #0b2b12b5;
}

.comments-table td:first-child, .music-table td:first-child {
    background-image: url(https://i.pinimg.com/564x/ce/53/79/ce5379b84acc09e018ae4712e74718a2.jpg);
    text-align: center;
    font-weight: bold;
    width: 38%;
    background-size: cover;
}

nav .top {
    background: #a8a8a89e;
    color: black;
}

main {
    background:#ffffff00;
    color: white;
}

.profile .blurbs .section h4 {
    color: #9adaa363;
}

.count {
    color: #b74e4b;}

nav{
    font-size: 100%;
  font-family: 'Splash';}

.profile .blurbs .heading, .profile .friends .heading {
    background:#152c18a1;
    color: black;
}

.details-table td {
    background: #426637b8;
    vertical-align: top;
    color: white;
}

.details-table td:first-child {
    background: #06490ead;
    color: #ffffff;
}


.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    margin-top: 20px;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    background: #305200ad;
    color: white;
    padding: 2px 7px;
}

.profile .mood {
    margin-top: 20px;
}

div. mood{     border: 2px solid #ffffff00;}

.profile-pic img {
    border-radius: 100%;
    margin-top: 20px;
    margin-left: 10px;
outline: 2px dashed white;
outline-offset: 4px;
}

 .mood {
    margin-bottom: 20px;
}

main {
    font-size: 95%;
   font-family: 'Roboto Condensed';
}


.url-info{
    background: url("https://i.imgur.com/B5x8xT3.gif");
    background-position: center;
    background-size: cover;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 250px;
color: White;
filter: grayscale(50%);
}


.comments-table td {
    color: White;
background-image: url(https://i.pinimg.com/564x/5c/31/1d/5c311dbe6c26c27753f37eef87792d24.jpg);
background-size: cover;
}

.comments-table td:first-child img:not(.icon) {
    visibility: hidden;
}

.comment-replies {
    padding: 0 5px;
    border: 1.7px solid white;
}

.profile .friends .person img:not(.icon) {
    border-radius: 100%;
filter: grayscale(70%);
}

<style>

.friends
{display:none;
    }


 

     .online {
        content: url("https://i.postimg.cc/MGrJtnPJ/iHFK4Lf.png");
  content-position: center;
   width: 95px; }

.online{
  animation: shake 3.5s;
  animation-iteration-count: infinite;
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}




.icon, .award img {
    visibility: hidden;
}

/* contact icons */
.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: "🌱";
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🍏"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🍈"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "🍯"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "🧃"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "🌻"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "⭐"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🥬"
}


main {
    border-radius: 10px;
    margin-top: 8px;
}

footer {
    background: #ffffff00;
color:White;
}

</style>
<style>

.col, main, footer, nav .links, nav .top, html::before {
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}

}


</style>

<p id="p0">This Layout was made by <a href="https://spacehey.com/junpei"> https://spacehey.com/junpei, </a>


<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-6/nat509.cur), auto !important;}</style>

<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url(https://i.pinimg.com/originals/88/61/50/88615031268eedb69a9371a580057fbe.gif);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 6s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } </style>


<style>

nav::before {
 animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* transform: rotate(3deg); */
   /* transform: rotate(0.3rad);/ */
   /* transform: rotate(3grad); */ 
   /* transform: rotate(.03turn);  */ }

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }



</style>
 <style>

nav::before {
   content: "";
   background:  url(https://i.postimg.cc/jSgHjT3S/RPoNeiR.png);
background-size: 200px;
    position: fixed;
    float: right;
    display: inline;
    bottom: 0;
    right: 5px;
    height: 196px;
    width: 195px;
    margin-bottom: 10px;
    margin-right: 13px;
}

html::before {
   content: "";
   background:  url(https://i.postimg.cc/MH9TY6Qc/EG1LijB.png);
background-size: 250px;
    position: fixed;
    float: left;
    display: inline;
   top: 0;
    left: 5px;
    height: 130px;
    width: 250px;
    margin-top: 10px;
    margin-left: 13px;
}


</style></p>

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

𝓁𝑜𝑡𝑢𝑠 °❀.ೃ࿔*	1778273452 using, ty! <3 Report Comment
SPREAD	1778184668 using! Report Comment
jazzcandy	1778109693 usinggg!! Report Comment
Daria	1778019858 using Report Comment
Kaito Mori	1777838209 Using Report Comment
butterbean	1777780277 Using! Report Comment
𝙸𝚗𝚍𝚒𝚊𝚗𝚗𝚊	1777592377 Usinggg!! Report Comment
Atheria	1777470846 vey cute using!! Report Comment
BeNiceGabi	1777403197 using tyyyy!!!! Report Comment
Not_sliver	1777298076 using ty Report Comment
WillowTree	1776879940 Using! This is such a pretty layout btw! Report Comment
Miss Rain	1776388511 Usinggg Report Comment
⊹ ࣪ ˖ . ⌗ Collin / Gonzo !	1776326010 usig Report Comment
Calcifer	1776277031 Using !! TY :33 Report Comment
Ellycantrelate	1776029856 Using! Report Comment
Myah	1775918370 Using!! Report Comment
𝔪𝔢𝔩 ≽ ^⎚ ˕ ⎚^ ≼	1775818170 uusingg Report Comment
Oshi	1775494555 USING TYY Report Comment
･῾ ᵎ⌇ ⁺◦ 💮 ✧.	1775356327 USANDO!!!! Report Comment
adriwn	1775336666 Usandoo ^^ Report Comment