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

×÷Paladex÷×	1790823244 uaing Report Comment
Jatweirdo43	1790810621 Using! Report Comment
LesnayaJaba	1790727197 ahh so cool!! using Report Comment
sirius dahl !	1790608085 this is so cool!!! using :) Report Comment
ForbittenMal	1790507246 using Report Comment Hoody dat u bro? by Hoody🥾📹🌲; 1790615050; Report that me bro by ForbittenMal; 1790622373; Report
senna!	1789843488 using Report Comment
ItzSho_	1789758900 using Report Comment
Kaur	1789739359 Usinggg Report Comment
Bremm (˶˃𐃷˂˶)	1788408691 using but only the little banner thingy, also might change the picture later :P Report Comment
piwko	1788391953 using Report Comment
springpup	1788350524 using! Report Comment
caterbeetle	1788225143 using!! Report Comment
Poione	1787878726 usingg hehe Report Comment
zacksendlessfantasy	1787776956 using Report Comment
yurismart	1787187093 usin :] Report Comment
nyro	1786876179 usingggggg Report Comment
🧪🪐Adonis🩸🦴	1786625766 using!!!!!!!!!! Report Comment
Grey	1786160999 Using! Report Comment
R!ver_XP	1786099915 usinggg Report Comment
꒰ sophont / #1 black ice marker fan ꒱	1785641665 oooo using 4 sureree Report Comment