Titanic Layout.

Tags: titanic
Description:

This layout is an Titanic layout remembering of all the lost souls if you use please comment "using" This layout is based off Titanic and all lost souls and it 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=28890) -->

<style>
.logo {
content:url("https://i.imgur.com/PJO3AJC.png");
}
</style>



<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.imgur.com/oh7jdpk.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>




<style>* {cursor: url(https://cur.cursors-4u.net/people/peo-1/peo4.ani), url('https://i.imgur.com/Vpo3zA8.png'), auto !important;}</style> 


<style>
table, th, td {
  border: 1px solid darkbrown;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
td {
  text-align: center;
}
</style>


<style>
main:before {
width: 100%;
height:300px;
display: block;
content: "";
background-image: url('https://i.imgur.com/yzUJ1T3.gif');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
</style>




<style>
    table.details-table{
        
border: 0px solid black !important;   
        
    }
    .profile .details-table td{

border: 0px solid black !important;   

    }
</style>


<style>
    .general-about{
        
border: 0px solid black !important;   
        
    }
</style>


<style>

    .contact{
        
border: 0px solid black !important;   
        
    }
</style>


<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
td {
  text-align: center;
}
</style>

 <style>
 .blurbs .section h4{display: none !important;}
</style>
<style>
a.next{display: none !important;}

footer {background:none !important; line-height:0px !important;} footer ul li a {color: #000000 !important;}
</style>
<style>

.details-table td:first-child
{display:none;}
</style>

<style>
.w-40 > p{display:none!important;}
.online{color: green;!important;}
.url-info{display: none!important;}
.blurbs{margin-top:10px !important;}
.blurbs .inner .section:nth-child(1) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.online img {
display: none;
.online{display:none!important;}
.online img{display:none!important;}

</style>

<style>.blog-preview{display: none !important;}
.heading{display: none !important;}</style>


<style>
.table-section:last-of-type {
display: none;
}
</style>

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

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

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




<style>
.profile-info {
display:none;
}</style>











<style>
main{background-color:#49372b; !important;}
</style>


<style>
*, p, a, form, li, .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
   font-family: verdana !important; 
   font-size: 10px !important; 
   color: #cca518!important; 
   text-shadow: none !important; 
   letter-spacing: 1px;
}
body {
   background-image: url(https://i.imgur.com/oeUc2kv.png);
}
.top, .links, .heading, footer, button {
   background-color: #000000 !important;
}
h1 {
   font-family: Times New!important; 
   font-size: 18px !important;
}
h4 {
   color: #cca518 !important;
}
.contact, .url-info, .table-section, .profile-info {
   border-color: #000000!important;
}
td {
   background-color: black!important;
}
input, button:not(.logout-btn) {
   border: 0px groove #000000 !important;
}
.pfp-fallback, .row.profile {
   border: 0px dotted #000000!important;
}
.logo-fallback {
   height: 38px !important;
}
</style>



<style>
table.comments-table{

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

}
</style>








<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/PM6MPOE.gif" alt=""/></div></a>


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



 <div style="float:  ; &#10;max-height: 500px; &#10;position: fixed; &#10;right:0px; &#10;top: 180px; &#10;z-index: 600;"><img src="https://i.imgur.com/lc7iGf5.png" width="480" height="680"/></div>


<div class="chr"></div>
<style>
div.chr {
background: url(https://i.imgur.com/qzHGjfD.png);
background-size: 100%!important;
position: fixed;
left: 200px;
bottom: 0.0px;
height: 230px;
width:300px;
z-index: 100;
opacity: 100%;
background-blend-mode: overlay;
}"
</style>


<style>



/*Interests Scrollbox*/
   



::-webkit-scrollbar
{
  width: 10px;
}

::-webkit-scrollbar-button:start {
    background-color: #cca518;
}

::-webkit-scrollbar-button:end {
    background-color: #cca518;
}

::-webkit-scrollbar-thumb
{
  background-color: #cca518;
  border-radius: 0px;
}
/*Customizes color of Handle hover*/
::-webkit-scrollbar-thumb:hover {
  background: #000000;
}  
  
/*Customizes color of Track */
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px #000000;
  background-color: #000000
  border-radius: 0px;
}


.
}


}

</style>


<style>
main{background-color:#000000; !important;}
</style>










<iframe width="0" height="0" src="https://www.youtube.com/embed/oJEol-Td_XA?&;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 0 of 0 comments ( View all | Add Comment )