Sir Pentious themed profile + Spinning profile picture + Music

Tags: hazbin hotel, layout, sir pentious
Description:

Comes with spinning profile picture and "It Starts With Sorry - Hazbin Hotel" playing Feel free to change anything you feel like, no need to credit
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by ‧˚꒰SOPHIE꒱༘⋆ (https://layouts.spacehey.com/layout?id=102641) -->

<style>

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
  content: "☆";
}


</style>


<style>
.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/ry03mrP3/2024-01-28-0lg-Kleki.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>
<style>

.comments-table td:first-child img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/ry03mrP3/2024-01-28-0lg-Kleki.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>


<style>

a:hover, a:active, a, p, nav label, .section {

    font-family: var(--mainfont) !important;

}

h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B {

    font-family: "   "

}

:root { --mainfont: "Poltawski Nowy" }

</style>


<style>
/*flip profile*/
.profile{
direction: rtl;

}

.blurbs, .profile .table-section .heading, .blog-preview a, .friends, .general-info, .contact, .url-info, .details-table, .details p, .mood{
direction: ltr;

}

</style>


<style>
/*BODY FONT*/
   body{font-family: 'Orbitron', sans-serif;
   color: black!important;
   font-size: 90%;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #FFFFFF, 0 0 5px white}

/*HEADINGS FONT*/
h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Press Start 2P', cursive;
   font-size: 120%;
   color: #e61946 !important;
   text-shadow: 2px 2px 3px #0000, 0 0 25px #e61946, 0 0 3px black}

/*TEXT SETTINGS*/
main p{
   letter-spacing: 2px;
   font-weight: 700; 
   line-height: 1.5;
   color: white !important;
   text-shadow: 2px 2px 3px #0000, 0 0 25px #e61946, 0 0 5px #380a15}
</style>

<style>
:root{
/* [background color]: header on top */
 --logo-blue:url(https://media.discordapp.net/attachments/779568566248407053/1199356056455888896/258_sin_titulo_20240123092948.png?ex=65c23e5e&is=65afc95e&hm=efa78e119aa8a6fd33a61cdbd6dfb3d5fdbc37653c6d086066a0660461a238d0&.png);
}

nav .links {
    background-image:url(https://media.discordapp.net/attachments/779568566248407053/1199356056455888896/258_sin_titulo_20240123092948.png?ex=65c23e5e&is=65afc95e&hm=efa78e119aa8a6fd33a61cdbd6dfb3d5fdbc37653c6d086066a0660461a238d0&.png);
    padding: 3.5px 16px 5.5px 16px;
}

</style>


<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>/* Interests Table Info */
    table.details-table {border-collapse: collapse;}
    table.details-table td {background-color: #000000 !important;}
.details-table td:first-child {color: #9d2966 !important;}
</style>

<style>/* Profile Header */
	main:before {
		width: 100%;
		height: 465px;
		display: block;
		content: "";
		background-image: url('https://media1.tenor.com/m/FUzuAvsEDrUAAAAC/peeping-sir-pentious.gif');
		background-position: center center;
		background-size: cover;
</style>



<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: url("https://pixels.crd.co/assets/images/gallery37/78427698.gif?v=1987e5e0")
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	    /* add to favorites */
	    content: url("https://pixels.crd.co/assets/images/gallery37/78427698.gif?v=1987e5e0")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    /* send Message */
	    content: url("https://pixels.crd.co/assets/images/gallery37/78427698.gif?v=1987e5e0")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    /* forward to friend */
	    content: url("https://pixels.crd.co/assets/images/gallery37/78427698.gif?v=1987e5e0")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    /* instant message */
	    content: url("https://pixels.crd.co/assets/images/gallery37/78427698.gif?v=1987e5e0")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    /* block user */
	    content: url("https://pixels.crd.co/assets/images/gallery37/78427698.gif?v=1987e5e0")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	    /* add to group */
	    content: url("https://pixels.crd.co/assets/images/gallery37/78427698.gif?v=1987e5e0")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	    /* report user */
	    content: url("https://pixels.crd.co/assets/images/gallery37/78427698.gif?v=1987e5e0")
    } 

<style></style>


<style>

.friends-grid{display: none !important;}

</style>

<style>

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

}
nav .info {
background: none;
}
body{background:url("https://d3gz42uwgl1r1y.cloudfront.net/ed/edgymagpie/submission/2019/01/c45057277d80603b142f74d48b05f09b/2500x1500.jpg") no-repeat fixed; background-size:cover;
}


small {
font-size:100%;
}


main {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Black_colour.jpg/1200px-Black_colour.jpg");
border: 3px solid #e61946;
}


b {
font-size: 14px;
}


time.ago {
color: white;
}


h1{
font-size: 30px !important;
color: white;
}

.url-info{display:none !important;}

.profile .friends .inner b, .profile .friends .inner a{
color: white;
text-shadow: 3px #e61946;
}


.profile h1{
color: white !important;
font-size: 14px;
}


.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size: 14px;
}


.friends p, .friends a {
color: white;
}


p{
font-size: 16px;
}


.details-table td a {
color: white;
}


.details-table td p {
color: white;
font-size: 14px;
}

.profile .table-section .heading{
background: transparent;
}


.profile .table-section .heading h4{
color: transparent;
background: transparent;
}


.contact .heading h4{
font-size:14px;
}


.profile .contact {
  font-family: Arial, sans-serif;
background: transparent;
border: 0px solid transparent;
}


.profile .contact a{
font-size: 12px;
}


.contact .inner a img {
font-size: 0;
}

.contact .inner a img:before {
font-size: 1em;
display: block
}


.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
border: 5px solid #e61946;
}


.profile .friends .inner{
    text-align: center;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoNpH8eSO_vxyZmyiDzR2nVtFWkPF3rBIShGC6Jp9SZg&s
");
border: 3px solid #e61946;
box-shadow: 0px 0px 10px 0px pantone;
background-position: center;
}


.contact .heading h4{
display:none !important;}


.contact .heading{ font-size:14px;}


.blog-preview{
text-align: center;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoNpH8eSO_vxyZmyiDzR2nVtFWkPF3rBIShGC6Jp9SZg&s);
color: white;
border: 2px solid #e61946;
box-shadow: 0px 0px 10px 0px #e61946;
}


.contact .heading h4{
font-size:14px;
}


.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
border: 3px solid #e61946;
}


.profile .blurbs .section h4 {
text-align: center;
font-size: 14px;
color: white;
border: 3px #e61946;
}


.button {
    background: black;
    color: white;
}


.profile-info{
background: transparent;
border: 3px solid #e61946;
box-shadow: 0px 0px 15px 0px #e61946;
}


.profile-info a{
font-size: 14px;
color:white;
}


.profile-info h3{
color:white;
}


.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color:transparent;
}


.profile .blurbs .inner{
background: transparent;
box-shadow: 0px 0px 10px 0px #e61946;
border: 3px solid #e61946;
}

.profile .contact .heading, .home-actions .heading {
background-color: transparent;
color: white;
}


.online {
    margin:auto;
    content: url();
}


.icon {
        content: url();
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
}


h4 {
font-size: 14px !important;
color: white;
  font-family: Arial, sans-serif;
}


p {
  font-family: Arial, sans-serif;
color: white;
   }


   a {
font-size: 14px;
     color: white;
   }


a:hover {
     color: #e61946;
}

    .count {
        color: #e61946;
    }


.profile .friends .person p {
color: white; 
}

.profile .friends .person p:hover {
color: #e61946; 
}


.profile .table-section .details-table td {
background:url("  ");
background-image: center;
border: 3px solid #e61946;
box-shadow: 0px 0px 10px 0px #e61946;
}


.profile .friends .comments-table td {
background: black;
border: 2px solid #e61946;
position: center;
}


.profile .friends .comments-table td:first-child {
background: url(https://art.ngfiles.com/thumbnails/736000/736117_full.png?f1551804014);
}


.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
}


.comments-table td:first-child img{
border: 1px solid #e61946;

box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
}


.comment-replies{
border: 1px solid #e61946;
color: white;
}


.general-about .details p:not(.online){
color: white !important;
font-size: 14px;
  font-family: Arial, sans-serif;
}


.general-about .details a{
  font-family: Arial, sans-serif;
color: white !important;
font-size: 14px;
}


.links{
width=810px;
}


nav .links {
background: transparent;
}


nav .links a:hover {
color: #e61946;
}


nav .top label{
background: transparent;
}


nav .top label{
color: white;
}


  .search-wrapper input[type=text] {
    background: white;
  font-family: Arial, sans-serif;
    border: 3px solid white;   
  }

.profile .url-info {
border: 0px solid transparent;
color: transparent;
font-size: 0.1px;
box-shadow: 0px 0px 10px 0px #e61946;
}

.profile .table-section {
border: none;
}


.profile .url-info {
border: 0px solid transparent;
color: transparent;
font-size: 0.1px;
box-shadow: 0px 0px 10px 0px #e61946;
}

.profile .table-section {
border: none;
}


table.comments-table {
border: 0.5px solid #e61946;
background: black;
}


footer p{
color: white;
font-size: 100%;
}


footer a{
color: white;
}


footer {
color: white;
box-shadow: 0px 0px 15px 6px #e61946;
text-decoration: underline;
text-decoration-style: dotted;
background-color: #e61946;
border: 3px solid white;
}   


</style>


<style>

    .table.comments-table:{
    border-color:#e61946;}

</style>


<style>


h1{
  color: white;
  font-size: 10px;
  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, .online, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .top {
animation: float 5s;
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>
table.comments-table{
background-color:black;
display: block;
height: 300px!important;
overflow-y: scroll;
border-width: 5px;
}

</style>


<style>

  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>

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

    ::-webkit-scrollbar-thumb {
    background: darkred;}
    ::-webkit-scrollbar-track {
    background:white;}

</style>

<style>

:root{
/* [background color]: header on top */
--logo-blue:url(https://media.discordapp.net/attachments/779568566248407053/1200985743418466334/271_sin_titulo_20240127230810.png?ex=65c82c22&is=65b5b722&hm=8b9ad2b77a897c92212edd750703d6e09fc7262e3c59e38333f68b033f4f8e93&.png);
}


nav .links {
    background-image:url(https://media.discordapp.net/attachments/779568566248407053/1200985743418466334/271_sin_titulo_20240127230810.png?ex=65c82c22&is=65b5b722&hm=8b9ad2b77a897c92212edd750703d6e09fc7262e3c59e38333f68b033f4f8e93&.png);
    padding: 3.5px 16px 5.5px 16px;
}


</style>




<iframe width="0" height="0" src="https://www.youtube.com/embed/H1VjBxwwtIY?si=g2jnweOZx0SwUc3D//?&;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 5 of 5 comments ( View all | Add Comment )
Rayyan	1713671950 using, this is pretty cool! Report Comment
BUNNYR4T (autoplay)	1712667131 Using!! Report Comment
★ — Charlie !! 🍭	1712475700 PLS MAKE A CHARLIE ONE !! :D Report Comment
sam ☆	1712274186 using! thank you Report Comment
Mae!!	1711979815 usinggg Report Comment