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:

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%; } body::after { content: ""; background: url('https://i.imgur.com/9DCsiKm.png'); position: absolute; white-space: pre; 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://cdn.discordapp.com/attachments/803784919821189171/1030580828847210647/Untitled232_20221014153953.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; } nav::before { content: ""; background: url(https://cdn.discordapp.com/attachments/803784919821189171/1030585758702125196/899b52866238a0ae6e652574a9437569-removebg-preview.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://cdn.discordapp.com/attachments/803784919821189171/1030582855190974465/Untitled231_20221014153122.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> <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> .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></p> <p id="p0">Find more of my layout’s @ <a href="https://layouts.spacehey.com/junpei"> https://layouts.spacehey.com/junpei</a></p> <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 4s ease 0s 1 normal forwards; pointer-events: none; } @keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } </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.