Halloween Villian Layout

Tags: #halloween #scary #layout #jasonvoorhees #michaelmyers #freddykrueger

Description:

Halloween Themed Layout with Fred Krueger, Michael Myers, & Jason Voorhees. If you use please Comment.

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght@500&family=Grechen+Fuemen&display=swap');
p{ font-family: 'Edu TAS Beginner', cursive; 
font-size: 100%;
color: rgb(255,117,24); 
text-shadow: 1px 1px 1px black;
}

h1, h2, h3, h4, h5{
font-family: 'Grechen Fuemen', cursive;
font-size: 100%;
color: rgb(255,117,24);
text-shadow: 1px 1px 1px black;
}


body {
background:url(https://i.pinimg.com/originals/50/79/35/5079357d758a88435eddb45c0d88e06a.gif) fixed;
}


main {
background: rgb(0,0,0,0.8);
border: none;
}

:root {
--logo-blue: transparent;
--darker-blue: white;
--lighter-blue: transparent;
--even-lighter-blue: transparent ;
--lightest-blue:  transparent;
--dark-orange: white;
--light-orange:transparent;
--even-lighter-orange:;
--green: blue;
}

friends p, .friends a {
color: WHITE;
}

a:hover {
     color: WHITE;
   } 

   a{
     color: WHITE; 
   }

    .count {
        color: ORANGE;
    }

.profile .friends .person p {
color:ORANGE ;  
}

.profile .friends .person p:hover {
color: RED;
}

friends p, .friends a {
color:WHITE;
}

nav .top{
background-color:rgb(255,117,24) ;
margin: 1em 0;
text-align: center;
border-radius: 30px;
}

a:hover {
     color: lightgrey; 

}
    .count {
        color: ORANGE;
    }



nav .links{
background-color: rgb(255,117,24);
border-radius: 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}



.profile .contact .heading,
.profile .table-section .heading{
color: #7A007A;
background-color: rgb(255,117,24);
border-radius: 30px;
text-align: center;
padding: .1em;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: #7A007A;
background-COLOR: rgb(255,117,24);
border-radius: 30px;
text-align: center;
padding: .1em;
}


footer{
background-COLOR: rgb(255,117,24);
border-radius: 30px;

}

nav{ 
font-size: 13px !important;
font-family: 'Grechen Fuemen', cursive;
text-shadow: 1px 1px black;
text-transform:none;
padding-left:3px;
text-align: center;
}

             ::-webkit-scrollbar {
    width: 18px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: BLACK;
    }

    ::-webkit-scrollbar-track {
    background: rgb(255,117,24)
    }

body { cursor: url(https://cur.cursors-4u.net/holidays/hol-1/hol40.cur), auto; }

.profile .friends .person img:not(.icon):hover {
    transform: scale(1.2);
    transition: 0.5s ease;
}
.profile .friends .person img:not(.icon) {
    transition: 0.5s ease
}

</style>

<style>
main:before {                    
width: 100%;
height: 500px;
display: block;
content: "";
background-image: url('https://i.pinimg.com/originals/50/79/35/5079357d758a88435eddb45c0d88e06a.gif');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}

</style>



<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.pinimg.com/originals/50/79/35/5079357d758a88435eddb45c0d88e06a.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</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 0 of 0 comments ( View all | Add Comment )