alastor layout

Tags: hazbin hotel, hazbinhotel, hazbin, alastor, gif

Description:

this layout comes with an animated pfp, animated loading screen and static background. thanks to my friend for letting me use their profile as an example. credit isnt needed but a comment is appreciated! <3

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Shadow the silly (Angel) (https://layouts.spacehey.com/layout?id=97767) -->

about me goes here! (remove this text)


<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://i.pinimg.com/originals/0c/fd/0d/0cfd0dddd3b4946fd6fcbc72b5020a1f.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.pinimg.com/originals/e5/4b/5b/e54b5b392c73ba5dab7d23c508f10491.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>

<style>
    body {
        background:url(https://images3.alphacoders.com/128/1284583.jpg);
    }
</style>
<style>
    .profile {
        background:black;
    }
</style>
<style>
    .profile .blurbs .heading,
    .profile .friends .heading {
        background-color:#EE0204;
    }
</style>
<style>
 .profile .contact .heading,
 .profile .table-section .heading {
     background-color:black;
 }
</style>
<style>
 .profile .contact,
 .profile .table-section {
     border-color:black;
 }
</style>
<style>
main .left {
    background-color:#EE0204 ;
}
</style>
<style>
.profile .url-info{
    border-color: black;
}
</style>
<style>
.profile .contact {
    border-color: black;
}
</style>
<style>
nav .top {
    background-color:black;
}
</style>
<style>
    ..profile .table-section .heading {
        border-color:red;
    }
</style>
<style>
.details-table td * {
        background:white;
    }
</style>
<style>
    .profile .friends .heading h4 {
        color:black;
    }
</style>
<style>
    nav .links {
        background-color:#EE0204;
    }
</style>
<style>
    .profile .blurbs .heading h4 {
        color:black;
    }
</style>
<style>
    .details-table td {
        background:white;
    }
</style>
<style>
    .details-table td * {
        border-color: white;
    }
</style>
<style>
    .details-table td * {
        color: black;
    }
</style>
<style>
    .profile .friends .inner {
        color:#EE0204;
    }
</style>
<style>
    .profile .blurbs .inner {
        color:#EE0204;
    }
</style>
<style>
  
</style>
<style>
    .profile .blurbs .inner {
        color:#EE0204;
    }
</style>
<style>
    h4 {
        color:;
    }
</style>
<style>
    div .blog-preview {
        background:#EE0204;
    }
</style>
<style>
    a {
        color:white;
    }
</style>
<style>
    .profile .contact .heading {
        color:#EE0204;
    }
</style>
<style>
    .profile .table-section .heading {
        color:#EE0204;
    }
</style>
<style>
    .comments-table td:first-child {
        background:url();
    }
</style>
<style>
    .comments-table td {
        background:black;
    }
</style>
<style>
    .comments-table td {
        border-color:#EE0204;
    }
</style>
<style>
    table.comments-table {
        border-color:#EE0204;
    }
</style>
<style>
    footer {
        background:black;
    }
</style>
<style>
    footer {
        color:red;
</style>
<style> 
.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "things i like and dislike"; font-size:.8rem; } 
</style>
<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "people who made a deal"; font-size:.8rem; font-weight:bold; color:black; }
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "comments"; font-size:.8rem; font-weight:bold; } </style>
<style>
    .details-table td:first-child {
        background-color:white;
    }
</style>
<style>
   .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "other stuff"; font-size:.8rem; font-weight:bold; } </style>

<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "make a deal"; font-size:.8rem; font-weight:bold; }
</style>
<style> 
.profile .table-section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "things i like and dislike"; font-size:.8rem; } 
</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "about me"; font-size:.8rem; font-weight:bold; color:black; }
</style>
<iframe style="opacity:0;position:absolute;pointer-events:none;" frameborder="no" src="https://www.youtube.com/embed/videoseries?list=[https://www.youtube.com/playlist?list=PLQuPARCxIvcIdFyIvrQaxdn9MX-b5y90L];&autoplay=1" allowfullscreen=""></iframe>
<style>.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: "🦌"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "🦌"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🦌"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "️🦌"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "🦌"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🦌"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "🦌x  "
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🦌"
}
</style>
<style>
    #music {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 0px;
        transition: 0.5s width;
    }

    #music:hover {
        width: 0px;
    }
</style>

<style>

body {cursor: url('https://cdn.custom-cursor.com/db/4347/arrow2509.png'), auto; }
</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 14 of 14 comments ( View all | Add Comment )

⋆🐾° ᴍᴇʀᴄ ⋆. 𐙚 ˚	1771101118 using tysm Report Comment
Orion	1766404675 usinggg thxx :P Report Comment
wheresmoxxie	1729734461 using!!! Report Comment
ᨳິ ׂ 𓈒 𝓼𝓸𝓾𝓵 ྀ ͚	1726974182 using!! Report Comment
Alto Niccals	1721843009 USING >< Report Comment
Azu	1719292901 Def using! Report Comment
Two	1713756381 it's awesome tysm!! <3 Report Comment
Vaininmourningher	1711229061 defently using it thanks !! Report Comment
Alastor	1709390726 Using this rn Report Comment
Bun bun	1707188183 omg I love it Report Comment
Crystal	1706382161 This looks so cool!! 💗💗 Report Comment
ANGEL !!	1706287593 could u make a angel dust 1^0^ Report Comment
Silver.Raven	1706228316 This is so cool dude!! Report Comment
Sentry Man	1706211353 Can you make one of Husk? Report Comment