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

ace	1765283912 using Report Comment
Anthony!!!	1763435689 so epic and awesomeness Report Comment
Ivan	1761621383 awe, some Report Comment
5parrow	1754885488 Love it ⚔️ Report Comment
Meen	1754839746 using Report Comment
turu	1751416731 usinggggggggg Report Comment
turu	1751416731 usinggggggggg Report Comment
Yxwnexe	1750852186 USING Report Comment
The HIDDENGEMSYS	1748189271 NVM I'm using this Report Comment
lays	1747705975 im gonna use it i thinkkk :3 Report Comment
Katseye	1746874681 Using 💞 Report Comment
marker	1744785574 USING, SO AWESOME SAUCEEEEE!!!1!!11!!1!1!!!11! XDDDDDDDDDDDDD Report Comment
orionharper	1744335793 Using!! Report Comment
aLaN_NaLa	1743621640 usin :3 Report Comment
scaryzim	1743432832 using!! :_D Report Comment
✩༺𝕕𝕠𝕝𝕝𝕔𝕠𝕣𝕡𝕤𝕖༻✩	1741287922 using !! good job <3 Report Comment
Logilin	1737604009 using! Report Comment
Hanna	1736801418 Using Report Comment
idk	1736324598 Using!!️ Report Comment
076.0	1735069639 wah using Report Comment