Horror Layout (updated)

Tags: horror, red, scary

Description:

Layout for all the horror fans out there, enjoy :) Please give credit or comment to boost if you use, thank you

Preview:

click on the image for a larger preview

Code:

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

<style>

    a {
        color: red;
        text-shadow: 0px 0px 10px red; !important
        text-decoration: none;
    }
    
    a:hover {
        animation:blinkingText 1.2s infinite;
    }
    
    @keyframes blinkingText{
        0%{     color: red;    }
        50%{    color: black; }
        100%{    color: red; }
}
     
    
    .contact:after {
        width: 98%;
        height: 167px;
        display: block;
        content: "";
        background-color: transparent;
        background-image: url('https://media0.giphy.com/media/l2YWoE1MjEPo9sG3K/giphy.gif');
        background-position: center;
        opacity: 70%;
        background-size: 402px;
        border-style: double;
        border-color: black;
    }


    .profile {
        background-image: url(https://i.makeagif.com/media/11-15-2015/iHywJQ.gif);
        background-size: 200px;
        position: relative;
        border: 3.5px double black;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    }
    
    .profile {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 1.4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
      }

@keyframes flash_border {
  0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}

@-webkit-keyframes flash_border {
0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}

@-moz-keyframes flash_border {
0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}

    body {
        background-image: url(https://i.pinimg.com/originals/f3/42/d3/f342d3b65227a71623f93f7d3bcc0962.jpg);
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
    }
    
    main {
        background-color: transparent;
        color: white;
    }
    
    :root {
        text-shadow: 1px 1px 0px red;
        --logo-blue: ;
        --darker-blue: ;
        --lighter-blue: ;
        --even-lighter-blue: ;
        --lightest-blue: ;
        --dark-orange: ;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: ;
    }
    
    nav .top {
        background-image: url('https://64.media.tumblr.com/2ada53507df9c60939598d098c3c3df5/tumblr_p956mwWIt21vhpaeyo1_640.gifv');
        height: 300px;
        background-size: 809px;
        background-position: top;
        border-radius: 5px;
        position: relative;
        border: 3.5px double black;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    } 
    
    nav .top {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 1.4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    nav .links {
        background-color: ;
        border-radius: 30px;
        height: 33px;
    }
    
    .profile-pic {
        border-style: double;
        border-color: black;
        box-shadow: 0px 0px 7px red;
        border-radius: 3px;
        overflow: hidden;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
    }

    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: black;
        border-radius: 6px;
        box-shadow: 0px 0px 5px red;
    }

    table.details-table td {
        background-color: black !important;
    }
    
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: transparent !important;
        color: white !important;
        border-bottom: 1px dashed red;
    }
    
    .container {
        border-radius: 0px 0px 0 0;
        overflow: hidden;
        margin-top: 20px;
        padding: 20px;
    }

    footer {
        border-radius: 2px;
        background:  black!important;
        display: block !important;
        position: relative;
        border: 3.5px double black;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    }

    footer {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 1.4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    table.comments-table td {
        background-color:  black!important;
    }
    
    .comments-table td:first-child img {
        width: 80px;
        border-radius: 4px;
        border-style: double;
        border-color: black;
        border-width: 3px;
        box-shadow: 0px 0px 7px red;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
    }

    .profile .friends .person img {
        border-radius: 4px;
        border-style: double;
        border-color: black;
        box-shadow: 0px 0px 7px red;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
    }

    .blog-preview p {
        font-size: 1.2rem;
    }

    .online {
        color: red;
        font-weight: bold;
        font-size: 98%;
    }
    

    .online img {
        content: url(https://static.myfigurecollection.net/upload/pictures/2021/03/04/2651068.gif);
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }

    .icon, .award img {
        content: url(https://thumbs.gfycat.com/AffectionateHarshHapuku-max-1mb.gif);
        display: inline-block;
        height: 2.0em;
        width: 1.8em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
    }

    .profile .blurbs .section h4 {
        margin: 0;
        color: white;
    }
    

     .comments-table td:first-child {
        background-image: url('https://i1.wp.com/i.pinimg.com/originals/83/72/92/8372928780f04433011ad2830a46b744.gif');
        background-size: 400px;
        padding: 10px;
    }

    .count {
        color: red;
        text-shadow: 0px 0px 3px red;
    }

    .details-table td:first-child {
        background: var(--even-lighter-blue);
        color: red;
        text-shadow: 0px 0px 3px red;
        font-weight: bold;
        width: 33%;
    }

    .profile-info {
        background-image: url('https://i1.wp.com/i.pinimg.com/originals/83/72/92/8372928780f04433011ad2830a46b744.gif');
        background-size: 500px;
        border: 2px double black;
        box-shadow: 0px 0px 7px red;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
        margin-bottom: 10px;
    }

    .profile .friends .person p {
        color: red;
        text-shadow: 0px 0px 3px red;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
    }

    @keyframes example {
0% {
transform:translate(0px,0.3px) rotate(0.3deg);
}
8% {
    transform:translate(0px,0.5px) rotate(-0.5deg);
}

16% {
    transform:translate(0px,1px) rotate(1deg);
}

24% {
    transform:translate(0px,1.5px) rotate(-1.5deg);
}

32% {
    transform:translate(0px,2px) rotate(2deg);
}

40% {
    transform:translate(0px,2.5px) rotate(-2.5deg);
}

48% {
    transform:translate(0px,3px) rotate(3deg);
}

56% {
    transform:translate(0px,3.5px) rotate(-3.5deg);
}

64% {
    transform:translate(0px,3px) rotate(3deg);
}

72% {
    transform:translate(0px,2.5px) rotate(-2.5deg);
}

80% {
    transform:translate(0px,2px) rotate(2deg);
}

88% {
    transform:translate(0px,1.5px) rotate(-1.5deg);
}

96% {
    transform:translate(0px,0.5px) rotate(0.5deg);
}

100% {
    transform:translate(0px,0.3px) rotate(-0.3deg);
}

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

Naomi :3	1751793396 Vou usar Report Comment
WAAWAAW	1751756733 using Report Comment
maxine	1751564735 using :3 Report Comment
H3artkizyy>_<	1751462195 Using!! Report Comment
Ann_The_MetalHead	1751396057 using Report Comment
weezy	1751381906 Using :) Report Comment
brokenglasses	1751319381 using Report Comment
On1jin	1750919201 Using Report Comment
sam	1750872871 using!11 tysm Report Comment
VVV	1750870646 Using Report Comment
Apollo	1750828979 using Report Comment
Sk3l	1750759034 using ! Report Comment
v4mp6re	1750714008 using!! Report Comment
low	1750712848 using Report Comment
Emmamustdie	1750696694 using! Report Comment
vampiricfaith	1750652870 I love this but the gif at the top isnt working for me Report Comment
jeffrey ヾ(≧ ▽ ≦)ゝ	1750629558 using ^_^ Report Comment
MidnightCvnt	1750171859 Using! Report Comment
STECKLER	1750093077 using!!! XD Report Comment
MAGGOTROTTEN	1749966194 using! Report Comment