red and black

Tags: red, black, emo

Description:

red and black

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url("https://fonts.googleapis.com/css?family=Creepster");

.w-40 h1{
font-family: Creepster;
font-size: 40px;
text-align: left;
background: -webkit-linear-gradient(#000000, #DDDDDD);
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(196, 45, 45, 1);
-webkit-text-stroke: 3px grey;
}
:root{
/* [background color]: header on top */
 --logo-blue:url(URL);
}

nav .links {
    background-image: rgba(145, 0, 0, 1);
    padding: 3.5px 16px 5.5px 16px;
    border-width: 10px
}
animation: grain 8s steps(10) infinite;
    background-image: url(https://external-media.spacehey.net/media/s5Ee1CDcQ_ax7_8L6_n7sVe9rhWDMI3v4epvEYeD9OLc=/https://media.istockphoto.com/id/1334024232/vector/seamless-pixel-noise-texture-static-interference-grunge-vector-background-tv-screen-no-signal.jpg?s=612x612&w=is&k=20&c=yVNxKDBiaWw809wfu2b1eQO7BJcoXKnqKqSiReza3h0=);
    content: "";
    height: 300%;
    left: -50%;
    opacity: .1;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events: none
}
.comments-table{

display: block;

height: 400px;

overflow-y: scroll;
}
main:before {

    content: url(https://media.tenor.com/IsQ6ZU_BnJwAAAAd/juggalo-icp.gif);

    position: fixed;

    bottom: -40px;

    right: -30px;

    transform: translateX(-3vw) translateY(-6vh);

    pointer-events: none;
}

/*these are your various headers, I have used yellow to show you which text is affected by this code. Feel free to change them to what you prefer. If you want individual headers to be different colors then you have to write each one in a separate piece of code.*/
h3 , h4, h5, .url-info b {
    color: rgba(204, 204, 204, 0.8);  
}

/*This is the color of the links on your page. I have set them to green so you can see what they are. Feel free to change them to your preferred color*/
a {
     color: rgba(204, 204, 204, 0.8);
}

/* color of the normal text on your page. I have set this to purple so that you know which text is affected. Feel free to change it to what you prefer*/
p, h2 {
     color: rgba(204, 204, 204, 0.8);
}
/* color of friend's names in the comments, number of friends and your name. This I set to orange */ 
h1, .count, .friends a p {
     color: rgba(204, 204, 204, 0.8);
} 

<div style="float:  ; &#10;max-height: 1000px; &#10;position: fixed; &#10;right: -590px; &#10;top: -100px; &#10;z-index: 300;"><img src="https://media.discordapp.net/attachments/1002765210932744333/1096621728412749875/yuemmeememe.png?width=334&height=760" width="400" height="1000"/>

html:before {
  animation: grain 8s steps(10) infinite;
  profile-image: url(https://htmlcolorcodes.com/assets/images/colors/dark-red-color-solid-background-1920x1080.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}


h1{

  animation: type 3s steps(27);

  color: rgba(145, 0, 0, 1);

  font-size: 10px;

  font-family: courier;

  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 .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

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>

img:hover , .url-info:hover , .online:hover {

  animation: shake 1s;

  animation-iteration-count: infinite;

}



@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, -2px) rotate(-1deg); }

}
*{
  border-radius: 12px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
  border-radius: 6px 6px 9px 9px;
}

 .profile-pic {

border-radius: 500px;

overflow: hidden;

}


.profile .friends .person img {

border-radius: 500px;


}

/*Main Body (Background Color/Background Image)*/
    body{
    background-color: rgba(28, 28, 28, 1) !important;
    background-image: url('URL') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    background-size: COVER;}
</style>
 
<style>
/*Profile (Background Color/Background Image)*/
    main{
    background-color: COLOR !important;
    background-image: url('https://wallpaperaccess.com/full/5594093.gif') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

    
}
/* change all headings on page to different colors. */
  .profile .blurbs .heading,
  .profile .friends .heading{
   background-color: rgba(145, 0, 0, 1);
   color: black;
}
/* change all headings on page to different colors. */
  .profile .contact .heading,
  .profile .table-section .heading{
   background-color: rgba(196, 45, 45, 1);
   color: ;



}
main:before {
    width: auto;
    margin-bottom: 25px;
    border-radius: 12px;
    border: 4px dashed black;
    height: 120px;
    display: block;
    content: "";
    background-image: url(https://viewmonsterrr.carrd.co/assets/images/image01.gif?v=5a83f016);
    background-position: center center;
    background-size: cover;


}
footer {
    border-radius: 15px;
    background-image: url(https://viewmonsterrr.carrd.co/assets/images/image01.gif?v=5a83f016);
    color: white;
}

table.comments-table td {
    color: rgba(145, 0, 0, 1);
}

:root {
    --logo-blue: rgba(145, 0, 0, 1);
    --darker-blue: rgba(196, 45, 45, 1);
    --lighter-blue: rgba(145, 0, 0, 1);
    --even-lighter-blue: url('https://i.gifer.com/origin/2f/2fd7bbf42c21a6da3f955ac141233251_w200.gif');
    --lightest-blue: rgba(196, 45, 45, 1);
    --dark-orange: rgba(133, 133, 133, 1);
    --light-orange: rgba(196, 45, 45, 1);
    --even-lighter-orange: url('https://i.gifer.com/origin/2f/2fd7bbf42c21a6da3f955ac141233251_w200.gif');
    --green: pink;
    }
/* 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: "💀"
}   
<style>

main {

    border-radius: 5px;

    border: 10px solid red;

    padding: 15px;

    border-image: url(https://viewmonsterrr.carrd.co/assets/images/image01.gif?v=5a83f016) 30 stretch;

    color: black;

    background: url('https://viewmonsterrr.carrd.co/assets/images/image01.gif?v=5a83f016') no-repeat fixed; background-size: cover;

    background-color: white; }
<!-- (c) Layout created by ectobiologist (https://layouts.spacehey.com/layout?id=30247) -->

<style>
 
 .logo {
  
content:url("https://cdn.spacehey.net/layouts/33836_9c8907cf4a7e38c6a71ea99f8d40dd5d.png?token=EYqn428IxETl7diLynDtxPXHKwh5tHW3vmeUESHhdRs&expires=1688746781")
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

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

m3w0oo´ཀ`	1701712096 Usando Report Comment
kamo	1697911627 Using! Report Comment
Sillybatt	1697742491 using! Report Comment
riddler	1694944927 using, thnx!! Report Comment
Skele	1694372985 usiiiiing Report Comment
Maxz	1694081661 using :3 Report Comment
Julián	1693711655 usiing ! Report Comment
Vintage Pixel	1692649908 Using! Report Comment
weathervane	1692248721 this is sick, using Report Comment
CR3M3S1CL3!	1691270061 Using!! Report Comment
Gloomy.Goth	1691016879 using!! <3 Report Comment
salty	1690783545 using Report Comment
jankie pie <3	1690754047 using Report Comment
V3x	1690693271 using Report Comment tysm! iv tried adding u bc we have alot in common just wondering if u wanted to be friend :3 by IcantSlEeP; 1691012986; Report
JAY ON THE MURDER SCENE	1690581826 Using!! X3 Report Comment
damien :3	1690502335 using >w< Report Comment
𝐒𝐭✰𝐫𝐠𝐢𝐫𝐥	1690488224 using :) Report Comment
milws...	1690418096 using :3 Report Comment
atilius	1690368762 gonna use :D Report Comment