Vox layout

Tags: gay, hazbin hotel, vox, vox hazbin hotel, 2000s, blue, pink, emo, scene

Description:

comment if using

Preview:

click on the image for a larger preview

Code:

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

<div style="float:  ; max-height: 300px; position: fixed; right: 1px; bottom: 0px; z-index: 400;">
<img src="https://media.tenor.com/BUCkaoampREAAAAi/hazbin-hotel-vox.gif" height="230"/></div>

<style>

html:before {

 

  animation: grain 1s steps(10) infinite;

 

  background-image: url('https://i.pinimg.com/originals/4c/2d/0f/4c2d0f7e2c89f437ebe6d0807fc562c8.gif ');

 

  content: "";

 

  height: 250%;

 

  left: -50%;

 

  opacity:.175;

 

  position: fixed;

 

  top: -110%;

 

  width: 200%;

 

  pointer-events:none;

 

}
</style>




<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');
p{
    color: white;
    text-align: center;
    font-family: 'pt mono';
}
h1,h2,h3,h4,h5 {
    color: white;
    text-align: center;
    font-family: 'press start 2p';
    font-size: 10px;
}
body {
    background: url( https://i.pinimg.com/736x/7c/68/00/7c6800e74130f78091cdd35259a13856.jpg)
fixed; background-size:cover;

}
main {
    background: #0065ffa6;
}
.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}
}
.general-about {
    border: double #FF6BBF 4px;
    padding: 10px;
    height: 217px;
    background: (0,0,0,30%);
}
.general-about .profile-pic img {
     border: solid #FF6BBF 3px;
}
.contact .inner {
    border: double #FF6BBF 4px;
    background: (0,0,0,30%);
}
:root {
    --logo-blue: ;
    --darker-blue: white;
    --lighter-blue: ;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: white;
    --light-orange: ;
    --even-lighter-orange: ;
    --green: ;
}
.mood {
    margin-top: 10px;
    margin-bottom: 3px;
    border: double #FF6BBF 4px;
    padding-left: 10px;
    padding-top: 5px;
    background: (0,0,0,30%);
}
.profile .left .table-section .inner {
    border: double #FF6BBF 4px;
    padding-left: 7px;
    padding-bottom: 5px;
    padding-top: 5px;
    background: (0,0,0,30%);
}
.blog-preview {
    margin-top: 32px;
}
.blurbs .inner {
    border: double #FF6BBF 4px;
    padding-left: 10px;
    padding-top: 10px;
    background: (0,0,0,30%);
}
.friends .inner {
    border: double #FF6BBF 4px;
    padding-left: 10px;
    padding-top: 10px;
    margin-bottom: 20px;
    background: (0,0,0,30%);
}
table.comments-table{
    display: block;
    height: 250px!important;
    overflow-y: scroll;
}
.url-info {
    border: var(--borders)!important;
    background: (0,0,0,30%);
}
:root {
    --borders: double #FF6BBF 4px;
    background: (0,0,0,30%);
}
nav .links {
    border: var(--borders);
    text-align: center;
    font-size: 11px;
    font-family: 'pt mono';
    background: (0,0,0,30%);
}
.top {
    border: var(--borders);
    margin-bottom: 10px;
    font-family: 'pt mono';
    background: (0,0,0,30%);
}
.profile h1 {
    text-align: center;
}
/* contact icons */
.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 favorite */
content: "☆"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "★"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "★"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "★"
}
footer{
    border: var(--borders);
    font-size: 15px;
    background: none;
}
.friends .person img {
    border: solid #FF6BBF;
}
.profile .friends .person p {
    color: white;
    font-weight: normal;
}
.comments-table td img {
    border: solid #FF6BBF;
}
.comments-table td p {
    font-weight: normal;
}
.count {
    color: #FF6BBF;
}
button, input, optgroup, select, textarea {
    font-family: 'pt mono';
    font-size: 10px;
    line-height: 1.15;
    margin: 0;
    background: #000000;
    border: #FF6BBF double 3px;
    color: white;
}
</style>




<style>
 
.logo {

   content: url('https://i.postimg.cc/FFGtC3qv/Angel-Logo.png');
</style>



<style>
.contact{

    border-spacing:5px;

}

.f-row{

    margin:0px!important; /* this margin keeps the links from popping out of contact box */

}



.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://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=26dffab5 ');

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

 /* add to favorites */

 content: url('https://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=26dffab5');

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

 /* Send Message */

 content: url('https://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=26dffab5');

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

 /* forward to friend */

 content: url('https://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=26dffab5');

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

 /* instant message */

 content: url('https://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=26dffab5');

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

 /* block user */

 content: url('https://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=26dffab5');

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

 /* add to group */

 content: url('https://gifcity.carrd.co/assets/images/gallery06/20a42f1f.gif?v=26dffab5');

}
</style>





<style>
.online {content:url('https://gifcity.carrd.co/assets/images/gallery81/aefab3c2.gif?v=26dffab5 '); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 
}
</style>


<style>
.general-about{
  position: relative;
  margin-top: 30px;
}
.general-about .profile-pic::before{
  content: '';
  background: url('https://i.postimg.cc/br64gP6t/2024-03-16-021-Kleki.png ') no-repeat;
  background-size: 70px;
  display: block;
  width: 200px;
  height: 100px;
  z-index: 999;
  position: absolute;
  top: -57px;
  left: 14px;
}
</style>

<style>* {cursor: url(https://ani.cursors-4u.net/cursors/cur-11/cur1076.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2012/06/24/s-pink-premium-link-select.html" target="_blank" title="S Pink Premium - Link Select"><img src="https://cur.cursors-4u.net/cursor.png" alt="S Pink Premium - Link Select" style="position:absolute; top: 0px; right: 0px;"/></a>

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 8 of 8 comments ( View all | Add Comment )

⋆⭒˚｡⋆ollie! ⋆⭒˚｡⋆	1714243754 using X3!!!! Report Comment
XAIINEZEMOO !!	1712705684 I LOVE THIS YEAAYY IM USING IT!! TY!! Report Comment
Felix_:3	1712285477 USING!!! Report Comment
TONI!!!	1710844755 USANDO!! :3 Report Comment
SUNNY !!	1710779269 USINGGGGGGGGGGGGGG Report Comment
Nicki_boy	1710727175 Using Report Comment
alex :3	1710568789 USINF ^0^ Report Comment