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

bigboss	1761672454 using and i cant imagine being so talented!!! Report Comment
Libra	1761671867 using this!!!!@@@#$U$I$UYTREW@#E$R%TYUI Report Comment
sab	1761150836 using !! Report Comment
Mike ᶻ 𝗓 𐰁	1759858013 Yeo Using This! Report Comment
𝔠𝔬𝔡𝔢𝔫𝔞𝔪𝔢_𝔞	1759847634 usingg Report Comment
TheDeadCell	1759788300 def using Report Comment
Clownenjoyer	1759451364 ussssingg Report Comment
Claire ★彡	1759326650 usinggg Report Comment
eri ^__^	1759242235 USINGGG Report Comment
whokilledvaleriee	1759232407 using ! Report Comment
qkxml	1759059616 using! Report Comment
Koda	1758734759 Using!! Report Comment
Pyroglyphics	1758311653 Omg I'm gonna totally use this! Report Comment
SHIANAAA.A	1758181303 using! Report Comment
jin—bug	1757905368 using! Report Comment
nanadead	1757366189 using Report Comment
ℳ𝒾𝒶	1757306812 Using Report Comment
nm	1755124632 using Report Comment
nm	1755124626 using Report Comment
riseof_sunrise	1754145283 using!!! Report Comment