Titanic Layout

Tags: titanic
Description:

This is an Titanic Layout if you use please comment saying "using" This Layout is own by Ocarina Layouts
Preview:

click on the image for a larger preview
Code:

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

 <style>


  }
.profile {
    background-color: #1f1712;
    color: #202f40; /*your text color for most of the page - this is the complimentary color for the magenta that you chose. Feel free to change it*/
    
}

/*these are your various headers, I have used yellow to show you which text is affected by this code. Feel free to change them to what you prefer. If you want individual headers to be different colors then you have to write each one in a separate piece of code.*/
h3 , h4, h5, .url-info b {
    color: #9a815c;  
}

/*This is the color of the links on your page. I have set them to green so you can see what they are. Feel free to change them to your preferred color*/
a {
     color: #9a815c;
}

/* color of the normal text on your page. I have set this to purple so that you know which text is affected. Feel free to change it to what you prefer*/
p, h2 {
     color: #9a815c;
}
/* color of friend's names in the comments, number of friends and your name. This I set to orange */ 
h1, .count, .friends a p {
     color: #335173;
} 


</style>


 <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/dDdglyH.png");
background-position: center center;
background-size: cover;
padding-top: 150px;
}


:root {--logo-blue: #202f40;
--darker-blue: #9a815c;
--lighter-blue: #335173;
--even-lighter-blue: #335173;
--lightest-blue: #223b57;
--dark-orange: #214267;
--light-orange: #335173;
--even-lighter-orange: #335173;
}

.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/oRj8a2n.png) #202f40;
background-position:bottom right;
background-attachment:fixed;
background-repeat:no-repeat;
</style>

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