Toy Story Layout

Tags: toystory
Description:

This is a Toy Story layout if you use please comment 'Using" this is own by Ocarina Layouts
Code:

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

 <style>
html:before , body:before{
  animation: grain 8s steps(10) infinite;
  background-image: url(https://external-media.spacehey.net/media/s5BCJBXVO8W3LV-8ZYQV7G6sLAQoSl0teMFnRxN1BJwA=/https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.1;
  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%) }
}

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: consolas;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}


.col, main, footer, nav::before, nav .links, nav .top {
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, nav .links, nav .top {
animation: float 3s;
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>
img:hover , .url-info:hover , .online:hover {
  animation: shake 1s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>              


<style>
.pdg_dropdown {
    position: relative;
    display: block;
    width: 100%;
}
.pdg_dropdown .pdg_trigger{
    /* Change The Color Of The Trigger Here */
    background: PaleVioletRed;
    color: yellow;
    padding: .3em;
    display:block;
    width:100%;
    text-decoration:none;
}
.pdg_dropdown .pdg_content {
    /* Change The Color Of The Dropdown Box and Text Here */
    background: PaleVioletRed;
        color: blue;
    box-sizing:border-box;
    width: 100%;
    padding:10px;
    /* Delete The Next Two Lines If You Don't Like The Blur */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
@media (hover: hover){
    .pdg_dropdown .pdg_content {
        display: none;
        position: absolute;
        margin: auto auto;
        max-height:8rem;
        overflow-y:scroll;
    }
    .pdg_dropdown:hover .pdg_content, .pdg_dropdown:focus + .pdg_content {
        display: block;
        z-index: 100;
    }
}
</style>


<style>


nav{
background-image: url("https://i.imgur.com/OVolewz.png");
background-position: center center;
background-size: cover;
padding-top: 150px;
}


:root {--logo-blue: #093070;
--darker-blue: #fed801;
--lighter-blue: #093070;
--even-lighter-blue: #fed801;
--lightest-blue: #093070;
--dark-orange: #fed801;
--light-orange: #093070;
--even-lighter-orange: #093070;
}

.nav{background-color:var(--box_color_and_seethru); !important;}
nav ul{background:transparent!important; font-size: 8px; text-align: center;}
nav ul a img, .mood a img{display:none !important;}
.top{background:
transparent!important;background-color:rgba(0, 0, 0, 0.0); !important;}

.hr{  border: 1px solid var(--names) !important;filter: brightness(55%) !important;
}

.table {direction:Ltr;}
.table table table {direction:ltr;}

.col.w-40 {
      width: 40%;
    }

.general-about .profile-pic {
    height: 100%;
    width: 100%;
    background-color: white;
    border-radius: 0px;
    padding-top: 0%;
  }

.general-about .profile-pic img {
    max-width: 100%;
    max-height: 100%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 0px;
    display: block;
  }

.details {
    display: none!important;
    font-size: 11px;
    border-top-left-radius: 0px;
    width: 100%;
    border-top-right-radius: 0px;
    background-color: white;
    color: black;
    margin-bottom: -16px;
  }

.mood {
    font-size: 11px;
    text-align: center;
    direction: ltr;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;</style>




 <style>
.Ocarina Layouts !! { BACKGROUND P R O P E R T I E S }
body {
background:url(https://i.imgur.com/xSUbE1Z.png) #093070;
background-position:bottom right;
background-attachment:fixed;
background-repeat:no-repeat;
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/x0Aq9ZySKjg/?&;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>







<a href="https://spacehey.com/ocarina" target="_blank"><div style="position:fixed; top:0; left: 0; z-index: 9; width: 160px; height: 82px; filter: hue-rotate() saturate();"><img src="https://i.imgur.com/70zgNDY.png" alt=""/></div></a>


<style>
    footer{
        
    background-color: COLOR !important;
    background-image: url('https://i.imgur.com/nyn4WJe.png') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
        
    }
</style>


<style>
             ::-webkit-scrollbar {
    width: 3px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: rgba(80, 80, 80);
    }

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    }
</style>



<style>
table.comments-table{

display: block;
height: 150px!important;
overflow-y: scroll;

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