Silent hill layout

Tags: horror, silent hill, game, black, emo, scary
Description:

do what u want with it idc about credits. It has more but had to crop to post.
Preview:

click on the image for a larger preview
Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@900&display=swap');
p{ font-family: 'Orbitron', sans-serif; 
font-size: 100%;
color: white; 
text-shadow: 1px 1px 1px black;
}

h1, h2, h3, h4, h5{
font-family: 'Orbitron', sans-serif;
font-size: 100%;
color: white;
text-shadow: 1px 1px 1px black;
}


body {
   background-image: url(https://vignette.wikia.nocookie.net/cry-of-fear/images/8/87/20160703170946_1.jpg/revision/latest?cb=20160718212743);
}


main {
background: transparent;
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: grey;
}

a:hover {
     color: brown; 
   } 
   a{
     color: white; 
   }

}
    .count {
        color: lightgrey;
    }

.profile .friends .person p {
color: lightgrey;  
}
.profile .friends .person p:hover {
color: brown;  
}


nav .top{
background-image: transparent;
margin: 1em 0;
text-align: center;
border-radius: 25px;
}

nav .links{
background-image:  transparent;
border-radius: 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}

.profile .contact .heading,
.profile .table-section .heading{
color: #FFFFFF;
background-image: transparent;
border-radius: 25px;
text-align: center;
padding: .1em;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: #FFFFFF;
background-image:  transparent;
border-radius: 25px;
text-align: center;
padding: .1em;
}

footer {
color: white;
box-shadow:;
text-decoration:;
text-decoration-style:;
background-color: transparent ;
border: 0px solid white;
}</style>

<style>
body { cursor: url(https://cur.cursors-4u.net/cursors/cur-5/cur425.cur), auto; }

}
a:hover {
     color: brown;
}

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


/* contact icons */
.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: url(https://i.imgur.com/fWgn4KK.png);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://i.imgur.com/fWgn4KK.png);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content:url(https://i.imgur.com/fWgn4KK.png);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend*/
content: url(https://i.imgur.com/fWgn4KK.png);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://i.imgur.com/fWgn4KK.png);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://i.imgur.com/fWgn4KK.png);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url(https://i.imgur.com/fWgn4KK.png);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://i.imgur.com/fWgn4KK.png);
}  



.profile .contact .heading,
.profile .table-section .heading{
color: #FFFFFF;
background-image: transparent;
border-radius: 25px;
text-align: center;
padding: .1em;
}

}
.top, .links, .heading, footer, button {
   background-color: transparent !important;
}
h1 {
   font-family: courier !important; 
   font-size: 20px !important;
}
h4 {
   color: #A0A0A0 !important;
}
.contact, .url-info, .table-section, .profile-info {
   border-color: transparent !important;
}
td {
   background-color: transparent !important;
}
input, button:not(.logout-btn) {
   border: 1px groove transparent !important;
}
.pfp-fallback, .row.profile {
   border: 1px dotted transparent !important;
}
.logo-fallback {
   height: 38px !important;
}

.col.right:before {
content: "";
white-space: pre-wrap;
display: block;
height: 260px;
background-image: url("https://64.media.tumblr.com/0f6817bb5301ec49388878799714ff77/fa61e3545c0db6f6-dc/s1280x1920/210a635a35d2f6356ad3d1d81a5ea8a923cbf859.pnj");
background-repeat: no-repeat;
background-position-x: center;
background-size: 300px;
margin-top: 30px;
}
</style>


<style>
.online {
        content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a3abe5de-4294-4f92-a235-bbbe428ba080/dh1kjpo-a14b9591-2e1d-4546-a15b-6c2f53601aef.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2EzYWJlNWRlLTQyOTQtNGY5Mi1hMjM1LWJiYmU0MjhiYTA4MFwvZGgxa2pwby1hMTRiOTU5MS0yZTFkLTQ1NDYtYTE1Yi02YzJmNTM2MDFhZWYucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.HCSFZ3EQU3O1FBQQjqqVyFNOpvlgpCRHspEswDxsrMQ");}
</style>
<style>
.profile {
Background: url(https://64.media.tumblr.com/ca114f79154e5cbd2a2e0b66e3514f50/5437002bdca7faad-eb/s500x750/ada61bca02f697ff968d98b41c5979b240d93668.gifv);
background-repeat: no-repeat;
background-position-x: center;
background-size: 975px;
<style>
<style>
.profile {
Background: url(https://64.media.tumblr.com/ca114f79154e5cbd2a2e0b66e3514f50/5437002bdca7faad-eb/s500x750/ada61bca02f697ff968d98b41c5979b240d93668.gifv);
background-repeat: no-repeat;
background-position-x: center;
background-size: 975px;
<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(0deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>
<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 75; 
z-index: 100;
background-image: url('https://64.media.tumblr.com/ba89da30c53cfe3b944071c79cbc8fae/5834635a10680fbc-aa/s540x810/e273c0da550e37d4019499c17065bc1d96bd4693.gifv');
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>





<iframe width="0" height="0" src="https://www.youtube.com/embed/58N7VCQ2X9Q//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
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 1 of 1 comments ( View all | Add Comment )
LegenDarius
1711373100
I love it. This is exactly what I wanted. Very nice. Thanks!
Report Comment