simple studio ghibli inspired layout

Tags: studio ghibli, rain, blue, lofi, totoro

Description:

simple studio ghibli inspired layout with rain overlay - all features there except from the special icons in nav (christmas, new years, "new" before the app link) because they get on my nerves

feel free to edit as much as you wish!! credit not needed but appreciated,, please do comment if using tho!!

any problems j lmk,, ill try and fix it as soon as i can!! still works on mobile but the font is different since its not supported when not using windows,, sorry!!

ill probably update it every so often too :))
[update: rain overlay image link stopped working, replaced it!]

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by woodlouse [inactive] (https://layouts.spacehey.com/layout?id=93748) -->

<style>
*, nav, nav .links a, .logout-btn {
font-family: ms ui gothic!important;
text-shadow: 0px 0px 6px white;
color: white;
}
* {
cursor: url(https://cur.cursors-4u.net/symbols/sym-6/sym600.cur), auto !important;
}
.container{
max-width:100%;
width:calc(100% - 100px);
}
main, .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td, .details-table td, .details-table td:first-child {
background: transparent;
}
nav .top .left .logo {
display: none;
}
nav .top .left .christmas, nav .top .left .special-icon, img[src= "https://static.spacehey.net/icons/new.png"] {
display:none;
}
.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions, .comments-table {
border: none;
}
.blurbs, .blog-preview, .url-info, .contact, .friends, .table-section, .mood, .general-aboout, .profile-info, nav, footer {
background-color: #00000077;
border: 2px white dashed!important;
box-shadow: 0px 0px 4px white inset, 0px 0px 4px white;
border-radius:  10px;
}
a:any-link {
color: white;
}
.online{
content: url("https://i1.glitter-graphics.org/pub/986/986381ihw419ost5.gif");
}
h4 {
color: white;
font-weight: 700;
font-style: italic;
text-decoration: underline dashed;
}
.name {
font-size: 22px;
font-weight: 1000;
font-style: italic;
text-decoration: underline dashed;
}
body {
background-image: url(https://i.pinimg.com/originals/c2/38/5f/c2385f451fc41590977e576b70ad0a95.jpg);
background-attachment: fixed;
background-size: cover;
background-repeat:none;
}
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.postimg.cc/R0MbwcvD/rain-overlay.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.4;
  top: -110%;
  width: 300%;
  position: fixed;
pointer-events:none;
}

a:not(.friends a):hover, nav .links a:hover {
background-color: transparent;
background-image: url(https://wdlus.carrd.co/assets/images/gallery02/fc330a37.gif?v=fa97d6b6);
background-size: cover;
text-decoration: none;
color: #b2c0ce;
text-shadow: 0px 0px 6px #b2c0ce;
transition: 0.5s;
}
.top .left a:after {
content: "spacehey.com";
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
  content: " : ";
  color: white;
}
nav .top, nav .links, h4, h1, .url-info b, .friends b, .details-table td:first-child p, .contact a {
background-color: transparent;
text-transform: uppercase;
}
.comment-replies, .comments-table td:first-child, .music-table td:first-child, .comments-table td:last-child, .music-table td:last-child {
border: 2px dashed white;
}
.comments-table td:last-child, .music-table td:last-child {
border-top: none;
border-left: none;
border-right:none;
}
.comments-table td:first-child, .music-table td:first-child {
border-top: none;
border-left: none;
}
.comments-table tr:last-of-type td:first-child, .music-table tr:last-of-type td:first-child, .comments-table tr:last-of-type td:last-child, .music-table tr:last-of-type td:last-child{
border-bottom:none;
}
.comment-replies {
border-left: none;
border-bottom:none;
border-right:none;
}
.count, .profile .blurbs .section h4 {
color: skyblue;
}
nav .links .icon {
content: url(https://wdlus.carrd.co/assets/images/gallery01/a0c81117.gif?v=fa97d6b6);
}
button, input {
color:black;
text-transform:uppercase;
}
.contact img, .details-table .icon {
filter: grayscale(1) invert(1) brightness(3);
}
.profile .friends .person p {
color:white;
}
.general-about .profile-pic img, .table-section .person a img {
-webkit-mask-image: url(https://i2.glitter-graphics.org/pub/1108/1108152vyqekpis14.gif);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
position:relative;
transform:scale(1.025,1.025);
top:-0.25em;
max-width: 130px;
}
.pfp-fallback:hover {
filter: saturate(1.5);
transition: 0.4s;
border-radius: 0px;
}
.pfp-fallback {
filter: saturate(0.2);
transition: 0.4s;
border-radius: 100px;
}
.profile h1 {
background: url(https://wdlus.carrd.co/assets/images/gallery05/e4f40e30.gif?v=fa97d6b6) no-repeat right;
}
</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.

Comments

Displaying 20 of 67 comments ( View all | Add Comment )

𖤓ᥣιs𖤓	1793387686 using this!!! does anybody know how to remove the three totoro sprites by the pfp? they're cute but i'd like to put smth else there Report Comment the totoro sprites are there as a replacement for the "online now" icon, to replace it replace "https://i1.glitter-graphics.org/pub/986/986381ihw419ost5.gif" with another image link by woodlouse [inactive]; 1793565883; Report
Akira	1780789794 Using! Report Comment
Myrah Rose	1780406065 so cute! using <3 Report Comment
Bambi	1777852676 Using :) Report Comment
T a l i l i 𐔌՞ ܸ.ˬ.ܸ՞𐦯	1775531244 using ! Report Comment
Catwolf	1770666411 using Report Comment
mackenzie :3	1758560413 using! Report Comment
★Jae★	1754945225 Using Report Comment
Appaᯓ★	1752988144 using ty!! Report Comment
Mattiz	1749108713 Using! :D Report Comment
noemi	1748863886 using it!!! I love ittt Report Comment
Lily	1746379165 Using! I love it Report Comment
helena !! <3	1742254568 using !! Report Comment
lain	1740911068 using!! this is sooo cute !! :D Report Comment
C1it	1740804563 using !! <3 Report Comment
Angels World	1740032313 using! Report Comment
Riverr	1738541527 using <33 thank. u :D Report Comment
cryo🪻	1738533569 using!!! this is so cool Report Comment
avery	1737289404 using Report Comment