red grunge layout

Tags: red, grunge, guitar

Description:

your profile name changes colours, if you hover over friends pfp's they shake and blur a bit et.!

Preview:

click on the image for a larger preview

Code:

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

<style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/hcOhXThqh_0//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfull+screen="" loading="lazy">


nav img.logo {
    filter: brightness(0) saturate(0%) invert(10%) sepia(00%) hue-rotate(282deg) saturate(0);

}


body {
font-family: Courier;
background-color: white;
}


    body{
        background-color: black;
font-family: "Century Gothic";
        color: white;
font-size: 18px;
    }
.count{
    color: crimson;
}


    h1{
        animation: changeColor 5s linear infinite;
font-family: 'gothik steel';
font-weight: normal;
	text-shadow: 1px 1px black;
	text-transform: uppercase;
    }
h1:hover{
      animation:shake 1s;
      animation-iteration-count:infinite;
}
@keyframes changeColor{
    0%{color:red;}
    25%{color: white;}
    50%{color: red;}
    75%{color: white;}
    100%{color:red;}
}
  .profile .table-section{
    border:2px solid crimson;
    border-radius: 15px;
  }
  .profile .table-section .heading{
    border: 1px solid crimson;
    border-radius: 12px 12px 0px 0px;
    text-align: center;
    background-color: crimson;
  }
  .profile .table-section .heading h4{
    color:white;
    text-shadow: 1px 1px 2px black;
  }
    
    a{
        color: red;
    }
a:hover{
    color: white;
    text-decoration: underline wavy;
}

}
.count, .friends a p{
    color: red !important;
}
.contact .inner a img {
  font-size: 0;
}
.profile-pic img {
  display: inline-block;
  width:100%;
  height:auto;
filter: grayscale(0%);
  animation: pop 1s ease-in-out infinite alternate;
  overflow: hidden;          
}


h1   {color: crimson;}
p    {color: maroon;}


#q, button {
color: crimson;
background-color: white;
border: 1px solid crimson;
font-family: inherit;
font-size: 11px;
}
top, nav .top, details-table
{
    background: crimson !important;
}
nav .top{
    font-size: 12px;
 color: white;
    border: 1px solid crimson;
    border-radius: 12px 12px 0px 0px;
}


body {
    background: url(https://i.pinimg.com/564x/e2/f3/71/e2f371266c0b3d1393bbf95db0daa4e7.jpg);
background-size: 1500px; 
}

.profile {
background-color: #1A1818  ;
background-size: 810px; 
}


:root 
{
	--logo-blue: black;
	links: crimson;
 	--darker-blue: black;
	--lighter-blue: black;
	--even-lighter-blue: black;
	--lightest-blue: crimson;
	--dark-orange:crimson ;
	--light-orange: crimson;
	--even-lighter-orange: black;
	--turquoise: black;

            --table-header:crimson;
	--link-text: white;
	--main-text: white;
    

    }   
    nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " ★ ";
    color: var(--headers);
 }




<style>
table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: ":3";
  --topic2: "Interests";
  --topic3: "Music";
  --topic4: "TV//movies";
  --topic5: "hyperfix's";
  --topic6: "heroes";

 }

.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: 2px 2px black !important;
filter: brightness(95%) !important;
   
   
}


/*Interests Scrollbox*/
    .profile .table-section {
        display: block;
        height: 558px;
        width: AUTO;
        overflow-y: scroll;
        font-size: 12px;
        border: dotted 0px!important;
        border-right: none!important
}


.blog-preview p:before { 
    content: " \2605 "; 
    margin: 5px; 
}


.profile .contact{
   background-image: url('https://i.pinimg.com/564x/29/5e/a5/295ea5c5e39cde19cbcb1a4acdbdc414.jpg');
   border: solid;
   border-color: #0;
   border-width: 2px;
 }



::-webkit-scrollbar
{
  width: 9px;
}

::-webkit-scrollbar-button:start {
    background-color: #DC143C;
}

::-webkit-scrollbar-button:end {
    background-color: #DC143C;
}

::-webkit-scrollbar-thumb
{
  background-color: #800000;
  border-radius: 0px;
}

/*Customizes color of Handle hover*/
::-webkit-scrollbar-thumb:hover {
  background: #800000;
}  
  
/*Customizes color of Track */
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px #610000;
  background-color: #610000;
  border-radius: 0px;
}


.general-about .profile-pic {
float: none;
}

.general-about .profile-pic img {
    border-radius: 25px;
    border: 3px solid#DC143C;
}



.container {
    width: 940px;


}

.friends-grid img:hover, img:hover{
      animation:shake 1s;
      animation-iteration-count:infinite;
filter: grayscale(0%) blur(1px);
}
img{
filter: grayscale(10%);
}
@keyframes shake{
    0% {
        transform:translate(1px,1px) rotate(0deg);
    }
 
    10% {
        transform:translate(-1px,-2px) rotate(-1deg);
    }
 
    20% {
        transform:translate(-3px,0px) rotate(1deg);
    }
 
    30% {
        transform:translate(3px,2px) rotate(0deg);
    }
 
    40% {
        transform:translate(1px,-1px) rotate(1deg);
    }
 
    50% {
        transform:translate(-1px,2px) rotate(-1deg);
    }
 
    60% {
        transform:translate(-3px,1px) rotate(0deg);
    }
 
    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,1px) rotate(0deg);
    }
 
}







.comments-table{
display: block;
height: 200px;
border: none;
color: white;
filter: grayscale(50%);
background-image: url(m);
height: 300px!important;
overflow-y: scroll;
}





 footer{
   background-image: url('https://i.pinimg.com/236x/e7/d9/eb/e7d9eb94cf61b60172f7bc815d51dd44.jpg');
   color: #DC143C;
   border: dotted;
   border-color: #DC143C;
   border-width: 3px;
}
</style>

<style>

.online{content:url(https://gifs.crd.co/assets/images/gallery22/3e30d53e.gif?v=d417d32b);
    width: 25px;
    height: 25px;
}


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

𓎟𓎟 eddie / jenny letterson's #1 fan	1723152687 using Report Comment
Dex >w<	1722226556 using, tysm! Report Comment
Ray E<3	1717555725 Using :3 Report Comment
Michael﹒Mike 𓉸	1717210178 Using!! Report Comment
Romie	1715490560 using!! Report Comment
.⋆♱ 𝐙𝐀𝐂𝐊 / 𝐊𝐔𝐑𝐓. ︎︎	1711096272 Using !! :D Report Comment
cqrpvxz	1709349341 might usee :3 Report Comment
kЯriS	1709147982 USING >:3 Report Comment
NYX🦇	1699396912 Using Report Comment
zomb0yy	1698864246 USING >:D Report Comment
mei	1693046385 usinggggggggggggggggggggggggggggg Report Comment
݁˖꩜ trix . ݁⊹	1685138431 Using >:D Report Comment Wait would I be able to change the font???? I’m not exactly the biggest fan of it, and also if I can, how would I? by ݁˖꩜ trix . ݁⊹; 1685165718; Report Tbh I have no idea how to change the font- But if you figure it out you can go ahead! by foxlore 🍉; 1685169891; Report Oop- Okay cool, just wanted to check before I do, just in case you didn’t want me to haha by ݁˖꩜ trix . ݁⊹; 1685169970; Report No worries you can change whatever you want ^^ by foxlore 🍉; 1685173896; Report Okay cool :DD I js find it’s better to get permission first before changing stuff haha by ݁˖꩜ trix . ݁⊹; 1685174017; Report
rico,,	1684615465 cool Report Comment
cherry_b0mb!<3	1682047872 using! Report Comment
Vinny	1678125019 Using thanks! Report Comment
𝐉𝐚𝐱 <3	1676035979 using thanks :) Report Comment