Fragile Red & Black

Tags: goth, emo, red, 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!!!

Credits are appreciated (a post, a bulletin or something else that can support me)

You have permission to use this for your Layout only, you don't have permission to post elsewhere without giving a link to the original crediting me.

Preview:

click on the image for a larger preview

Code:

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



<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://i.pinimg.com/originals/ca/7f/22/ca7f227a115d9dd5beff80842d57ef98.png');
 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-color: black;
    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 5 of 5 comments ( View all | Add Comment )

BAILS! XD	1707108480 Using! Report Comment
She_Devil	1636729045 I'd like to use this layout If I can please. It's beautiful Report Comment
♡ Lexii ♡	1614689886 Love this so much. Updating my layout with it now Report Comment
Ashleigh	1612837288 I love it Report Comment
TWILA'S LAY0UT SHACK	1612558696 Great one katie!! Report Comment