Blue Studio Ghibli Aesthetic

Tags: studio ghibli, blue, pixels, stars, my neighbor totoro, spirited away

Description:

Really just uploaded this for archiving purposes ^_^ Feel free to use! :)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by darren (https://layouts.spacehey.com/layout?id=94798) -->

<style>
/* LAYOUT MADE BY DARREN (https://spacehey.com/reversebeartrappd)
*
* Used: Tommy Panzram's Layout Editor (https://heroin-bob.github.io/SpaceHeyLayoutEditor)
*
* Inspiration Credits To: Zyozi (https://spacehey.com/zyozi), Idioteque (https://spacehey.com/coedcaine), Woodlouse (https://spacehey.com/woodlouse), and ESPECIALLY, Samsux (https://spacehey.com/samsux)
*
*
* FEEL FREE TO:
* COPY THE ENTIRE LAYOUT
* AND
* RIP PIECES OF CODE
*
* THIS LAYOUT IS NOT VERY OPTIMIZED! SORRY!!
* I ALSO AM NOT THE BEST AT CODING AND HAVE VERY UNHEALTHY INTERNET PRACTICES
*
* IF YOU DO USE MY CODE:
* TAG OR MESSAGE ME! I WOULD LIKE TO SEE IT IN ACTION! NO PRESSURE!
* FEEL FREE NOT TO CREDIT ME, I DONT MIND!
*
* MADE: 30/12/23
* LAST EDITED: 9/1/24
*
* TRANS & QUEER RIGHTS, BLACK LIBERATION AND INDIGENOUS SOVEREIGNTY */

/* ROOT COLORS */

:root {

 --off-white: #F1F1F1;
 --white: #FFFFFF;
 --gray: #CCCCCC;
 --blue: #567296;
 --light-blue: #698bb8;
 --border-blue: #35465c;
  
}

/* PROFILE WIDTH + FONT */

@font-face {
font-family: 'Determination';
src:url(https://dl.dropbox.com/s/43esi8tpxce4q3f/DeterminationMonoWebRegular-Z5oq.ttf?dl=0;)
}

.container {
 
 width: 1050px;
 height: 650px!important;
 overflow-y: auto;
 cursor: url('http://www.rw-designer.com/cursor-extern.php?id=24615'), auto!important;
 font-family: 'Determination';

}

/* SCROLLBAR */
 
/* FIREFOX */
  
* {
   
  scrollbar-width: auto;
  scrollbar-color: #567296 #f1f1f1;
  
}

/* CHROME, EDGE, and SAFARI */
 
*::-webkit-scrollbar {
  
  width: 8px;
  
}

*::-webkit-scrollbar-track {
    
    background: #f1f1f1;
  
}

*::-webkit-scrollbar-thumb {
    
  background-color: #567296;
  border-radius: 0px;
  border: 0px none #ffffff;
  
}

/* TEXT COLORS + CURSOR + ONLINE */

* {
  
  cursor: url('http://www.rw-designer.com/cursor-extern.php?id=24615'), auto!important;
  
}

.online {
  
  color: var(--border-blue)!important;
  
}

.online img {
  
  visibility: hidden!important;
  
}

p {
  
  color: var(--border-blue)!important;
  
}

a:hover {
  
  color: var(--border-blue);
  
}

.count {
  
  color: var(--blue);
  
}

/* MAIN COLORS */

 html:before {
  
  animation: grain 8s steps(10) infinite;
  background-image: url(https://external-media.spacehey.net/media/s8jt3S7IeHGER3WhJoWLp71gTJlUQzr_oBOHUoSkX5YU=/https://i.pinimg.com/564x/36/14/1a/36141adb3537f5ca03e0d3c9402bf2fe.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
  z-index: -2;

}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }

}

body {
  
  background-image: url('https://file.garden/ZYCtlG2nsi-rTEoR/ghibli.png');
  background-repeat: no-repeat;
  background-position: center fixed;
  background-size: 100%;
  cursor: url('http://www.rw-designer.com/cursor-extern.php?id=24615'), auto!important;
  
}

nav .top {
  
  background-color: var(--blue);
  color: var(--white)!important;

}

.top .right {
  
  color: var(--white)!important;
  
}

nav .links {
  
  background-color: var(--light-blue);
  text-align: center;

  
}

.links a {
  
  text-shadow: none!important;
  color: var(--white)!important;
  
}

.pagination {
    display:none;
}
nav .links li:first-letter, nav .links a:first-letter {
  text-decoration: underline;
}
.details p:nth-of-type(2) {
  margin: 2px;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
  
  content: "";
  
}

nav .links .icon:not(img[src="https://static.spacehey.net/icons/new.png"]) {
    content:url("https://file.garden/ZYCtlG2nsi-rTEoR/sprig.gif");
}

.input {
  
  background-color: var(--white)!important;
  border: 6px ridge var(--border-blue)!important;
  
}

main {
  
  background-color: var(--white);
  color: var(--border-blue)!important;
  cursor: url('http://www.rw-designer.com/cursor-extern.php?id=24615'), auto;
  
}

footer {
  
  background-color: transparent!important;
  
}

.blurbs {
  
  border: 2px solid var(--blue)!important;
  
}

.blurbs .heading {
  
  background-color: var(--blue)!important;
  color: var(--white)!important;
  text-align: center!important;
  font-size: 12px;
  
}

.profile .blurbs .section h4 {
  
  display: none;
  
}

.blurbs .inner .section:last-of-type h4 {
  
  font-size: 0px!important;
  
}

.blurbs .inner {
  
  max-height: 800px!important;
  overflow-y: auto!important;
  background-color: var(--off-white);
  
  
}

.friends .heading {
  
  background-color: var(--blue)!important;
  color: var(--white)!important;
  text-align: center!important;
  font-size: 12px;
  
}

.friends .inner {
  
  max-height: 150px;
  overflow-y: auto;
  background-color: var(--off-white)!important;
  
}

.profile .friends .person img {
  
  clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%)

}

table.comments-table td {
  
  background-color: var(--off-white)!important;
  padding: 3px;
  
}

#comments .inner {
  
  max-height: 283px;
  overflow-y: auto;
  
}


.blog-entry .profile-pic:after, .bulletin .profile-pic:after { 
  
  background-size: cover; 
  width: 110px; 
  height: 110px; 

} 

.general-about .profile-pic:after { 
  
  background-size: cover; 
  width: 160px; 
  height: 160px; 

}

.contact .heading {
  
  background-color: var(--blue)!important;
  border: 0px!important;
  
}

.contact {
  
  background-color: var(--off-white)!important;
  border: 2px solid var(--blue)!important;
  
}

.url-info {
  
  background-color: var(--off-white)!important;
  border: 2px solid var(--blue)!important;
  
}

.table-section .heading {
  
  background-color: var(--blue)!important;
  
}

.table-section {
  
  background-color: var(--off-white)!important;
  border: 2px solid var(--blue)!important;
  
}

.table-section td {
  
  background-color: var(--off-white)!important;
  border: 1px solid var(--blue)!important;
  padding: 1px;

  
}

.profile .table-section {
  
  display: block;
  max-height: 450px;
  overflow-y: auto;
  
}

.profile-info {
  
  background-image: url('https://i.pinimg.com/originals/f0/4a/0f/f04a0f964e22f64a08e892c9496f1864.gif');
  background-position: center!important;
  height: 300px!important;
  font-size: 0px!important;
  border: 0px!important;
  
}

.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: url('https://file.garden/ZYCtlG2nsi-rTEoR/toto.gif');

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	
  /* Add to Favorites */
  content: url('https://file.garden/ZYCtlG2nsi-rTEoR/bluedino.gif');

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	
  /* Send Message */
  content: url('https://file.garden/ZYCtlG2nsi-rTEoR/cat.webp');

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	
  /* Forward to Friend */
  content: url('https://file.garden/ZYCtlG2nsi-rTEoR/penguin.webp');

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

  /* Instant Message */
  content: url('https://file.garden/ZYCtlG2nsi-rTEoR/moomin.webp');

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	
  /* Block User */
  content: url('https://file.garden/ZYCtlG2nsi-rTEoR/catt.webp');

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	
  /* Add to Group */
  content: url('https://file.garden/ZYCtlG2nsi-rTEoR/hippo.webp');

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	
  /* Report Profile */
  content: url('https://file.garden/ZYCtlG2nsi-rTEoR/badtz.webp');

}

 .logo {
  
  content: url('https://file.garden/ZYCtlG2nsi-rTEoR/shstarlogo.png');

}

/* CUSTOMIZABLE STUFF */

.pinned {
  
  content: url('https://file.garden/ZYCtlG2nsi-rTEoR/spinstar.gif');
  
}

ul {
  
  list-style-image: url('https://file.garden/ZYCtlG2nsi-rTEoR/spinstar.gif');
  
}

ol {
 
 list-style-image: url('https://file.garden/ZYCtlG2nsi-rTEoR/spinstar.gif');
  
}

img[src="https://static.spacehey.net/icons/new.png"] {

  display: none;

}
</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 73 comments ( View all | Add Comment )

Jouska Yuugen	1713039411 USING!! Report Comment
⸝⸝ ꒰ Angel Food 🍒ㆍ₊⊹	1712717475 u shld make a pink + green ghibli layout :3 Report Comment
Clementine	1712465672 using!!! Report Comment
jade ya!	1711796431 using Report Comment
Xenobiology	1711558322 Using! :D Report Comment
veni	1711246174 using <3 Report Comment
gigi (or mae !)	1710985025 usingggg Report Comment
☆samu{huo huo}☆	1709605362 using !!!! Report Comment
Rex ><	1709254702 Using! Report Comment
Ethan!	1709190155 using!! Report Comment
Roran	1708951744 using! changed some stuff to percentage of screen rather than pixels because is didn't fit, also I added some music :)) great design! Report Comment
anisha ୨୧	1708781634 using! Report Comment
mimi	1708614153 Using Report Comment
mimi	1708614151 Using Report Comment
neptune	1708463733 using Report Comment
Yves	1708263989 using! Report Comment
Carequinhadokurapika	1708222160 Usando!! <3 Report Comment
sy	1707657908 usinggg Report Comment
lee!!!	1707650686 using Report Comment
ANALOG666	1707364184 thank yew darron Report Comment