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

Ikina	1762669531 using Report Comment
bea.	1762578262 using Report Comment
Crooks	1755013264 using!!! Report Comment
sierra :3	1746809833 using ^^ Report Comment
mara	1744170571 Using Report Comment
m3w0oo´ཀ`	1701712096 Usando Report Comment
natsuki !!	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
StarDust~	1691270061 Using!! Report Comment
Gloomy.Goth	1691016879 using!! <3 Report Comment
salty	1690783545 using Report Comment
cover me in gasoline	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