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

Under_Line	1742267218 using Report Comment
burntcrumbs	1741526088 using Report Comment
Nana osaki	1741237038 using Report Comment
Rosina	1740084815 using!!! Report Comment
zahra	1740013681 using Report Comment
fearthatrots	1739657598 using Report Comment
d3m0l1tionl0v3rs	1737381042 I´m obsessed with it! tysm <33 Report Comment
LegenDarius	1711373100 I love it. This is exactly what I wanted. Very nice. Thanks! Report Comment