Nightmare Red Layout

Tags: red, emo, horror, katie

Description:

If you like this style, you can use it in your profile, BUT at least, ADD ME or COMMENT BELOW and give me some kudos! I spent time for making this layout!!!

Preview:

click on the image for a larger preview

Code:

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

<style>
body {text-align:center;}
table {margin:0 auto; text-align:left; width:728px;}
table table {width:auto;}
table table table {text-align:left!important;}
</style>


<style>

body:before {
 content: " ";
 height: 100vh;
 width: 100vw;
 display: block;
 position: fixed; 
 top: 0; 
 left: 0; 
 z-index: 100;
 background-image: url('https://64.media.tumblr.com/682b7cc5d12fd164fd1097eeaae4e5c9/763ab7c7dd4dc274-9a/s640x960/54ee44c9c42af897740dc41f11b0f4dd0debcf7e.gif');
 background-size: cover;
 background-repeat: no-repeat;
 animation: yourAnimation 3s ease 0s 1 normal forwards;
 pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

<style>

footer {
        border-radius: 15px;
background-image: url(https://64.media.tumblr.com/682b7cc5d12fd164fd1097eeaae4e5c9/763ab7c7dd4dc274-9a/s640x960/54ee44c9c42af897740dc41f11b0f4dd0debcf7e.gif); 

</style>


<style>

table {
  border-spacing: 6px;
width: 100%;
background-image: url(https://64.media.tumblr.com/682b7cc5d12fd164fd1097eeaae4e5c9/763ab7c7dd4dc274-9a/s640x960/54ee44c9c42af897740dc41f11b0f4dd0debcf7e.gif); 

</style>



<style>
nav:before {
 width: 100%;
 height: 300px;
 display: block;
 content: "";
 background-image: url('https://data.whicdn.com/images/324500707/original.gif');
 background-position: center center;
 background-size: cover;
}
@media only screen and (max-width: 600px) {
 main:before{
  height: 200px;
 }
}


nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(https://i.pinimg.com/originals/60/1c/da/601cdaedd8d20c49f8c61cb4ecabdaac.gif); }
</style>


<style>

:root {
  --topic1: "Intro";
  --topic2: "🎤🎧🎵";
  --topic3: "Movies/TV Shows";
  --topic4: "Things I like";
  --topic5: "Books/Writers";
  --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: 2px 2px white !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);
}

body {
  /* sets background */
    background-image: url(https://i.pinimg.com/originals/f3/c3/ad/f3c3ad9ea33bf0a6a4789bbd6b8a6670.gif);
    background-repeat: repeat;
    background-size: 50% ;
  }

        

</style>

<style>


  h1, h2, h3, h4, h5, a, p, nav label, .section{ 
font-family: var(--font-family) !important; 
 text-shadow: !important;
 text-transform:!important;
}


h1, h2, h3, h4,h5,a, p, nav label, .section {color: white;}

h1 {
  color: red ;
  text-shadow: 1px 1px 2px black, 0 0 25px yellow, 0 0 5px yellow;
}


table, th, td {
  border: 1px solid red;
}


:root {
        --logo-blue: #FF000055;
        --darker-blue: ;
        --lighter-blue: #FF0000355;
        --even-lighter-blue: #FF000055 ;
        --lightest-blue: #FF000055;
        --dark-orange: red;
        --light-orange: #FF000055 ;
        --even-lighter-orange: #FF000055;
        --green: #FF0000;
    }

</style>

<style>


  Main {background: url("https://i.gifer.com/EkA5.gif")
        no-repeat fixed; background-size: cover;
     }
     }
</style>



<style>

.online{content:url("http://dl8.glitter-graphics.net/pub/1027/1027688lssak52cun.gif");}


    }
.friends {
    overflow: scroll;
    overflow-x: scroll;
    overflow-x: hidden;
    height: 300px; 
}


</style>

<style>

.comment-replies {border:5px solid red}; 
</style>


<style>

 
.profile .top-eight .person img {
border-radius: 50%;
width: 50px;
height: 50px;
}
 
.profile .blurbs .section h4 {
display: none;
}
 
 
</style>
 

<style>

.details-table{
display: block;
height: 200px;
overflow-y: scroll;
}
.<div style="height:200px;overflow-y:scroll;background-color:#00000055;color:#FFFFFF55;">


</style>

<style>
body {
  font: normal small-caps normal 16px/1.4 Georgia;
}

/* is the same as:

body {
  font-family: Georgia;
  line-height: 1.4;
  font-weight: normal;
  font-stretch: normal;
  font-variant: small-caps;
  font-size: 16px;
}

</style>

<style>
.profile .general-about .profile-pic img,
.profile .friends .friends-grid .person a:nth-child(2) img,
.profile .friends .comments-table tr td a:nth-child(2) img{
    width: 100%;
    height: 100%;
    object-fit: cover; clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
   
    transition: 0.4s;
}

.profile .general-about .profile-pic img:hover,
.profile .friends .friends-grid .person a:nth-child(2) img:hover,
.profile .friends .comments-table tr td a:nth-child(2) img:hover{
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

</style>

<style>

.search-wrapper input[type=text] {background-color: red !important;border: 1px solid var(--headers) !important;color:var(--names) !important;border-radius: 10px !important;}
button{border-radius: 10px !important;border: 1px dotted var(--headers) !important;font-family: var(--font-family) !important;background-color: red; !important;color:var(--headers) !important;}

</style>

<style>

@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(2,1) rotate(0deg);
    }
    50% {
        transform: scale(1.2,1.2) rotate(10deg);
    }
    100% {
        transform: scale(1,1) rotate(0deg);
    }
}
.profile .col h1 {
  font-size: 40px !important;
  animation: zoominoutsinglefeatured 3s infinite;
}
</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>
 .f-col {
    /* allow contacts to stack */
    vertical-align: top;
    margin-bottom: 5px;
    display: block;
  }

</style>

<style>

.friends-grid {
        visibility:hidden; display:none;
    }
.friends {
    overflow: scroll;
    overflow-x: scroll;
    overflow-x: hidden;
    height: 300px; 
}

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

Fever	1728427902 using!! Report Comment
☆ Astarion ☆	1727123806 Usingg Report Comment
DeadCutie_	1721431736 using !! Report Comment
sxull	1720090918 using thanks Report Comment
...	1719132553 Hii! Is it the background supposed to be flashing? Just asking! :3 Report Comment
Sorrow.	1718546297 Using <3 Report Comment
_34k1ss3s	1715772543 usinggg :3 Report Comment
Gabriel The Apostate of Hate	1715404622 using Report Comment
22gxre7ji	1714677180 might use Report Comment
billy loomis	1710989245 gonna try to use this idk how to work this platform so it may not happen but ill try Report Comment
Golden	1708966327 Usando bonita Report Comment
jazz	1708745820 FUCK YEAH!!! TYSM BFF!!! USING!!!!x Report Comment
vvywis	1708103794 WOWWOWW Report Comment
vvywis	1708103740 WOWWOWW Report Comment
F.L.I	1707939810 This is really well made, I hope you don't mind if I use it? (I don't know how to Kudos) Report Comment
Jay-The Chaos Cat	1706880640 This is sick, you did great making this Report Comment
kkaran	1697137396 banger layout Report Comment
UrlocalPossum	1693104227 Thanks man, this is really cool! Report Comment
Tiffany Ray	1693097209 added Report Comment
Tyler/Ty	1643315285 I don't know how to give kudos, but this is really cool Report Comment