Okami Layout

Tags: okami, game
Description:

This is my old layout, based on the game Okami. A lot of the parts within are from other users, although I sadly do not remember them all (most of the credits are still there I believe). Feel free to use this, but just be sure to say you will be down in the comments so I can meet fellow Okami fans. Au revoir baby!!! (PLEASE NOTE THAT PARTS OF THIS MAY BE A BIT BROKEN!!!)
Code:

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

<style>
  
  
    .profile{
        
    direction: rtl;
    
    }
    .blurbs{
    
    direction: ltr;
        
    }
    .blog-preview{
        
    direction: ltr;
        
    }
    .friends{
    
    direction: ltr;
        
    }
    .general-info{
        
    direction: ltr;
        
    }
    .contact{
        
    direction: ltr;
    
    }
    .url-info{
        
    direction: ltr;
        
    }
    .details-table{
        
    direction: ltr;
        
    }
    .profile .table-section .heading{
    
    direction: ltr;
        
    }
    .details p{

    direction: ltr;

   }
   .mood{

       direction: ltr;

  
   }
main {
overflow-y: auto; 
overflow-x: none;
height: 600px;

}
.container {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}



.container {

animation: float 4s;

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>

<style>

/*PASTE SCROLLBAR CODE HERE*/

body{
background-color: #514739;
}

main{
background-image: url('https://www.artofokami.com/images/backgrounds/backgrounds_9.jpg');
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: #b4aca2;
opacity: 0.85;
}

.contact, .url-info, .table-section, .blurbs, .friends, .comments {
background-image: url('https://www.artofokami.com/images/backgrounds/backgrounds_13.jpg');
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: #b4aca2;
opacity: 0.95;
}

span[itemprop='name'] {
color: #030303;
font-size: 18pt;
background: transparent!important;
text-align: center;
  

}

h4 {
color: #263627;
font-size: 10pt;
font-family: Monospace;
    
}

.section h4, .details-table td:first-child {
color: #58655a!important;
font-size: 1pt;
font-style: italic;
font-family: Serif;
}

a, .count {
color: #334d34;
font-size: 8pt;
font-family: Monospace;
  
}

a:hover {
color: #798b7a;
font-size: 10pt;
text-decoration: underline;
font-family: Monospace;
 
}

body,main {
color: #000000;
font-size: 10pt;
font-family: Monospace;
text-align: center;
}

.details-table td, .details-table td:first-child{
background: none!important;
}
.heading{



}
.comments-table td{
background: none!important;
}

<!-- (c) Layout created by CORE.wav (https://layouts.spacehey.com/layout?id=31067) -->
 
</style>

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

<style>



    :root {
         background: transparent;


    }
    body
        {background: url("https://www.artofokami.com/images/wallpapers/okami_wp4_2560.jpg")
        no-repeat fixed; background-size: cover;

     }
    .blog-preview p {
        background-color: none;
        padding: 5px 10px;
        border-radius: 10px;
        color: black;
    }
  .blog-preview p a{
        color: #6e7c63!important;
    
    }
    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: white!important;
    }
    nav {
         background: transparent;
  
  }
    }
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    table.details-table {
        border-collapse: collapse;
    }
    table.details-table td {
        background-color: transparent !important;
    }
    .profile-pic {
        
        overflow: hidden;
    }
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #2a2a2a !important;
        border-bottom: 2px solid;
  background: transparent;

    }
    .container {
        border-radius: 0 0 15px 15px;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
    }
    footer {
         background: transparent;
    }
    table.comments-table td {
        background-color: rgba(227, 217, 198, 0.50) !important;
    }
    .comments-table td:first-child img {
        width: 80px;
        border-radius: 1px;
    }
   .profile .friends .person img {
        
    }
    .friends-grid img{
        opacity(50%) 
        border-radius: var(--curve) 
        filter: color:;
    .blog-preview p {
        font-size: 1.4rem;
    }
    a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
</style>
<style>
  .friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img
{
border: 0px dotted gray !important;
outline: none !important;
}

</style>


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

<style>
       @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800;900&family=Darumadrop+One&display=swap');
</style>
<style>
        .grid-container {
            display: grid;
            width: 100%;
            grid-template-columns: 100px 100px 100px;
            image-rendering: crisp;
        }
</style>
<style>
  
  
<!-- (c) Layout created by Groonklie (https://layouts.spacehey.com/layout?id=30566) -->

<style>
       @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800;900&family=Darumadrop+One&display=swap');
</style>
<style>
        .grid-container {
            display: grid;
            width: 100%;
            grid-template-columns: 100px 100px 100px;
            image-rendering: crisp;
        }
</style>

    
    

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

<!-- REPLACE THE URL WITH YOUR UPLOADED GIF --> 
<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.imgur.com/3tA0Lli.gif"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 
  
    

  
  <style>
    
a:hover, nav .links a:hover {
    color: #ccc;
    text-decoration: none;
}
nav .top {
    align-items: center;
    
    }
nav .top div {
    vertical-align: inherit;
}
nav .top, nav .links {
    background: transparent;
    font-size: 6pt;
    
  </style>
  
  
  <!-- (c) Layout created by @ . . . BLAKE (https://layouts.spacehey.com/layout?id=29282) -->

<style>
::-webkit-scrollbar {
width: 16px
}

::-webkit-scrollbar:horizontal {
height: 17px
}

::-webkit-scrollbar-corner {
background: #eee
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
}

::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}

::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}

::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}

::-webkit-scrollbar-button:vertical {
height: 17px
}

::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

</style>
  
  <style>
    .mood, .contact, .blog-preview {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}

.mood, .blog-preview {
    text-align: center;
    border: var(--borders) !important;
    
    }
    
  .heading {
    background: transparent!important;
    padding-bottom: 2px !important;
    background-size: 100%100%!important;
    text-align: center;
    border: none!important;
}
    
    </style>
  
  <style>
    main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url('https://www.artofokami.com/images/wallpapers/wallpaper6_1024x768.jpg');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
https://www.artofokami.com/images/wallpapers/wallpaper6_1024x768.jpgore{
		height: 200px;
	}
}

</style>
  
  <style>
    body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://www.fightersgeneration.com/nf7/char/amaterasu-okami-run.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 2s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
    
  </style>
  
  <!-- (c) Layout created by Katie (https://layouts.spacehey.com/layout?id=2587) -->




<div class="snowflakes">


  <div class="snowflake">


   🍂


  </div>


  <div class="snowflake">


  🍃


  </div>


  <div class="snowflake">


  🍂


  </div>


  <div class="snowflake">


  🌸


  </div>


  <div class="snowflake">


  🍂


  </div>


  <div class="snowflake">


  🍂


  </div>


  <div class="snowflake">


    🌸


  </div>


  <div class="snowflake">

    🥬


  </div>


  <div class="snowflake">


    🍃


  </div>


  <div class="snowflake">


    🍃


  </div>


  <div class="snowflake">


    🌿


  </div>


  <div class="snowflake">


    🍂


  </div>


</div>


<style>


/* customizable snowflake styling */


.snowflake {


  color: purple;


  font-size: 1em;


  font-family: Arial, sans-serif;


  text-shadow: 0 0 5px rgba(0,0,0,0.7);


}





@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}


</style>
  
<style>
    }
    
    .contact .inner {
        line-height: 0px;
    }
    
    .contact .inner a{
        font-weight: 2;
    }
    .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://64.media.tumblr.com/38f021d5f43e65df2856af5190cf5dfa/7e809cab86c27c80-29/s75x75_c1/857a30c14314e70cfdb83a0c6b4f3202a246097a.gifv")
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
        /* add to favorites */
        content: url("https://64.media.tumblr.com/38f021d5f43e65df2856af5190cf5dfa/7e809cab86c27c80-29/s75x75_c1/857a30c14314e70cfdb83a0c6b4f3202a246097a.gifv")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
        /* send Message */
        content: url("https://64.media.tumblr.com/38f021d5f43e65df2856af5190cf5dfa/7e809cab86c27c80-29/s75x75_c1/857a30c14314e70cfdb83a0c6b4f3202a246097a.gifv")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
        /* forward to friend */
        content: url("https://64.media.tumblr.com/38f021d5f43e65df2856af5190cf5dfa/7e809cab86c27c80-29/s75x75_c1/857a30c14314e70cfdb83a0c6b4f3202a246097a.gifv")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
        /* instant message */
        content: url("https://64.media.tumblr.com/38f021d5f43e65df2856af5190cf5dfa/7e809cab86c27c80-29/s75x75_c1/857a30c14314e70cfdb83a0c6b4f3202a246097a.gifv")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
        /* block user */
        content: url("https://64.media.tumblr.com/38f021d5f43e65df2856af5190cf5dfa/7e809cab86c27c80-29/s75x75_c1/857a30c14314e70cfdb83a0c6b4f3202a246097a.gifv")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
        /* add to group */
        content: url("https://64.media.tumblr.com/38f021d5f43e65df2856af5190cf5dfa/7e809cab86c27c80-29/s75x75_c1/857a30c14314e70cfdb83a0c6b4f3202a246097a.gifv")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
        /* report user */
        content: url("https://64.media.tumblr.com/38f021d5f43e65df2856af5190cf5dfa/7e809cab86c27c80-29/s75x75_c1/857a30c14314e70cfdb83a0c6b4f3202a246097a.gifv")
    }

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

<style>
a:hover{
 cursor: url('https://static.wikia.nocookie.net/okami/images/7/7e/Infinity_Judge_icon.png/revision/latest?cb=20201125234311'), auto !important;
}
* {
 cursor: url('https://static.wikia.nocookie.net/okami/images/7/7e/Infinity_Judge_icon.png/revision/latest?cb=20201125234311'), auto;
}
<style></style>

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

<iframe width="0" height="0" src="https://www.youtube.com/embed/AxJtXGkz794//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
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 1 of 1 comments ( View all | Add Comment )
mae	1715777866 using!! surprised to even see okami fans on here let alone a layout, i love this Report Comment