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

Grey	1786160999 Using! Report Comment
R!ver_XP	1786099915 usinggg Report Comment
:: sophont /parrotx2 ::	1785641665 oooo using 4 sureree Report Comment
Addyᥫ᭡✮⋆˙	1785436192 using!! <3 Report Comment
zygontl	1785363372 using! Report Comment
Octavia	1785263376 Using!! Report Comment
Avner 3ats Rocks	1784947974 USINGGGG Report Comment
Zero	1784762847 TOTALLY USING OMG Report Comment
ALEXANDER THE GREAAT	1784638610 USING! TYSM Report Comment
ærsx	1784407882 Lo usaré 🌱 Report Comment
Zero	1784070014 using Report Comment
Ace	1784054467 Using !!!! Report Comment
Tinafish	1783853324 using Report Comment
harvey	1783792689 Using Report Comment
--_Mossy Dreamer_--	1783560405 USING this is so good! Report Comment
Doobpis	1783498901 Using Report Comment
Moka	1783465250 ¡Using! :3 Report Comment
Xochi	1783266185 usando Report Comment
stellarimp	1783062271 using Report Comment
lila moon	1783030956 using Report Comment