Silent Hill 2 layout

Tags: silent hill, gaming, simple, horror

Description:

a simple SH2 layout

I made it very transparent (unhovered) to go for a "foggy" vibe :]

and the fog at the bottom of the background moves!

if you like/use it, please comment! I'd love to see it on others profiles.

this is what is looked like when hovered over;

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,700;1,600&display=swap');
</style>
<style>
nav .top{
   background: rgba(0, 0, 0, 0.8);
}
nav .links{
   background: rgba(0, 0, 0, 0.8); 
   font: georgia;
   color: #c4c4c4;
}
nav .links a:hover{
   color: #c63800;
   text-decoration: none;
}

body {         
   background-image: url(https://64.media.tumblr.com/185b358e666a2deee0e4dd8156142156/64e799d2cbd5e21a-d8/s640x960/f31baa79df1a2b0a327fef6e6029eb24ac9fec84.gif);
   background-color: rgba(0, 0, 0);   
   background-repeat: no-repeat;
   background-size: 100%;   
   background-attachment: fixed; 
   opacity: 0.65;
}  
p {
  font-family: georgia;
  font-size: 12px;
  color: #d3d3d3;
} 
b {
  font-weight: normal;
  font-family: georgia;
}

h1{
   font-size: 40px!important;
   font-family: 'Cormorant Garamond', serif;
   color: #91b1b7;
   text-shadow: 0 0 3px #b8d8dd;
   line-height: 80px;
   background: none;
   background-image:url(https://64.media.tumblr.com/e1b241d04e68209fdd7b8e12a61fa74f/93eec88b6c306a68-3b/s100x200/0bc6d54af3bb0777c71178e4e9859cb2bde1e37a.png);
  background-repeat: no-repeat;
  background-position: right;
}
main {   
   background-image:url(https://www.silenthillmemories.net/shm/wallpapers/pics/sh_the_movie_wallp_03_1600.jpg);
   background-color: rgba(0, 0, 0, 0);
   background-repeat: repeat;
   background-attachment: fixed;   
   padding: 10px;
      opacity:0.45;
    transition: opacity 0.45s ease-out;
    -moz-transition: opacity 0.45s ease-out;
    -webkit-transition: opacity 0.45s ease-out;
    -o-transition: opacity 0.45s ease-out;
} 
main:hover {
  background-image:url(https://www.silenthillmemories.net/shm/wallpapers/pics/sh_the_movie_wallp_03_1600.jpg);
  background-color: #000000;
  opacity:1.0;
  filter:alpha(opacity=100);
}  

a {
  color: #bce3ff;
}
a:hover {
  color: #cc4000;
}
.general-about {                        
   text-align: left;  
} 


.online{content:url("https://dl.glitter-graphics.com/pub/944/944811pepyacdzo7.gif");
}
.profile .mood {  
   border: solid 1px #c63800; 
   background-image: (none); 
   background-color: rgba(0, 0, 0, 0.2);      
   text-align: center; 
   text-transformation: lowercase;
} 

.profile .contact .heading {     
    background: rgba(0, 0, 0, 0.08);     
    text-align: left; 
    color: #87a6bc;  
}  
 .profile .contact {             
    background-image: url(https://hdwallpaperim.com/wp-content/uploads/2017/09/17/62415-Silent_Hill__2-james_sunderland-748x421.jpg);   
    background-position: center;  
    background-repeat: none;    
    background-attachment: scroll;
    background-size: 100%;  
    Height:150px;    
    font-size: 12px;
    font-family: georgia;
    border: none;  
}
.contact a{      
   font-family: 'Cormorant Garamond', serif;
   text-transformation: lowercase;
   font-size: 12px; 
   color: #c4c4c4; 
}
.contact a:hover{     
   color: #87a6bc;   
}
.icon {
   height:0px;
   width:0px;
}
.profile .url-info {
   border:none;
}
.profile .table-section{
   border: solid 0px #000; 
}

.profile .table-section .heading {
   background-color: rgba(0, 0, 0, 0.6);
   text-align: left;  
   font-color: #c4c4c4;
   font-family: georgia;
   text-transform: lowercase;
}

.details-table td {   
   background-color: rgba(0, 0, 0, 0.8);  
   color: #bce3ff;         
   padding: 5px; 
}
.details-table td:first-child {  
   background-color: rgba(0, 0, 0, 0.6);      
   color: #c4c4c4;  
   padding: 5px; 
} 
.blog-preview  {       
    border: solid 1px #000000;
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px; 
   background-color: rgba(115, 192, 214, 0.8);  
   background-image:url(https://64.media.tumblr.com/96dcb589db6e402a71a69516eb1241ef/f4b080ed810d9bff-42/s500x750/b890079f6dac0b92012f7d6cd230f5c7e50ce988.png);
   background-position: center;
   background-size: 100%; 
   opacity:0.5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
} 
.blog-preview:hover {
    opacity:1.0;
  filter:alpha(opacity=100);
}
h4 {
     font-family:georgia;
     font-size: 11px;
     color: #c4c4c4;
}

.profile-info {
     height: 50px;
     font-family:georgia;
     font-size: 11px;
}
.profile .blurbs .heading {
    background: rgba(0, 0, 0, 0.4);
    font-family: 'Cormorant Garamond', serif;
    color: #c4c4c4;
    font-size: 11px;
}

.profile .blurbs .section h4{
    background-color:rgba(198, 56, 0, 0.4);
    color: #ffffff;
}

.profile .blurbs .section p {
   word-wrap: break-word;
}
.profile .friends .heading {
   background: rgba(0, 0, 0, 0.4);
    font-family: 'Cormorant Garamond', serif;
    color: #c4c4c4;
    font-size: 11px;
}

.comments-table td {   
   background: rgba(0, 0, 0, 0.4);              
   font: verdana;        
   font-size: 10px;   
   padding: 10px; 
} 
.comments-table td p {   
   text-align: left!important;
   background: rgba(0, 0, 0, 0.4);   
} 

:root {
--light-orange: rgba(0, 0, 0, 0.6);
}
.count {
   color: #1c63800;
}
   /*scrollbar*/
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #c4c4c4; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #78add3; 
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #c63800;
  border-radius: 5px; 
}
footer {
    height:80px;
    background: rgba(0, 0,0, 0.8);  
    
}
footer a {
    color: #78add3;
}
</style>

<!-- Cursor -->
<style>body { cursor: url('https://64.media.tumblr.com/61e7056b4c9f2be60693cd9fd88e93e5/b3ad292faaa7e0c6-04/s75x75_c1/d33b6bf48b39d0497286e28873fcb46177edd4a8.png'), auto; }</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 226 comments ( View all | Add Comment )

cнαєячєσng	1777573927 using !! ^^ Report Comment
Lalafloopsie	1777159744 Using!! Report Comment
AnaBeeMustDie	1777155997 using!!:') Report Comment
Aishi	1777138461 using !! Report Comment
JayJay	1776566759 usingg Report Comment
Narcisse	1776206252 using Report Comment
thea ㄨ	1775684730 using Report Comment
samsa 🪳	1774501352 usingg Report Comment
---	1773194238 using Report Comment
marie	1773109121 using! Report Comment
𝖙𝖆𝖚𝖓	1772715456 does any1 know the code for just the moving fog? i would luv to add that to my profile :3 Report Comment
Gabriella Dias	1772299532 Using <3 tyy!! Report Comment
Ekiz23	1771782859 using Report Comment using by Ekiz23; 1771782876; Report
Ekiz23	1771782829 usiiing Report Comment
xzqpwy𓇢𓆸	1771488125 Using Report Comment
macca	1770846214 using Report Comment
tracy	1770452361 usinggg Report Comment
Sp4rk	1769958918 using !! >_< Report Comment
finney	1769758739 using it's so good!!!! Report Comment
Lucio	1769722122 using ! Report Comment