Dreams Of An Insomniac layout. (DOAI)

Tags: orange, dark, 90s, horror, analog horror, arg, vhs
Description:

doai is by Pastra on youtube !
Preview:

click on the image for a larger preview
Code:

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

<style>
    body{
        
    background-color: COLOR !important;
    background-image: url('https://i.gifer.com/embedded/download/Q8k5.gif') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;


background-size: cover


        
    }
</style>


<style>
    main{
     
background-color: COLOR !important;
    background-image: url('https://cdn.discordapp.com/attachments/975282287375683587/1115905151132237884/image.png') !important;
    background-attachment: SCROLL !important;
    background-repeat: REPEAT !important;
    background-position: CENTER !important;
    font-family: monospace;
    color: #851B01 !important




        
    }
</style>

<style>
    .top{
        
    background-color: COLOR !important;
    background-image: url('https://cdn.discordapp.com/attachments/975282287375683587/1115905151132237884/image.png') !important;
    background-attachment: SCROLL !important;
    background-repeat: REPEAT !important;
    background-position: CENTER !important;
color: #851B01 !important





        
    }
</style>

<style>
    .links{
        
    background-color: #C96B4F !important;
    background-image: url('https://cdn.discordapp.com/attachments/975282287375683587/1115905151132237884/image.png') !important;
    background-attachment: SCROLL !important;
    background-repeat: REPEAT !important;
    background-position: CENTER !important;
color: #851B01 !important




        
    }
</style>

<style>
.online{

content: url("https://watermelon.crd.co/assets/images/gallery02/a2c9b194.gif?v=d05b6a2d") !important;

}
</style>

<style>
    table.details-table{
        
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
color: #851B01 !important



        
    }
    .profile .details-table td{
    
border: 2px solid #851B01 !important;    
    background-color: #C96B4F !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
color: #851B01 !important
        
    }
</style>

<style>
.online{
font-size:0 !important;
}
.online:before{
color: #851B01;
content: ":)";
font-size:.8rem;
}
.online:after{
color: #851B01;
content: "Alien Online";
font-size:.8rem;
font-weight:bold;
animation: blinker 1s linear infinite;
}
.online{
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>

<style>
    footer{
        
    background-color: COLOR !important;
    background-image: url('https://media.discordapp.net/attachments/975282287375683587/1115905151132237884/image.png') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
color: #851B01 !important
        
    }
</style>

<style>
    .contact .heading{
        
    background-color: #851B01 !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;
color: #B78F5C !important


    }
</style>

<style>
    .table-section .heading{
        
    background-color: #851B01 !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;
color: #B78F5C !important
    
    }
</style>

<style>
    .blog-preview h4{
        
    background-color: #851B01;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;
color: #B78F5C !important

    }
</style>

<style>
    .blurbs .heading{
        
    background-color: #851B01 !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;
color: #B78F5C !important

    }
</style>

<style>
    .blog-preview{
        
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
color: #851B01 !important
        
    }
</style>
<style>
    .blurbs{
    
    color: #851B01 !important;
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;

</style>

<style>
.blurbs .inner .section:nth-child(1) h4{ font-size:0rem; }
.blurbs .inner .section:nth-child(1) h4:before{ content: "About me:"; font-size:.7rem;color:#851B01 }
</style>

<style>
.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "Who I'd like to meet:"; font-size:.7rem;color:#851B01 }
</style>


<style>
    .friends .heading{
        
    background-color: #851B01 !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;
color: #B78F5C !important

    }
</style>

<style>
    .logo{
        
content: url(picture url here);

width: 165px !important;

height: 42px !important;
        
    }
</style>

<style>
    a{
        
    color: #441711 !important;
        
    }
    a:hover{
        
    color: #684036 !important;
        
    }
    a:visited{
        
    color: #441711 !important;
        
    }
    .top a{

    color: #441711 !important;

    }
    .top a:hover{

    color: #684036 !important;

    }
    .top a:visited{

    color: #441711 !important;

    }
    .links a{
    
    color: #441711 !important;
    
    }
    .links a:hover{

    color: #684036 !important;

    }
    .links a:visited{

    color: #441711 !important;

   }
    .friends-grid p{
        
    color: #441711 !important;
        
    }
    footer .links a{

    color: #441711 !important;

   }
    footer .links a:hover{

    color: #684036 !important;

   }
    footer .links a:visited{

    color: #441711 !important;

   }
</style>

<style>
    .top{
        
    color: #851B01;
        
    }    
    main{

    color: #851B01 !important;
        
    }
    footer{
        
    color: #851B01;
        
    }
</style>

<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/d2Np1d2/static.gif);
  background-size: 200px !important;
  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%) }
}
</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.gifer.com/embedded/download/Q8k5.gif');
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>
.profile-pic {
    background: #B78F5C;
    padding: 5px 5px 196px;
    box-shadow: 3px 3px 10px #B78F5C;
    height: ;
    transform: rotate(deg); 
    filter: grayscale(8%);
}
</style>

<style>
    .container{
        
    border: 6px SOLID #851B01;
        
    }
</style>

<style>

body  
    {
--lighter-blue: none;
--lightest-blue: none;


}

</style>

<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://pbs.twimg.com/media/FfXYAosWIAI2TqX?format=jpg&name=small') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 320px;
    width: 300px;
    z-index: 1000;
    opacity: 1;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>

<style>
.contact .inner a img {margin-right: -2px;
        font-size: 0;}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
    /* add to friends */
    content: url("https://gifs.crd.co/assets/images/gallery25/2aeacef6.png?v=ef433a6f");
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
    /* add to favorites */
    content: url("https://gifs.crd.co/assets/images/gallery25/093c8ae3.png?v=ef433a6f")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
    /* send Message */
    content: url("https://gifs.crd.co/assets/images/gallery25/ce64335d.gif?v=ef433a6f")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
    /* forward to friend */
    content: url("https://pixel.crd.co/assets/images/gallery06/f7f3012a.gif?v=ee6d040c")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
    /* instant message */
    content: url("http://i1207.photobucket.com/albums/bb478/xxlight/pixels/th_107.gif")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* block user */
    content: url("http://i1207.photobucket.com/albums/bb478/xxlight/pixels/th_111.gif")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    /* add to group */
    content: url("https://64.media.tumblr.com/tumblr_ltj2brkK3h1qcfn0j.gif")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    /* report user */
    content: url("https://64.media.tumblr.com/tumblr_lt9nl3n7Tf1qcfn0j.gif")
    } 
</style>

<marquee behavior="scroll" direction="left">This place will be your tomb.</marquee>
<marquee behavior="scroll" direction="left">Beware of the Smiling Snatcher.</marquee>
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 2 of 2 comments ( View all | Add Comment )
charli
1686389812
looks super great!!
Report Comment
thank you !!!
by octo☆bagel; 1686391441; Report
using !
by angel ☆; 1686431106; Report
awesome !!!! ty !!!
by octo☆bagel; 1686452171; Report