Kiki's Delivery Layout

Tags: kiki's delivery service, kiki, studio ghibli, blue, anime, cute, heytony

Description:

I made this with love for my favorite Studio Ghibli movie. and i LOVE how it came out, Special thanks to Cory for showing us how to add a FILM GRAIN overlay! Anyway i loved putting this, and i hope you all like it as well! Don't forget to add me! I'd LOVE to see it on your page! (Includes automatic comments scrollbox)!!

Preview:

click on the image for a larger preview

Code:

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

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur844.cur), auto !important;}</style>
<a href="https://www.cursors-4u.com/cursor/2011/11/11/cute-red-bow-tie-pointer.html" target="_blank" title="Cute Red Bow Tie Pointer">
    <img src="https://cur.cursors-4u.net/cursor.png" alt="Cute Red Bow Tie Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>
<style>
@import url('https://fonts.googleapis.com/css2?family=Benne&family=Roboto&display=swap');
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Benne&family=Roboto&display=swap');
</style>
<style>
 
/*  Kiki's Delivery Service
            by TonyTheTiger (spacehey.com/heytony) */
 
/*  to start off, this part bellow will control the base of your profile.
P.S. backround attachment is the one that makes your background either stay put
or scroll with you. use "fixed" or "scroll" for that part. */
 
    html:before {
         animation: grain 5s steps(10) infinite;
          background-image: url('https://i.ytimg.com/vi/FNs4RDi_8eA/maxresdefault.jpg');
          content: "";
          height: 300%;
          left: -50%;
          opacity:.2;
          position: fixed;
          top: -110%;
          width: 300%;
         pointer-events:none;
    }
    @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-color: rgb(13,11,88);
        background-image: url('https://i.pinimg.com/originals/fd/b1/37/fdb1379da1ef7a5d521458cacdeab7b4.jpg');
        background-size: 165%;
        background-position: top right;
        background-repeat: repeat;
        background-attachment: fixed;
    }
    Main {
        Background-color: rgba(13,11,88,0.5);
    }
    nav a:hover{
        color: grey!important;
        text-decoration: underline;
    }
    nav .top {
        background-color: rgba(12,11,13,.5);
    }
    nav .links {
        background: rgba(36,36,200,.5);
        padding: 3.5px 16px 5.5px 16px;
    }
    nav .links a { 
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
    }
    nav .links a:hover {
        color: ;
        text-decoration: ;
    }
    footer {
        font-family: 'Roboto', sans-serif;
        background-color: rgba(12,11,13,.5);
        margin: 0px;
        background-image: url('');
        background-position: ;
        background-attachment: ;
        background-repeat: ;
    }
    body, div {
        font-family: 'Roboto', sans-serif;
        font-size:  14px;
        color: #dadada;
        font-weight: ;
        font-style: ;
        text-decoration: none;
    }
    
 
/*  bellow this you can change the left side of your profile,
including the intrerests details' table, but only the heading! */  
    
    .profile h1 {
        font-family: 'Benne', serif;
        font-size: 26px;
        text-align: center;
        background: rgba(12,11,13,.5);
        color:  white;
        border-radius: 100px;
        
    }
    .online {
        color: skyblue!important;
    }
    .online img,
    .offline img {
        display: none;
    }
    .online:before {
        content: "💙";
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(1.0,0,0,1.0);
        animation-duration: 1s;
    }
    .blog-preview {
        text-align: center;
        color: white!important;
        background: transparent;
        border-radius: 15px;
        border: dotted  rgba(12,11,13,.5);
    }
    .profile-pic img {
            border-radius: 15px;
        }
    .friends img {
        border-radius: 5px;
    }
    .mood {
        color: white!important;
    }
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        background: rgba(12,11,13,.5);
        width: 100%;
        border: none;
        border-radius: 15px;
        margin: 10px 0;
    }
    .url-info {
        text-align: center;
        color: white!important;
    }
    .profile .contact {
        background-image: url('https://i.imgur.com/TeTbG1u.png');
        background-size: contain;
        background-position: right 60% top 5%;
        background-repeat: no-repeat;
        background-attachment: scroll;
        border: none;
    }
    .profile .contact .heading,
    .profile .table-section .heading,
    .home-actions .heading {
        font-family: 'Benne', serif;
        font-size: 16px;
        text-align: center;
        background: rgba(36,36,200,.5);
        background-image: url('https://media4.giphy.com/media/3o7GVDAkLp4cEMbzwc/giphy.gif');
        background-position: center;
        background-size: cover;
        color: ;
        padding: 2px 7px;
    }
    .details-table td {
        background: rgba(36,36,200,.5);
        vertical-align: top;
        border-radius: 5px;
    }
    .details-table td:first-child {
        text-align: center;
        background: transparent;
        color: white!important;
        font-weight: bold;
        width: 33%;
        border-radius: 5px;
    }
    
/*  this is the part where you tweak the right side of your profile */  
    
    .profile .blurbs {
        background: rgba(12,11,13,.5);
        background-image: url('https://i.imgur.com/jkxy59R.png');
        background-repeat: no-repeat;
        background-attachment:  scroll;
        background-size:  100%;
        background-position: right  70% top 1%;
        margin: 20px 0px;
        border: none;
        border-radius: 15px;
    }
    .profile .friends {
        background: rgba(12,11,13,.5);
        background-image: url('');
        border-radius: 15px;
        border: none;
    }
    .profile .blurbs .heading {
        font-family: 'Benne', serif;
        font-size: 16px;
        background: rgba(36,36,200,.5);
        background-image: url('https://media4.giphy.com/media/3o7GVDAkLp4cEMbzwc/giphy.gif');
        background-position: center;
        background-size: cover;
        text-align: center;
        color: white!important;
    }
    .profile .friends .heading {
        font-family: 'Benne', serif;
        font-size: 16px;
        background: rgba(36,36,200,.5);
        background-image: url('https://media4.giphy.com/media/3o7GVDAkLp4cEMbzwc/giphy.gif');
        background-position: center;
        background-size: cover;
        text-align: center;
        color: white!important;
    }
    .profile .blurbs .section h4 {
        margin: 14px;
        color:  white;
        font-weight: bold;
    }
    .profile .friends .person p {
        color: white;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
    }
    .count {
        color: skyblue!important;
    }
    .comments-table {
        display: block;
        height: 300px;
        overflow-y: auto;
    }
    .comments-table,
    .music-table{
        color: white!important;
        border: none;
        border-radius: 15px;
    }
    .comments-table td,
    .music-table td {
        background: rgba(36,36,200,.5);
        background-image: url('https://media4.giphy.com/media/3o7GVDAkLp4cEMbzwc/giphy.gif');
        background-position: center;
        background-size: cover;
        vertical-align: top;
        position: relative;
        border-radius: 15px;
    }
    .comments-table td:first-child,
    .music-table td:first-child {
        background: rgba(36,36,200,.3);
        text-align: center;
        font-weight: bold;
        width: 38%;
        border-radius: 15px;
    }
    
    
/*  this is the part you can change how the links look */ 
    
    a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover,
    a.man:link, a.man:active, a.man:visited, a.man:hover,
    a, a:link, a:active, a:visited, a:hover,
    a.navbar:link, a.navbar:active, a.navbar:visited, a.visited:hover,
    a.text:link, a.text:active, a.text:visited, a.text:hover,
    a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited,
    a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited,
    a.redlink:hover {
        color: skyblue;
        font-weight: bold;
        font-style: normal;
        text-decoration: none;
    }
    a.navbar:hover, a.man:hover, a:hover {
        color: white!important;
        font-weight: ;
        font-style: italic;
        text-decoration: underline;
    }
 
 
/*  Hope these comments helped you out!
Special thanks to Cory (spacehey.com/cory) and Katie (spacehey.com/fighttheducks) */
 
</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 28 comments ( View all | Add Comment )

Rai	1745195679 Usingg♡ Report Comment
K✭zei.	1744630142 usinggg Report Comment
Lynezoca	1743638283 USINGGG ! Report Comment
jinsei	1742725292 USING!!!TSYMMM Report Comment
Lilika y0.uth da silva	1741029816 Usando Report Comment
Lilika y0.uth da silva	1741029815 Usando Report Comment
⋆ ˚｡⋆୨୧⋆ ˚｡⋆	1738947034 using Report Comment
⋆ ˚｡⋆୨୧⋆ ˚｡⋆	1738947034 using Report Comment
أروى	1738505506 usingg Report Comment
୨ cre ༘⋆ lulu ৎ	1736330198 using :3 Report Comment
Sarah ྀིྀི	1736087316 Using ྀིྀི Report Comment
oly	1726737876 usuinggg <333 Report Comment
submarine	1721337654 using :) Report Comment
submarine	1721337654 using :) Report Comment
초이 유노	1717919566 using !! Report Comment
michuch	1717910134 usando!! <<3 Report Comment
✮𐌺𐌹𐍄𐍄𐍅 ↴✭	1714131716 usingg!! thxx Report Comment
Andreas	1710347827 using! thank you! :) Report Comment
realalienfromspace	1703062866 using! Report Comment
ray [mars]	1694050733 using ! so amazing Report Comment