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

ezekial	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
Koneo!!	1714131716 usingg!! thxx Report Comment
Andreas	1710347827 using! thank you! :) Report Comment
neon--dust	1703062866 using! Report Comment
ray [mars]	1694050733 using ! so amazing Report Comment
rj8ne	1690811079 using it's really pretty Report Comment glad u like it! by TonyTheTiger🐯; 1691110685; Report
Raven/Luca	1679911564 using!! this is so calming <3 Report Comment RIGTH! oh sorry for screaming by TonyTheTiger🐯; 1689385716; Report
☽ Lady Loki ☾	1637453193 I just found this and im in love with the layout. Report Comment its my fav one ive designed! thanks! by TonyTheTiger🐯; 1689385689; Report
Allison	1614703385 Love this! Report Comment It looks great as you profile! ;) haha thanks! by TonyTheTiger🐯; 1614709167; Report
Brittney	1614656347 My favorite movie! I even have my own Jiji :) Report Comment Jiji is SO CUTE! Thanks for the compliment! by TonyTheTiger🐯; 1614709129; Report
lsdphoebe	1614283580 this is super cute ty!! Report Comment thanks!!! :) by TonyTheTiger🐯; 1614312370; Report
TonyTheTiger🐯	1613434523 Okay i updated the font, so its a little brighter and legible now :) Report Comment
TonyTheTiger🐯	1613422819 Slight Update: i changed the background Image from no-repeat to repeat, so that it doesn't break on mobile. also as an added bonus the background color is now "rgb(13,11,88)" Report Comment