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

🇩🇪🪕🌾🌻Arwen🌻🌾🪕🇷🇺	1773524185 Using!!! Report Comment
fehime	1773519160 using :3 Report Comment
Purple hair do leeknow	1773510114 using!;3 Report Comment
Schizem	1773434612 gonna use!! Thanks ;) Report Comment
Biu	1773416031 Very pretty!!! Immma use it :P Report Comment
◟♯ . / Sammy . !	1773041115 using <3 thank you so much for taking time to make this !! Report Comment
Bwoman	1772950660 using Report Comment
Ambrosia	1772873226 Using! Report Comment
M1k3 X3	1772753571 Useing Report Comment
M1k3 X3	1772753569 Useing Report Comment
Samy	1772743952 usandooo, ameii Report Comment
㐭 ʾ ｍｉｍｉｅｉ!! ៹ 𖦹	1772741463 using!! Report Comment
Supersoos	1772706526 I like this but how to delete the plushie srry im a new here and im a boy its make me like a girl Report Comment
carol	1772646176 usandooo Report Comment
Jasper	1772616498 using!! Report Comment
⟢　 slleeper　　˘	1772423693 using! Report Comment
hertreehouse	1772245079 using! Report Comment
ₜᵢₗₗy⋆‧°𓏲ּ𝄢	1772205886 Using!! Report Comment
⊹ ࣪ ˖ . ⌗ Collin / Gonzo !	1772178639 using Report Comment
Nia	1772076001 using Report Comment