Chai Hi-Fi RUSH Layout

Tags: simple, animation, gif, hi-fi rush, chai, game

Description:

a pretty basic layout that's themed around the main character Chai from the rhythm action game hi-fi rush!
if u use this layout, pls leave a comment! and also don't claim as ur own. credit is appreciated, but not necessary
u can use this as a base if u want, go stupid go crazy

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by angel / amygdala ♪ (https://layouts.spacehey.com/layout?id=28864) -->

<style>
:root {
    --logo-blue: #B63737; /* CHANGE COLOR OF SPACEHEY BAR AT TOP */
    --darker-blue: black; /* CHANGE COLOR OF PROFILE LINKS */
    --lighter-blue: #F19C30; /* CHANGE COLOR OF NAVIGATION BAR */
    --dark-orange: black; /* CHANGE FONT COLOR OF ABOUT ME, WHO I’D LIKE TO MEET */
    --light-orange: #F19C30; /* CHANGE BACKGROUND OF COMMENT SECTION */
    --even-lighter-orange: #efefef; /* CHANGE BACKGROUND OF COMMENT SECTION */
}
</style>

<style>
    body{background:url("https://files.catbox.moe/ucg7lx.jpg") no-repeat fixed; background-size:cover;}
</style>

<style>
main {
    border: none; /* ADJUST BORDER FOR PROFILE */
    color: black; /* FONT COLOR */
    background-color: #efefef;
}
</style>

<style>
.profile .blurbs .inner, .profile .friends .inner {
  border: 2px solid #F19C30;
}
</style>

<style>
/* CHANGE COLOR OF THE NUMBER OF FRIENDS/COMMENTS YOU HAVE */
.count {
    color: #205599;
</style>

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

<style>
.online {
color: #f000; /*this is a transparent hex which hides ONLINE! text change this to any color if you want it to show*/

}

.online img { content: url(https://files.catbox.moe/fmpf6x.gif); animation-name: none; visibility: visible; height: 20px; width: 80px; }

}
    
time.ago {
    color: #205599;
}
</style>

<style>

table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "General";
  --topic2: "Games";
  --topic3: "Music";
  --topic4: "TV & Movies";
  --topic5: "Books & Comics";
  --topic6: "Misc";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 5px 5px #205599 !important;
filter: brightness(95%) !important;
   
   
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}

</style>

<style>
.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
    border: 2px solid #F19C30;
}
table.details-table {
    border-collapse: collapse;
}
table.details-table td {
    background-color: #d2d2d2 !important;

}

.table-section:last-of-type {
    display: none;
}
</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: "♪"
}
.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: "♪"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "♪"
}
</style>

<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "My Friends! ♫"; font-size:.8rem; font-weight:bold; 
color:black; } 
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "Comments! ♪"; font-size:.8rem; font-weight:bold;
color:black; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "My Interests! ♫"; font-size:.8rem; font-weight:bold; 
color:black; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "Say Heyo! ♪"; font-size:.8rem; font-weight:bold; 
color:black; }
}</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "Important Stuff! ♫"; font-size:.8rem; font-weight:bold; color:black; }
</style>

<style>
.blurbs .inner .section:first-of-type h4{
	font-size:0;
}
.blurbs .inner .section:first-of-type h4:after{
	content:"About Me:";
font-size:.8rem;
}
.blurbs .inner .section:last-of-type h4{
font-size:0;
}
.blurbs .inner .section:last-of-type h4:after{
content:"Do Not Request:";
font-size:.8rem;
}
</style>

<style>
/* links in the navigation bar @ the top */
nav{ 
font-size: 10px !important;
text-transform:none;
text-align: center;
}
nav .links a{
    text-shadow:none;
}
</style>

<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://64.media.tumblr.com/c3c91ea02a1c9972b1f3a4ea02bf91bb/8e23c54ea31f0c21-d2/s400x600/bdc646b239537c53bf3a7a574e4a28f726977655.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; }
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-5/oth481.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/10/05/guitar-3.html" target="_blank" title="Guitar"><img src="https://cur.cursors-4u.net/cursor.png" alt="Guitar" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
    a{
    color: #A61D1D !important;
    }
    a:hover{
    color: #205599 !important;
    }
    a:visited{
    color: #205599 !important;
    }
    .top a{
    color: white !important;
    }
    .top a:hover{
    color: white !important;
    }
    .top a:visited{
    color: #205599 !important;
    }
    .links a{
    color: black !important;    
    }
    .links a:hover{
    color: black !important;
    }
    .links a:visited{
    color: black !important;
   }
    .friends-grid p{
    color: #A61D1D !important;
    }
    footer .links a{
    color: black !important;
   }
    footer .links a:hover{
    color: black !important;
   }
    footer .links a:visited{
    color: black !important;
   }
</style>

<style>
.comments-table td:first-child {
  text-align: center;
  width: 30%;
}
.profile .contact {
	background: #d2d2d2;
}
.blurbs {
    background:#d2d2d2;
}
.friends {
  grid-area: friends;
  background:#d2d2d2;  
}
.comments-table td{
  background: #d2d2d2!important
}
.comment-replies{border:1px solid #949494;} /* this is the border around the replies */
</style>

<style>
.comments-table{
display: block;
height: 305px;
overflow-y: scroll;
}
</style>

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

<style>

div.a {

  text-align: left;

}


div.b {

  text-align: center;

}


div.c {

  text-align: right;

}

</style>

<div class="a">feel free to put whatever u want here! :]</div>

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.